Media Grid

import { Image, Folder } from 'lucide-react'
import { GridList, GridListItem } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="w-full max-w-2xl">
      <GridList minItemWidth={120} gap={0.75}>
        {Array.from({ length: 12 }).map((_, i) => (
          <GridListItem key={i} interactive className="aspect-square flex items-center justify-center">
            {i % 3 === 0 ? <Image className="h-6 w-6 text-muted-foreground" /> : <Folder className="h-6 w-6 text-muted-foreground" />}
          </GridListItem>
        ))}
      </GridList>
    </div>
  )
}