Card Grid

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {items.map((item) => (
    <a key={item.id} href={`/items/${item.id}`}>
      <Card className="hover:border-primary/50 transition-colors cursor-pointer">
        <CardHeader>
          <CardTitle className="text-base">{item.name}</CardTitle>
          <CardDescription>{item.description}</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex gap-2">
            <Badge variant="secondary">{item.category}</Badge>
            <Badge variant="outline">{item.status}</Badge>
          </div>
        </CardContent>
      </Card>
    </a>
  ))}
</div>