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:Tea1,"use client"; import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; import { Badge } from "@/components/ui/8bit/badge"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/8bit/card"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/ui/8bit/carousel"; import "@/components/ui/8bit/styles/retro.css"; export interface CarouselFeature { badge?: string; description: string; icon: ReactNode; title: string; } interface Feature3Props { className?: string; description?: string; items?: CarouselFeature[]; title?: string; } const defaultItems: CarouselFeature[] = [ { icon: "01", title: "Choose Your Class", description: "Warrior, Mage, or Rogue. Each with unique skill trees, gear sets, and playstyles.", }, { icon: "02", title: "Enter the Dungeon", description: "Procedurally placed loot with hand-designed encounters. Every run feels fresh.", badge: "FAN FAVORITE", }, { icon: "03", title: "Defeat Bosses", description: "12 legendary bosses, each with unique attack patterns. Learn, adapt, conquer.", }, { icon: "04", title: "Upgrade Your Gear", description: "Combine drops at the forge to create legendary items. The grind is the game.", }, { icon: "05", title: "Climb the Ranks", description: "Global leaderboards updated in real-time. Prove you are the best.", badge: "COMPETITIVE", }, ]; export default function Feature3({ title = "The Adventure Awaits", description = "Swipe through to discover what makes this game legendary", items = defaultItems, className, }: Feature3Props) { return (

{(title || description) && (

{title && (

{title}

)} {description && ( {description} )}

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

{item.badge && (

{item.badge}

)}

{item.icon}

{item.title} {item.description}

))}

); } 53:T88b,import { type VariantProps, cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Badge as ShadcnBadge } from "@/components/ui/badge"; export const badgeVariants = cva("", { variants: { font: { normal: "", retro: "retro", }, variant: { default: "border-primary bg-primary", destructive: "border-destructive bg-destructive", outline: "border-background bg-background", secondary: "border-secondary bg-secondary", }, }, defaultVariants: { variant: "default", }, }); export interface BitButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; } function Badge({ children, className = "", font, variant, ...props }: BitButtonProps) { const color = badgeVariants({ variant, font }); const classes = className.split(" "); // visual classes for badge and sidebars const visualClasses = classes.filter( (c) => c.startsWith("bg-") || c.startsWith("border-") || c.startsWith("text-") || c.startsWith("rounded-") ); // Container should accept all non-visual utility classes (e.g., size, spacing, layout) const containerClasses = classes.filter( (c) => !( c.startsWith("bg-") || c.startsWith("border-") || c.startsWith("text-") || c.startsWith("rounded-") ) ); return (

{children} {/* Left pixel bar */}

{/* Right pixel bar */}

); } export { Badge }; 54:Tb05,import { type VariantProps, cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Card as ShadcnCard, CardAction as ShadcnCardAction, CardContent as ShadcnCardContent, CardDescription as ShadcnCardDescription, CardFooter as ShadcnCardFooter, CardHeader as ShadcnCardHeader, CardTitle as ShadcnCardTitle, } from "@/components/ui/card"; import "@/components/ui/8bit/styles/retro.css"; export const cardVariants = cva("", { variants: { font: { normal: "", retro: "retro", }, }, defaultVariants: { font: "retro", }, }); export interface BitCardProps extends React.ComponentProps<"div">, VariantProps { asChild?: boolean; } function Card({ className, font, ...props }: BitCardProps) { return (

); } function CardHeader({ ...props }: BitCardProps) { const { className, font } = props; return ( ); } function CardTitle({ ...props }: BitCardProps) { const { className, font } = props; return ( ); } function CardDescription({ ...props }: BitCardProps) { const { className, font } = props; return ( ); } function CardAction({ ...props }: BitCardProps) { const { className, font } = props; return ( ); } function CardContent({ ...props }: BitCardProps) { const { className, font } = props; return ( ); } function CardFooter({ ...props }: BitCardProps) { const { className, font } = props; return ( ); } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, }; 55:T2318,"use client"; import * as React from "react"; import useEmblaCarousel, { type UseEmblaCarouselType, } from "embla-carousel-react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/8bit/button"; type CarouselApi = UseEmblaCarouselType[1]; type UseCarouselParameters = Parameters; type CarouselOptions = UseCarouselParameters[0]; type CarouselPlugin = UseCarouselParameters[1]; type CarouselProps = { opts?: CarouselOptions; plugins?: CarouselPlugin; orientation?: "horizontal" | "vertical"; setApi?: (api: CarouselApi) => void; }; type CarouselContextProps = { carouselRef: ReturnType[0]; api: ReturnType[1]; scrollPrev: () => void; scrollNext: () => void; canScrollPrev: boolean; canScrollNext: boolean; } & CarouselProps; const CarouselContext = React.createContext(null); function useCarousel() { const context = React.useContext(CarouselContext); if (!context) { throw new Error("useCarousel must be used within a "); } return context; } const Carousel = React.forwardRef< HTMLDivElement, React.HTMLAttributes & CarouselProps >( ( { orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref ) => { const [carouselRef, api] = useEmblaCarousel( { ...opts, axis: orientation === "horizontal" ? "x" : "y", }, plugins ); const [canScrollPrev, setCanScrollPrev] = React.useState(false); const [canScrollNext, setCanScrollNext] = React.useState(false); const onSelect = React.useCallback((api: CarouselApi) => { if (!api) { return; } setCanScrollPrev(api.canScrollPrev()); setCanScrollNext(api.canScrollNext()); }, []); const scrollPrev = React.useCallback(() => { console.log("scrolled prev"); api?.scrollPrev(); }, [api]); const scrollNext = React.useCallback(() => { console.log("scrolled next"); api?.scrollNext(); }, [api]); const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (event.key === "ArrowLeft") { event.preventDefault(); scrollPrev(); } else if (event.key === "ArrowRight") { event.preventDefault(); scrollNext(); } }, [scrollPrev, scrollNext] ); React.useEffect(() => { if (!api || !setApi) { return; } setApi(api); }, [api, setApi]); React.useEffect(() => { if (!api) { return; } onSelect(api); api.on("reInit", onSelect); api.on("select", onSelect); return () => { api?.off("select", onSelect); }; }, [api, onSelect]); return (

{children}

); } ); Carousel.displayName = "Carousel"; const CarouselContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { carouselRef, orientation } = useCarousel(); return (

); }); CarouselContent.displayName = "CarouselContent"; const CarouselItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { orientation } = useCarousel(); return (

); }); CarouselItem.displayName = "CarouselItem"; const CarouselPrevious = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollPrev, canScrollPrev } = useCarousel(); return ( ); }); CarouselPrevious.displayName = "CarouselPrevious"; const CarouselNext = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollNext, canScrollNext } = useCarousel(); return ( ); }); CarouselNext.displayName = "CarouselNext"; export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, }; 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":[null,["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["badge","card","carousel"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/8bit/blocks/feature3.tsx","content":"$52","type":"registry:block","target":"components/ui/8bit/blocks/feature3.tsx"},{"path":"components/ui/8bit/styles/retro.css","content":"@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n font-family:\n \"Press Start 2P\",\n system-ui,\n -apple-system,\n sans-serif;\n line-height: 1.5;\n letter-spacing: 0.5px;\n}\n\n.pixelated {\n image-rendering: pixelated;\n image-rendering: crisp-edges;\n}","type":"registry:file","target":"components/ui/8bit/styles/retro.css"},{"path":"components/ui/8bit/badge.tsx","content":"$53","type":"registry:component"},{"path":"components/ui/8bit/card.tsx","content":"$54","type":"registry:component"},{"path":"components/ui/8bit/carousel.tsx","content":"$55","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]