4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T47b,import { BentoGrid, BentoItem, ChatMessaging, CompanyLogos, } from "@/registry/blocks/bento-grid/one/bento-grid-template-one"; export default function BentoGridOne() { const items: BentoItem[] = [ { id: "1", type: "feature", title: "World-Class Information Design", description: "Transform complex data into crisp visuals that quickly tell your story.", image: "https://assets.solaceui.com/solaceui-hero-video.jpg", }, { id: "2", type: "chat", content: , }, { id: "3", type: "partners", title: "Connected Everywhere", description: "Embed your work seamlessly across your favorite platforms for instant sharing.", content: , }, ]; return (

); } 52:T3265,"use client"; import type { ReactNode } from "react"; import { motion } from "motion/react"; import Image from "next/image"; import { cn } from "@/lib/utils"; // Types for our bento grid items export type BentoItem = { id: string; type: "feature" | "chat" | "partners"; title?: string; description?: string; image?: string; className?: string; content?: ReactNode; }; // Props for our base BentoGrid component interface BentoGridProps { items: BentoItem[]; className?: string; } // Props for each bento item interface BentoItemProps { item: BentoItem; className?: string; } // Base BentoGrid component export function BentoGrid({ items, className }: BentoGridProps) { return (

{items.map((item) => { return (

); })}

); } // Individual BentoGridItem component function BentoGridItem({ item, className }: BentoItemProps) { const { type, title, description, image, content } = item; // Different layouts based on item type switch (type) { case "feature": return (

Visualise Info

{title}

{description}

{image && (

)}

); case "chat": return (

Customise

{content}

); case "partners": return (

{content}

Embed

{title}

{description}

); default: return null; } } // Company logos component for the partners section export function CompanyLogos() { const logos = [ { name: "Spotify", url: "https://assets.solaceui.com/solaceui-Spotify.png", }, { name: "Notion", url: "https://assets.solaceui.com/solaceui-Notion.png", }, { name: "Slack", url: "https://assets.solaceui.com/solaceui-Slack.png", }, { name: "Twitter", url: "https://assets.solaceui.com/solaceui-Twitter.png", }, { name: "Apple", url: "https://assets.solaceui.com/solaceui-Apple.png", }, ]; return (

{/* First set of logos */} {logos.map((logo) => (

))} {/* Duplicate set for seamless looping */} {logos.map((logo) => (

))}

); } // Chat messaging component with iPhone mockup export function ChatMessaging() { return (

Assistant

Online

How can I help you today? I need help with my project I'd be happy to help! What kind of project are you working on? I'm building a component library with Next.js and Tailwind

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@solaceui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/blocks/bento-grid/one/index.tsx","content":"$51","type":"registry:component","target":"components/bento-grid-1.tsx"},{"path":"src/registry/blocks/bento-grid/one/bento-grid-template-one.tsx","content":"$52","type":"registry:component","target":"components/bento-grid-template-one.tsx"}],"className":"h-[70svh] min-h-80"}]]}]