{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bento-grid-4", "title": "Bento Grid 4", "description": "Solace UI bento grid block variation 4.", "dependencies": [ "motion" ], "files": [ { "path": "src/registry/blocks/bento-grid/four/index.tsx", "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { useState, type ReactNode } from \"react\";\n\ntype IconProps = { className?: string };\ntype TemplateItem = { name: string; icon: (props: IconProps) => ReactNode; active?: boolean };\ntype Platform = { name: string; icon: (props: IconProps) => ReactNode };\ntype ShareDestination = { name: string; detail: string; icon: (props: IconProps) => ReactNode; enabled?: boolean };\n\nconst memberImages = [\n \"https://assets.solaceui.com/solaceui-member-five.png\",\n \"https://assets.solaceui.com/solaceui-member-one.png\",\n \"https://assets.solaceui.com/solaceui-member-four.png\",\n];\n\nconst rawNotes = [\n { time: \"10:32\", speaker: \"Alex\", text: \"So the main thing is speed and ease of use...\" },\n { time: \"10:45\", speaker: \"Jamie\", text: \"Yeah and also security, IT is going to ask about SSO...\" },\n { time: \"10:58\", speaker: \"Alex\", text: \"Right. And we should probably integrate with Slack + Notion.\" },\n { time: \"11:07\", speaker: \"Jamie\", text: \"Budget-wise, we're looking at something under 50k.\" },\n];\n\nconst templates: TemplateItem[] = [\n { name: \"Customer discovery\", icon: DocumentIcon, active: true },\n { name: \"1:1\", icon: ChartIcon },\n { name: \"User interview\", icon: UserSquareIcon },\n { name: \"Standup\", icon: UserSquareIcon },\n { name: \"Project update\", icon: FileCheckIcon },\n];\n\nconst platforms: Platform[] = [\n { name: \"Zoom\", icon: ZoomLogoPlaceholder },\n { name: \"Google Meet\", icon: GoogleMeetLogoPlaceholder },\n { name: \"Slack\", icon: SlackLogoPlaceholder },\n { name: \"Microsoft Teams\", icon: TeamsLogoPlaceholder },\n { name: \"Webex\", icon: WebexLogoPlaceholder },\n { name: \"Any app\", icon: AnyAppLogoPlaceholder },\n];\n\nconst syncItems = [\n { label: \"Action items\", count: 3, active: true },\n { label: \"Follow-ups\", count: 2 },\n { label: \"Decisions\", count: 2 },\n { label: \"Summary\", detail: \"We aligned on SSO, Slack + Notion integrations, and keeping the budget under $50K.\" },\n];\n\nconst shareDestinations: ShareDestination[] = [\n { name: \"Email\", detail: \"Recipients\", icon: MailIcon },\n { name: \"Slack\", detail: \"# project-updates\", icon: SlackIcon },\n { name: \"Notion\", detail: \"Meeting notes\", icon: NotionIcon },\n { name: \"CRM\", detail: \"Add to deal\", icon: NetworkIcon },\n { name: \"Public link\", detail: \"Anyone with link\", icon: LinkIcon, enabled: true },\n];\n\nconst audioWaveBars = [\n { x: 0, y: 7.6, height: 14.4 },\n { x: 5, y: 2.6, height: 22.0 },\n { x: 10, y: 2.1, height: 22.6 },\n { x: 15, y: 6.8, height: 15.6 },\n { x: 20, y: 12.5, height: 7.9 },\n { x: 25, y: 14.9, height: 4.0 },\n { x: 30, y: 11.3, height: 9.1 },\n { x: 35, y: 5.0, height: 18.5 },\n { x: 40, y: 1.9, height: 23.0 },\n { x: 45, y: 4.9, height: 18.7 },\n { x: 50, y: 11.1, height: 9.3 },\n { x: 55, y: 14.8, height: 4.1 },\n { x: 60, y: 12.6, height: 7.9 },\n { x: 65, y: 6.9, height: 15.5 },\n { x: 70, y: 2.2, height: 22.5 },\n { x: 75, y: 2.5, height: 22.1 },\n { x: 80, y: 7.4, height: 14.7 },\n { x: 85, y: 12.9, height: 7.4 },\n { x: 90, y: 14.8, height: 4.2 },\n { x: 95, y: 10.8, height: 9.8 },\n { x: 100, y: 4.7, height: 19.0 },\n { x: 105, y: 1.8, height: 23.2 },\n { x: 110, y: 5.2, height: 18.2 },\n { x: 115, y: 11.5, height: 8.8 },\n];\n\nfunction cn(...classes: Array) {\n return classes.filter(Boolean).join(\" \");\n}\n\nfunction BentoCard({ title, description, className, children }: { title: string; description: string; className?: string; children: ReactNode }) {\n return (\n \n
\n
\n
\n
\n

{title}

\n

{description}

\n
\n
{children}
\n
\n \n );\n}\n\nfunction Panel({ children, className }: { children: ReactNode; className?: string }) {\n return
{children}
;\n}\n\nfunction TranscribeCard() {\n return (\n \n \n
\n \n
Raw notes
\n
{rawNotes.map((note) =>
{note.time}

{note.speaker}

{note.text}

)}
\n
Recording... 22:14
\n \n \n \n
Enhanced notes
\n

Goals

  • Improve speed and ease of use

Requirements

  • Enterprise SSO
  • Integrations with Slack and Notion

Budget

  • Under $50K

Next steps

\n
\n \n
\n \n );\n}\n\nfunction TemplatesCard() {\n const [activeTemplate, setActiveTemplate] = useState(\"Customer discovery\");\n\n return (\n \n
{templates.map((template) => { const Icon = template.icon; const isActive = activeTemplate === template.name; return ; })}

Customer discovery

Overview

Understand the customer, their goals, and key challenges.

Customer needs

  • Improve onboarding experience
  • Reduce time-to-value for new users

Challenges

  • Manual processes slowing down the team
  • Lack of visibility across tools

Range

$40K - $60K

Decision criteria

Security, ease of use, integrations

Next steps

\n \n );\n}\n\nfunction PlatformsCard() { return
{platforms.map((platform) => { const Icon = platform.icon; return {platform.name}; })}
; }\n\nfunction SyncCard() { return
{syncItems.map((item) =>
{item.label}{item.count && {item.count}}
{item.detail &&

{item.detail}

}
)}

Action items

; }\n\nfunction ShareCard() { const [enabledDestinations, setEnabledDestinations] = useState(() => Object.fromEntries(shareDestinations.filter((destination) => destination.enabled !== undefined).map((destination) => [destination.name, Boolean(destination.enabled)]))); return {shareDestinations.map((destination) => { const Icon = destination.icon; const isToggle = destination.enabled !== undefined; const checked = Boolean(enabledDestinations[destination.name]); return
{destination.name}
{destination.detail}{isToggle ? setEnabledDestinations((current) => ({ ...current, [destination.name]: !checked }))} /> : }
; })}
Enterprise security & access controlsLearn more
; }\n\nfunction CheckLine({ label, right }: { label: string; right?: string }) { return
{label}{right && {right}}
; }\nfunction Divider() { return
; }\nfunction InfoBox({ title, children }: { title: string; children: ReactNode }) { return

{title}

{children}
; }\nfunction Timeline() { return

Discovery callMay 6

Solution reviewMay 9

Technical deep diveMay 13

; }\nfunction Dot() { return ; }\nfunction CaptureStatus() { return ; }\nfunction BeamConnector() { return ; }\nfunction AvatarStack() { return
{memberImages.map((image, index) => \"Team)}+2
; }\nfunction Task({ label, meta }: { label: string; meta: string }) { return

{label}

{meta}

; }\nfunction ActionButton({ label }: { label: string }) { return ; }\nfunction SecurityRibbon() { return
Enterprise security & privacy by default
; }\nfunction Toggle({ checked, onCheckedChange }: { checked: boolean; onCheckedChange: () => void }) { return ; }\nfunction IconBase({ children, className }: { children: ReactNode; className?: string }) { return {children}; }\nfunction WaveIcon(props: IconProps) { return ; }\nfunction SearchIcon(props: IconProps) { return ; }\nfunction DotsIcon(props: IconProps) { return ; }\nfunction SparkleIcon(props: IconProps) { return ; }\nfunction StopIcon(props: IconProps) { return ; }\nfunction AudioWave(props: IconProps) { return {audioWaveBars.map((bar) => )}; }\nfunction CopyIcon(props: IconProps) { return ; }\nfunction CheckboxIcon(props: IconProps) { return ; }\nfunction PlusIcon(props: IconProps) { return ; }\nfunction DocumentIcon(props: IconProps) { return ; }\nfunction ChartIcon(props: IconProps) { return ; }\nfunction UserSquareIcon(props: IconProps) { return ; }\nfunction FileCheckIcon(props: IconProps) { return ; }\nfunction PlatformLogoPlaceholder(props: IconProps) {\n return (\n \n \n \n \n \n );\n}\n\nfunction ZoomLogoPlaceholder(props: IconProps) {\n // Replace this component with the Zoom SVG/logo.\n return (\n \n \n \n \n \n );\n}\n\nfunction GoogleMeetLogoPlaceholder(props: IconProps) {\n // Replace this component with the Google Meet SVG/logo.\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction SlackLogoPlaceholder(props: IconProps) {\n // Replace this component with the Slack SVG/logo.\n return ;\n}\n\nfunction TeamsLogoPlaceholder(props: IconProps) {\n // Replace this component with the Microsoft Teams SVG/logo.\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction WebexLogoPlaceholder(props: IconProps) {\n // Replace this component with the Webex SVG/logo.\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction AnyAppLogoPlaceholder(props: IconProps) {\n // Replace this component with your generic app SVG/logo.\n return ;\n}\nfunction SlackIcon(props: IconProps) { return ; }\nfunction MailIcon(props: IconProps) { return ; }\nfunction NotionIcon(props: IconProps) {\n return (\n \n \n \n \n );\n}\nfunction NetworkIcon(props: IconProps) { return ; }\nfunction LinkIcon(props: IconProps) { return (); }\nfunction ChevronIcon(props: IconProps) { return ; }\nfunction LockIcon(props: IconProps) { return ; }\n\nexport default function BentoGridFour() {\n return (\n
\n
\n \n \n \n \n \n
\n
\n );\n}\n", "type": "registry:component", "target": "components/bento-grid-4.tsx" } ], "type": "registry:block" }