Bento Grid

npx shadcn-svelte@latest add https://acme.com/r/bento-grid

<script lang="ts">
  import { BentoGrid, BentoCard } from "magic/bento-grid";
  import { CalendarIcon } from "@lucide/svelte";
</script>

<BentoGrid>
  <BentoCard
    name="Calendar"
    description="Use the calendar to filter your files by date."
    Icon={CalendarIcon}
    href="#"
    cta="Learn more"
  >
    {#snippet background()}
      <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-500" />
    {/snippet}
  </BentoCard>
</BentoGrid>

<script lang="ts">
  import { BentoGrid, BentoCard } from "magic/bento-grid";
  import { CalendarIcon, FileTextIcon, BellIcon } from "@lucide/svelte";
</script>

<BentoGrid class="grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <BentoCard
    name="Calendar"
    description="Schedule and manage your events"
    Icon={CalendarIcon}
    href="/calendar"
    cta="View calendar"
    class="md:col-span-2"
  >
    {#snippet background()}
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-blue-600" />
    {/snippet}
  </BentoCard>

  <BentoCard
    name="Documents"
    description="Access all your files"
    Icon={FileTextIcon}
    href="/docs"
    cta="Browse files"
  >
    {#snippet background()}
      <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-green-600" />
    {/snippet}
  </BentoCard>

  <BentoCard
    name="Notifications"
    description="Stay updated with alerts"
    Icon={BellIcon}
    href="/notifications"
    cta="See all"
  >
    {#snippet background()}
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-purple-600" />
    {/snippet}
  </BentoCard>
</BentoGrid>

<BentoGrid class="grid-cols-1 md:grid-cols-4 gap-6">
  <BentoCard class="md:col-span-2 md:row-span-2" {name} {Icon} {description} {href} {cta}>
    {#snippet background()}
      <!-- Large feature card -->
    {/snippet}
  </BentoCard>
  
  <BentoCard class="md:col-span-2" {name} {Icon} {description} {href} {cta}>
    {#snippet background()}
      <!-- Normal card -->
    {/snippet}
  </BentoCard>
</BentoGrid>