{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "content-grid",
  "type": "registry:component",
  "title": "Content Grid",
  "author": "codefellas <codefellasdd@gmail.com>",
  "description": "A content grid component that supports both grid and list views.",
  "registryDependencies": [
    "button",
    "@fellasUI/utils"
  ],
  "files": [
    {
      "path": "registry/@fellas/ui/content-grid/content-grid.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from 'react'\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/registry/@fellas/ui/button\"\nimport { Grid2X2, List } from \"lucide-react\"\n\nexport interface ContentItem {\n  id: string | number\n  [key: string]: unknown\n}\n\nexport type ViewMode = 'grid' | 'list'\n\nexport interface ContentGridProps {\n  items: ContentItem[]\n  renderCard: (item: ContentItem, viewMode: ViewMode) => React.ReactNode\n  defaultViewMode?: ViewMode\n  gridColumns?: 'auto' | 1 | 2 | 3 | 4 | 5 | 6\n  className?: string\n  onViewModeChange?: (mode: ViewMode) => void\n}\n\nexport function ContentGrid({\n  items,\n  renderCard,\n  defaultViewMode = 'grid',\n  gridColumns = 'auto',\n  className,\n  onViewModeChange,\n}: ContentGridProps) {\n  const [viewMode, setViewMode] = useState<ViewMode>(defaultViewMode)\n\n  const handleViewModeChange = (mode: ViewMode) => {\n    setViewMode(mode)\n    onViewModeChange?.(mode)\n  }\n\n  const getGridClasses = () => {\n    if (viewMode !== 'grid') return ''\n\n    const baseClasses = 'grid gap-4 transition-all duration-200'\n\n    if (gridColumns === 'auto') {\n      return `${baseClasses} grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`\n    }\n\n    const colClasses = {\n      1: 'grid-cols-1',\n      2: 'grid-cols-1 md:grid-cols-2',\n      3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',\n      4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',\n      5: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',\n      6: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6'\n    }\n\n    return `${baseClasses} ${colClasses[gridColumns]}`\n  }\n\n  const getListClasses = () => {\n    if (viewMode !== 'list') return ''\n    return 'space-y-4 transition-all duration-200'\n  }\n\n  return (\n    <div className={cn(\"w-full space-y-4\", className)}>\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"text-2xl font-bold\">\n          {items.length} {items.length === 1 ? 'item' : 'items'}\n        </h2>\n\n        <div className=\"flex border rounded-lg p-1 gap-1\">\n          <Button\n            variant={viewMode === 'grid' ? 'default' : 'ghost'}\n            size=\"sm\"\n            onClick={() => handleViewModeChange('grid')}\n            className=\"px-3\"\n          >\n            <Grid2X2 className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            variant={viewMode === 'list' ? 'default' : 'ghost'}\n            size=\"sm\"\n            onClick={() => handleViewModeChange('list')}\n            className=\"px-3\"\n          >\n            <List className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </div>\n\n      <div className={cn(\n        viewMode === 'grid' ? getGridClasses() : getListClasses()\n      )}>\n        {items.map(item =>\n          renderCard(item, viewMode)\n        )}\n      </div>\n\n      {items.length === 0 && (\n        <div className=\"text-center py-12\">\n          <div className=\"text-muted-foreground\">\n            No items to display.\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}",
      "type": "registry:component",
      "target": "components/fellasUI/content-grid/content-grid.tsx"
    }
  ]
}