Bento

import { BentoGrid, BentoGridItem } from "@/registry/aliimam/components/bento"

export function DashboardExample() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <BentoGrid cols={{ base: 2, md: 3, lg: 4 }}>
        <BentoGridItem colSpan={2} rowSpan={2}>
          Hero Card
        </BentoGridItem>
        <BentoGridItem>Stats 1</BentoGridItem>
        <BentoGridItem>Stats 2</BentoGridItem>

        <BentoGridItem colSpan={2}>Wide Card</BentoGridItem>

        <BentoGridItem>Small</BentoGridItem>
        <BentoGridItem>Small</BentoGridItem>
        <BentoGridItem>Small</BentoGridItem>
        <BentoGridItem>Small</BentoGridItem>
      </BentoGrid>
    </div>
  )
}

import { BentoGrid, BentoGridItem } from "@/registry/aliimam/components/bento"

export function DashboardExample() {
  return (
    <BentoGrid rowHeight={{ base: "70px", md: "120px", lg: "120px" }}>
      <BentoGridItem colSpan={{ base: 1, md: 3, lg: 5 }}>
        Full Width Banner
      </BentoGridItem>
      <BentoGridItem colSpan={{ base: 1, lg: 2 }}>Feature 1</BentoGridItem>
      <BentoGridItem>Feature 3</BentoGridItem>

      <BentoGridItem colSpan={{ base: 1, lg: 2 }}>Feature 1</BentoGridItem>

      <BentoGridItem colSpan={{ base: 1, md: 3, lg: 5 }}>
        Full Width Banner
      </BentoGridItem>
    </BentoGrid>
  )
}

import { BentoGrid, BentoGridItem } from "@/registry/aliimam/components/bento"

export function DashboardExample() {
  return (
    <BentoGrid rowHeight={{ base: "60px", md: "120px", lg: "120px" }}>
      <BentoGridItem rowSpan={{ base: 1, md: 3, lg: 3 }}>
        Full Height Banner
      </BentoGridItem>
      <BentoGridItem rowSpan={{ base: 1, lg: 2 }}>Feature 1</BentoGridItem>
      <BentoGridItem rowSpan={{ base: 1, lg: 2 }}>Feature 1</BentoGridItem>

      <BentoGridItem rowSpan={{ base: 1, lg: 2 }}>Feature 1</BentoGridItem>

      <BentoGridItem rowSpan={{ base: 1, md: 2, lg: 3 }}>
        Full Height Banner
      </BentoGridItem>
      <BentoGridItem colSpan={{ base: 1, lg: 3 }}>Feature 1</BentoGridItem>
    </BentoGrid>
  )
}

import { BentoGrid, BentoGridItem } from "@/registry/aliimam/components/bento"

export function DashboardExample() {
  return (
    <BentoGrid
      className="border"
      gap={0}
      cols={4}
      rowHeight={{ base: "40px", md: "90px", lg: "180px" }}
    >
      {Array.from({ length: 8 }).map((_, i) => (
        <BentoGridItem colSpan={{ base: 4, md: 2, lg: 1 }} key={i}>
          Card {i + 1}
        </BentoGridItem>
      ))}
    </BentoGrid>
  )
}

import { BentoGrid, BentoGridItem } from "@/registry/aliimam/components/bento"

export function DashboardExample() {
  return (
    <BentoGrid
      cols={{ base: 2, md: 3, lg: 4 }}
      rowHeight={{ base: "60px", md: "80px", lg: "120px" }}
    >
      <BentoGridItem colSpan={2} rowSpan={2}>
        Hero Card
      </BentoGridItem>
      <BentoGridItem>Stats 1</BentoGridItem>
      <BentoGridItem>Stats 2</BentoGridItem>

      <BentoGridItem rowSpan={2} colSpan={2}>
        Wide Card
      </BentoGridItem>

      <BentoGridItem>Small</BentoGridItem>
      <BentoGridItem>Small</BentoGridItem>
    </BentoGrid>
  )
}