Bento Grid

import BentoGrid from '@/components/bento-grid';

export default function MyComponent() {
return <BentoGrid />;
}

import BentoGrid from '@/components/bento-grid';
import { CheckCircle, TrendingUp } from 'lucide-react';

const customItems = [
{
title: "Analytics Dashboard",
meta: "v2.4.1",
description: "Real-time metrics with AI-powered insights",
icon: <TrendingUp className="w-4 h-4 text-blue-500" />,
status: "Live",
tags: ["Statistics", "Reports"],
colSpan: 2,
},
{
title: "Task Manager",
meta: "84 completed",
description: "Automated workflow management",
icon: <CheckCircle className="w-4 h-4 text-emerald-500" />,
status: "Updated",
tags: ["Productivity"],
},
];

<BentoGrid items={customItems} />

"use client";

import { cn } from "@/lib/utils";
import { CheckCircle, TrendingUp, Video, Globe } from "lucide-react";

interface BentoItem {
title: string;
description: string;
icon: React.ReactNode;
status?: string;
tags?: string[];
meta?: string;
cta?: string;
colSpan?: number;
hasPersistentHover?: boolean;
}

interface BentoGridProps {
items: BentoItem[];
}

const itemsSample: BentoItem[] = [
// ... your items
];

export default function BentoGrid({ items = itemsSample }: BentoGridProps) {
return (
  <div className="grid grid-cols-1 md:grid-cols-3 gap-3 p-4 max-w-7xl mx-auto">
    {items.map((item, index) => (
      <div key={index} className={cn(/* ... */)}>
        {/* ... */}
      </div>
    ))}
  </div>
);
}

export interface BentoItem {
title: string;
description: string;
icon: React.ReactNode;
status?: string;
tags?: string[];
meta?: string;
cta?: string;
colSpan?: number;
hasPersistentHover?: boolean;
}

export interface BentoGridProps {
items?: BentoItem[];
}