{
  "name": "bento-grid-custom-demo",
  "registryDependencies": [
    "bento-grid"
  ],
  "files": [
    {
      "path": "examples/bento-grid-custom-demo.tsx",
      "content": "\"use client\";\n\nimport {\n  ArrowUpRight,\n  Brain,\n  Cpu,\n  Globe,\n  Layers,\n  Sparkles,\n} from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { BentoGrid } from \"@/registry/default/ui/bento-grid\";\n\nexport default function BentoGridCustomDemo() {\n  return (\n    <BentoGrid className=\"mx-auto max-w-7xl gap-4 p-4\">\n      {/* Main AI Intelligence Card */}\n      <Card className=\"relative overflow-hidden border-primary/20 bg-gradient-to-br from-indigo-500/10 via-purple-500/5 to-background md:col-span-2 lg:row-span-2\">\n        <div className=\"absolute -top-20 -right-20 h-64 w-64 rounded-full bg-primary/10 blur-3xl\" />\n        <CardHeader className=\"relative z-10 pb-2\">\n          <div className=\"flex items-center justify-between\">\n            <Badge\n              variant=\"outline\"\n              className=\"border-primary/30 bg-primary/10 text-primary\"\n            >\n              <Brain className=\"mr-1 h-3 w-3\" />\n              AI Core v2.4\n            </Badge>\n            <span className=\"text-muted-foreground text-xs\">\n              Updated 2m ago\n            </span>\n          </div>\n          <CardTitle className=\"mt-4 font-bold text-3xl tracking-tight\">\n            Neural Network <br />\n            <span className=\"text-primary\">Intelligence Hub</span>\n          </CardTitle>\n        </CardHeader>\n        <CardContent className=\"relative z-10 space-y-8\">\n          <p className=\"max-w-md text-muted-foreground\">\n            Real-time processing of over 1.2M data points per second with\n            predictive modeling and automated anomaly detection.\n          </p>\n\n          <div className=\"grid grid-cols-2 gap-6\">\n            <div className=\"space-y-1\">\n              <p className=\"text-muted-foreground text-xs uppercase tracking-wider\">\n                Accuracy\n              </p>\n              <p className=\"font-bold font-mono text-2xl text-emerald-500\">\n                99.98%\n              </p>\n            </div>\n            <div className=\"space-y-1\">\n              <p className=\"text-muted-foreground text-xs uppercase tracking-wider\">\n                Latency\n              </p>\n              <p className=\"font-bold font-mono text-2xl text-blue-500\">14ms</p>\n            </div>\n          </div>\n\n          <div className=\"flex flex-wrap gap-2\">\n            <Button size=\"sm\" className=\"shadow-lg shadow-primary/20\">\n              Deploy Model\n              <ArrowUpRight className=\"ml-2 h-4 w-4\" />\n            </Button>\n            <Button size=\"sm\" variant=\"outline\">\n              View Logs\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Real-time Traffic */}\n      <Card className=\"border-border/50 bg-card/50 backdrop-blur-sm\">\n        <CardHeader className=\"pb-2\">\n          <CardTitle className=\"flex items-center gap-2 font-medium text-sm\">\n            <Globe className=\"h-4 w-4 text-blue-500\" />\n            Global Traffic\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex items-baseline gap-2\">\n            <span className=\"font-bold text-2xl\">42.8k</span>\n            <span className=\"font-medium text-emerald-500 text-xs\">+12%</span>\n          </div>\n          <div className=\"mt-4 flex h-12 items-end gap-1\">\n            {[40, 70, 45, 90, 65, 80, 50, 95, 75, 60].map((h, i) => (\n              <div\n                key={i}\n                className=\"flex-1 rounded-t-sm bg-blue-500/20 transition-all hover:bg-blue-500\"\n                style={{ height: `${h}%` }}\n              />\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* System Health */}\n      <Card className=\"border-border/50 bg-card/50 backdrop-blur-sm\">\n        <CardHeader className=\"pb-2\">\n          <CardTitle className=\"flex items-center gap-2 font-medium text-sm\">\n            <Cpu className=\"h-4 w-4 text-purple-500\" />\n            System Health\n          </CardTitle>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          <div className=\"flex items-center justify-between text-xs\">\n            <span className=\"text-muted-foreground\">CPU Load</span>\n            <span className=\"font-medium\">24%</span>\n          </div>\n          <div className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\">\n            <div\n              className=\"h-full bg-purple-500 transition-all\"\n              style={{ width: \"24%\" }}\n            />\n          </div>\n          <div className=\"flex items-center justify-between text-xs\">\n            <span className=\"text-muted-foreground\">Memory</span>\n            <span className=\"font-medium\">4.2GB / 16GB</span>\n          </div>\n          <div className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\">\n            <div\n              className=\"h-full bg-blue-500 transition-all\"\n              style={{ width: \"35%\" }}\n            />\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Active Agents */}\n      <Card className=\"border-border/50 bg-card/50 backdrop-blur-sm md:col-span-2\">\n        <CardHeader className=\"pb-2\">\n          <div className=\"flex items-center justify-between\">\n            <CardTitle className=\"flex items-center gap-2 font-medium text-sm\">\n              <Layers className=\"h-4 w-4 text-amber-500\" />\n              Active AI Agents\n            </CardTitle>\n            <Button variant=\"ghost\" size=\"sm\" className=\"h-8 text-xs\">\n              Manage All\n            </Button>\n          </div>\n        </CardHeader>\n        <CardContent>\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n            {[\n              { name: \"DataScout\", status: \"Running\", color: \"bg-emerald-500\" },\n              { name: \"TrendBot\", status: \"Idle\", color: \"bg-slate-400\" },\n              {\n                name: \"SecuritySentinel\",\n                status: \"Running\",\n                color: \"bg-emerald-500\",\n              },\n            ].map((agent) => (\n              <div\n                key={agent.name}\n                className=\"flex items-center gap-3 rounded-lg border bg-background/50 p-3\"\n              >\n                <div className={`h-2 w-2 rounded-full ${agent.color}`} />\n                <div className=\"flex-1 overflow-hidden\">\n                  <p className=\"truncate font-medium text-sm\">{agent.name}</p>\n                  <p className=\"text-[10px] text-muted-foreground uppercase\">\n                    {agent.status}\n                  </p>\n                </div>\n              </div>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Recent Insights */}\n      <Card className=\"border-border/50 bg-card/50 backdrop-blur-sm\">\n        <CardHeader className=\"pb-2\">\n          <CardTitle className=\"flex items-center gap-2 font-medium text-sm\">\n            <Sparkles className=\"h-4 w-4 text-rose-500\" />\n            AI Insights\n          </CardTitle>\n        </CardHeader>\n        <CardContent className=\"space-y-3\">\n          <div className=\"rounded-md border border-rose-500/10 bg-rose-500/5 p-2 text-[11px]\">\n            <p className=\"font-medium text-rose-600 dark:text-rose-400\">\n              Anomaly Detected\n            </p>\n            <p className=\"text-muted-foreground\">\n              Unusual traffic spike from Asia-Pacific region.\n            </p>\n          </div>\n          <div className=\"rounded-md border border-emerald-500/10 bg-emerald-500/5 p-2 text-[11px]\">\n            <p className=\"font-medium text-emerald-600 dark:text-emerald-400\">\n              Optimization Tip\n            </p>\n            <p className=\"text-muted-foreground\">\n              Reduce cache TTL for faster data propagation.\n            </p>\n          </div>\n        </CardContent>\n      </Card>\n    </BentoGrid>\n  );\n}\n",
      "type": "registry:example",
      "target": ""
    }
  ],
  "type": "registry:example"
}