4e: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"] 4f: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"] 50:Tff7,'use client' import { ChevronLeft, ChevronRight } from 'lucide-react' import * as React from 'react' import { Button } from '@/components/ui/button' import { Carousel, type CarouselApi, CarouselContent, CarouselItem, } from '@/components/ui/carousel' import { cn } from '@/lib/utils' export type CarouselCardItem = { title?: string description?: string media: { src: string alt?: string } } export type Carousel03Props = { title?: string description?: string items: CarouselCardItem[] className?: string } export function Carousel03({ title, description, items, className, }: Carousel03Props) { const [api, setApi] = React.useState() const [canPrev, setCanPrev] = React.useState(false) const [canNext, setCanNext] = React.useState(false) React.useEffect(() => { if (!api) return const onSelect = () => { setCanPrev(api.canScrollPrev()) setCanNext(api.canScrollNext()) } api.on('select', onSelect) api.on('reInit', onSelect) setTimeout(() => { onSelect() }, 0) return () => { api.off('select', onSelect) api.off('reInit', onSelect) } }, [api]) const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]) const scrollNext = React.useCallback(() => api?.scrollNext(), [api]) if (!items || items.length === 0) return null const containerWidthClassName = cn('w-full max-w-6xl mx-auto px-4', className) return (

{title}

{description}

{items.map((item, i) => (

{item.title && (

{item.title}

)} {item.description && (

{item.description}

)}

))}

) } 51:T95a,import { Carousel03, Carousel03Props } from './carousel-03' export const values = { title: 'New blocks for modern UI building.', description: 'Fresh, reusable pieces for fast product work.', items: [ { title: 'Beautiful blocks', description: 'Polished components that feel ready.', media: { src: 'https://images.unsplash.com/photo-1545277048-000c86055339?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', alt: 'alt image', }, }, { title: 'Ship faster', description: 'Move from idea to screen quickly.', media: { src: 'https://images.unsplash.com/photo-1574557398955-09174289ea44?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', alt: 'alt image', }, }, { title: 'Build clean', description: 'Simple structure with room to breathe.', media: { src: 'https://images.unsplash.com/photo-1595330495302-e257debfa664?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', alt: 'alt image', }, }, { title: 'Launch ready', description: 'Fast to use and easy to ship.', media: { src: 'https://images.unsplash.com/photo-1543617934-70e4a9efad1c?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', alt: 'alt image', }, }, { title: 'Made to scale', description: 'Reusable blocks for growing products.', media: { src: 'https://images.unsplash.com/photo-1574557399375-c721d2371825?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', alt: 'alt image', }, }, { title: 'Ready to use', description: 'Drop in and keep moving.', media: { src: 'https://images.unsplash.com/photo-1574557399909-c6df4fde191a?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', alt: 'alt image', }, }, ], } satisfies Carousel03Props export function Carousel03Example() { return ( ) } 4d:["$","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":[null,["$","$L4e",null,{"namespace":"@flx","registryDependencies":["carousel","button"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/carousel/carousel-03/carousel-03.tsx","content":"$50","type":"registry:component","target":"components/flx/blocks/carousel/carousel-03/carousel-03.tsx"},{"path":"registry/blocks/carousel/carousel-03/carousel-03-example.tsx","content":"$51","type":"registry:component","target":"components/flx/blocks/carousel/carousel-03/carousel-03-example.tsx"}],"className":"h-[70svh] min-h-80"}]]}]