Dynamic Bento Layout

import { DynamicBentoLayout } from "@/components/community/demos/DynamicBentoLayout";

  export default function Demo() {
    // Customize bento grid content by passing custom cards, icons, colors, and stats
    const customItems = [
      {
        id: "node-1",
        title: "Custom Service",
        subtitle: "API LAYER",
        color: "#ff5c71",
        icon: (
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="12" cy="12" r="10" />
          </svg>
        ),
        content: "Customize this bento box with your own custom descriptive text content.",
        metrics: [
          { label: "Status", value: "Active" },
          { label: "Queries", value: "99.9%" }
        ]
      }
    ];

    return (
      <div className="w-full">
        <DynamicBentoLayout items={customItems} />
      </div>
    );
  }