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:T2658,"use client"; // karaui.kamisama-v0.my.id/components/blocks/testimonial-wall import { Star } from "lucide-react"; import { useReducedMotion } from "motion/react"; import type { CSSProperties, ReactNode } from "react"; import { Marquee } from "@/components/motion/marquee"; import { cn } from "@/lib/utils"; export interface Testimonial { id: string; quote: ReactNode; name: string; role?: ReactNode; /** Image URL. Falls back to initials derived from `name`. */ avatar?: string; /** Override the derived initials. */ initials?: string; /** 0–5 stars. Omit to hide the rating row. */ rating?: number; } export interface TestimonialWallProps { testimonials: Testimonial[]; /** "marquee" scrolls columns in alternating directions; "grid" is static. */ variant?: "marquee" | "grid"; /** Maximum number of columns at the widest container size (1–4). Default 3. */ columns?: 1 | 2 | 3 | 4; /** Seconds for one loop of the first column. Others vary slightly. Default 40. */ speed?: number; /** Height of the marquee viewport. Default 32rem. Ignored by `grid`. */ height?: number | string; /** Pause a column while it is hovered or holds focus. Default true. */ pauseOnHover?: boolean; eyebrow?: ReactNode; heading?: ReactNode; description?: ReactNode; className?: string; } // Show/hide classes for the 1/2/3/4-lane layouts. Lane counts step up with // the block's own container width (not the viewport): 2 at @md, 3 at @3xl, // 4 at @5xl. Spelled out in full so Tailwind can see every class. const SHOW_AT = ["flex", "hidden @md:flex", "hidden @3xl:flex", "hidden @5xl:flex"]; const HIDE_AT = ["", "@md:hidden", "@3xl:hidden", "@5xl:hidden"]; const GRID_COLUMNS = [ "columns-1", "columns-1 @md:columns-2", "columns-1 @md:columns-2 @3xl:columns-3", "columns-1 @md:columns-2 @3xl:columns-3 @5xl:columns-4", ]; const FADE_MASK = "[mask-image:linear-gradient(to_bottom,transparent,black_14%,black_86%,transparent)]"; function initialsOf(name: string) { return name .split(/\s+/) .filter(Boolean) .slice(0, 2) .map((part) => part[0]?.toUpperCase() ?? "") .join(""); } /** Deterministic palette slot so a person keeps the same avatar tint. */ function tintOf(name: string) { let hash = 0; for (const char of name) hash = (hash * 31 + char.charCodeAt(0)) >>> 0; return (hash % 5) + 1; } function distribute(items: T[], lanes: number): T[][] { const out: T[][] = Array.from({ length: lanes }, () => []); items.forEach((item, index) => { out[index % lanes]?.push(item); }); return out; } /** Repeat a short lane until it has at least `min` cards. */ function fillLane(lane: T[], min = 4) { const out: { item: T; copy: number }[] = lane.map((item) => ({ item, copy: 0 })); if (lane.length === 0) return out; let copy = 1; while (out.length < min) { for (const item of lane) { if (out.length >= min) break; out.push({ item, copy }); } copy += 1; } return out; } export function TestimonialCard({ testimonial, className, }: { testimonial: Testimonial; className?: string; }) { const { quote, name, role, avatar, rating } = testimonial; const tint = tintOf(name); const stars = rating === undefined ? null : Math.max(0, Math.min(5, Math.round(rating))); return (

{stars !== null ? (

{`Rated ${stars} out of 5`} {[0, 1, 2, 3, 4].map((i) => ( ))}

) : null}

{quote}

{avatar ? ( // biome-ignore lint/performance/noImgElement: library component; consumers may not use next/image.

) : ( {testimonial.initials ?? initialsOf(name)} )}

{name}

{role ? (

{role}

) : null}

); } /** * Testimonial wall: masonry-like columns of quote cards. The marquee variant * scrolls each column vertically in alternating directions behind top and * bottom fade masks, pausing a column on hover or focus; reduced motion and * `variant="grid"` render the same cards as a static masonry. Column count * follows the block's own container width. */ export function TestimonialWall({ testimonials, variant = "marquee", columns = 3, speed = 40, height = "32rem", pauseOnHover = true, eyebrow, heading, description, className, }: TestimonialWallProps) { const reduce = useReducedMotion(); const maxLanes = Math.max(1, Math.min(4, columns)); const animated = variant === "marquee" && !reduce; const header = eyebrow || heading || description ? (

{eyebrow ? (

{eyebrow}

) : null} {heading ? (

{heading}

) : null} {description ? (

{description}

) : null}

) : null; const grid = (

{testimonials.map((t) => ( ))}

); return (

{header} {variant === "grid" ? ( grid ) : !animated ? ( // Reduced motion: same viewport, static masonry that scrolls by hand.

{grid}

) : (

{Array.from({ length: maxLanes }, (_, i) => i + 1).map((laneCount) => (

{distribute(testimonials, laneCount).map((lane, laneIndex) => ( div]:w-full [&>div]:items-stretch", pauseOnHover && "[&:focus-within>div]:[animation-play-state:paused]", )} > {fillLane(lane).map(({ item, copy }) => copy ? ( // Padding copies only exist so a short lane still // covers the viewport; hide them from assistive tech.

) : ( ), )} ))}

))}

)}

); } 52:T809,import { Children, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface MarqueeProps { children: ReactNode; direction?: "left" | "right" | "up" | "down"; speed?: number; pauseOnHover?: boolean; gap?: string; className?: string; fade?: boolean; } export function Marquee({ children, direction = "left", speed = 30, pauseOnHover = true, gap = "1rem", className, fade = true, }: MarqueeProps) { const vertical = direction === "up" || direction === "down"; const reverse = direction === "right" || direction === "down"; const items = Children.toArray(children); return (

{[0, 1].map((dup) => (

{items.map((child, i) => ( // biome-ignore lint/suspicious/noArrayIndexKey: Marquee duplicates static child slots; item order is not mutated.

{child}

))}

); } 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4f",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/motion/testimonial-wall.tsx","content":"$51","type":"registry:component","target":"@components/motion/testimonial-wall.tsx"},{"path":"components/motion/marquee.tsx","content":"$52","type":"registry:component","target":"@components/motion/marquee.tsx"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]