Card

<script lang="ts">
	import Button from '#lib/ui/Button.svelte';
	import Card from '#lib/ui/Card.svelte';
</script>

<Card title="The Canon of Medicine" description="Ibn Sina, completed 1025. Five books.">
	The standard medical text in the Islamic world and in Europe for centuries.
	{#snippet footer()}
		<Button size="sm" variant="ghost">Preview</Button>
		<Button size="sm">Borrow</Button>
	{/snippet}
</Card>

<script lang="ts">
	import Card from '#lib/ui/Card.svelte';

	const scholars = [
		{ name: 'Al-Khwarizmi', work: 'Algebra and algorithms, Baghdad', href: '#linked' },
		{
			name: 'Ibn al-Haytham',
			work: 'Optics and the scientific method, Cairo',
			href: '#linked'
		},
		{ name: 'Fatima al-Fihri', work: 'Founded al-Qarawiyyin, Fez', href: '#linked' }
	];
</script>

<!-- The whole card is one link, named by its title. -->
<div class="cards">
	{#each scholars as s (s.name)}
		<Card title={s.name} description={s.work} href={s.href} />
	{/each}
</div>

<style>
	.cards {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
		gap: 1rem;
		inline-size: 100%;
	}
</style>