50: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/2ntfcxrkfxczh.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"] 51: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/2ntfcxrkfxczh.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"] 52:T137d,'use client' import { useEffect, useState } from 'react' import { useReducedMotion } from 'motion/react' import { ArrowRight, X } from 'lucide-react' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { AvatarGroup } from '@/components/motion/avatar-group' import { announcement, announcementAvatars } from "@/components/data/banner-1-data" /** * 'bar' — full-width strip above the header (the default). * 'pill' — floating rounded card pinned to the bottom of the viewport, with an avatar stack. * Both shapes share the same data file. */ const shape: 'bar' | 'pill' = 'bar' type Visibility = 'visible' | 'closing' | 'closed' export function Banner1() { /** * Dismissal lives in component state only, so a reload brings the banner back. To keep a * visitor's dismissal between visits, persist it (localStorage, a cookie, or the account) * and read that back here before the first paint. */ const [visibility, setVisibility] = useState('visible') const reduceMotion = useReducedMotion() useEffect(() => { if (visibility !== 'closing') { return } const timer = window.setTimeout(() => setVisibility('closed'), 200) return () => window.clearTimeout(timer) }, [visibility]) const dismiss = () => { setVisibility(reduceMotion ? 'closed' : 'closing') } if (visibility === 'closed') { return null } const closing = visibility === 'closing' if (shape === 'pill') { return (

{announcement.message}

{announcement.linkLabel}

) } return (

{/* Neutral alternative: swap for `bg-muted text-foreground border-b border-border`. */}

{announcement.badge ? ( {announcement.badge} ) : null}

{announcement.message}

{announcement.linkLabel} {announcement.linkLabel}

) } export default Banner1 4f:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["@shadcnstore/motion-avatar-group","avatar","badge","button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"storage/app/registry-sources/marketing/banners/banner-1/page.tsx","content":"import { Banner1 } from \"@/components/blocks/marketing/banners/banner-1/components/banner-1\"\n\nexport default function Page() {\n return (\n

\n \n

\n )\n}\n","type":"registry:page","target":"app/banner-1/page.tsx"},{"path":"storage/app/registry-sources/marketing/banners/banner-1/banner-1.tsx","content":"$52","type":"registry:component","target":"@components/banner-1.tsx"},{"path":"storage/app/registry-sources/marketing/banners/banner-1/banner-1-data.ts","content":"export interface Announcement {\n /**\n * Dismissal is persisted under this id.\n * Change it and everyone who dismissed the previous announcement sees the new one.\n */\n id: string\n badge?: string\n message: string\n href: string\n linkLabel: string\n}\n\nexport const announcement: Announcement = {\n id: 'workflows-2-launch',\n badge: 'New',\n // Keep this to one line: the bar must never wrap on any breakpoint.\n message: 'Workflows 2.0 is live — branching, retries and scheduled runs.',\n href: '#announcement',\n linkLabel: 'Read the post',\n}\n\n/** Used by the pill shape only; decorative, so every alt is empty. */\nexport const announcementAvatars = [\n 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/sarah-johnson.400w.01a6ba.avif',\n 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/michael-rodriguez.400w.d8234b.avif',\n 'https://assets.shadcnstore.com/shadcnstore.com/stock/marketing/emily-chen.400w.8fb3cf.avif',\n]\n","type":"registry:lib","target":"@components/data/banner-1-data.ts"}],"className":"h-[70svh] min-h-80"}]]}]