ff:"ExplicitChatIdProvider" 100:I[903690,["$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$7d","$7e","$7f","$80","$81","$7a","$7b","$79","$82"],"$ff"] 101:I[838238,["$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$7d","$7e","$7f","$80","$81","$7a","$7b","$79","$82"],"SWRDataProvider"] 103:[] 104:[["b_TaK8zAwTTTd",null],["b_iE57B7MX7sR",null]] 105:[["b_TaK8zAwTTTd",{"templateVersionId":null,"templateCanonId":null}],["b_iE57B7MX7sR",{"templateVersionId":null,"templateCanonId":null}]] 106:[["b_MxKwxhewImM","$D2025-05-04T08:17:34.655Z"],["b_3NTpsIKxYCf","$D2025-05-04T08:23:53.703Z"],["b_B4emrh9bnZi","$D2025-05-04T08:26:29.146Z"],["b_egXNivhq38E","$D2025-05-04T08:29:13.512Z"],["b_2nyyiUDVDRA","$D2025-05-04T08:32:49.968Z"],["b_HQFpGAxvjji","$D2025-05-04T08:36:07.668Z"],["b_zBtAijyVdzR","$D2025-05-04T08:40:22.818Z"],["b_8BwUZfy2kzD","$D2025-05-04T08:45:24.428Z"],["b_6W4M9YITIYU","$D2025-05-04T08:48:26.248Z"],["b_mp7MyImErnC","$D2025-05-04T08:55:12.416Z"],["b_ZqnLX52KcXj","$D2025-05-04T09:05:19.591Z"],["b_fTgNGsZO63r","$D2025-05-04T09:12:32.760Z"],["b_sx7InHncIzK","$D2025-05-04T09:56:00.654Z"],["b_0Gm2hzXqEa0","$D2025-05-04T09:57:41.058Z"],["b_15OeoqXifEX","$D2025-05-04T10:00:05.047Z"],["b_8Ac8LRk11hb","$D2025-05-05T14:42:44.746Z"],["b_G16y46dQ5vv","$D2025-05-05T14:43:10.007Z"],["b_yv59DVMLRKR","$D2025-05-05T14:48:02.932Z"],["b_glt9xe6URvr","$D2025-05-05T15:01:42.327Z"],["b_wdVftL9muoZ","$D2025-05-05T15:07:18.600Z"],["b_kjFt9wx4Tx8","$D2025-05-05T15:23:41.991Z"],["b_2oij05752xM","$D2025-05-05T15:25:26.551Z"],["b_VhgkmqY2d8e","$D2025-05-06T15:46:40.098Z"],["b_0vqahpDY1fB","$D2025-05-06T15:49:29.526Z"],["b_qcboAAw76Ms","$D2025-05-06T16:16:33.609Z"],["b_WVyNQVFBpQj","$D2025-05-06T16:16:56.630Z"],["b_Zktp7THwLsa","$D2025-05-06T16:19:30.941Z"],["b_gekBR8FJMw2","$D2025-06-20T16:49:52.389Z"],["b_0UKj9b9EgAk","$D2025-06-20T16:56:00.767Z"],["b_CXKjzzpZMqR","$D2025-06-20T17:00:21.470Z"],["b_FSH1OKM6AEJ","$D2025-06-20T17:01:18.506Z"],["b_X29YsuMOYlm","$D2025-06-20T17:02:01.589Z"],["b_GLfUUKZzFGc","$D2025-06-20T17:03:05.712Z"],["b_b1GwNIhe26S","$D2025-06-20T17:05:49.077Z"],["b_u7fhwOe7pGk","$D2025-06-20T17:09:12.017Z"],["b_qIvp59Xy43N","$D2025-06-20T17:10:47.115Z"],["b_5s3zSVg4vwu","$D2025-06-20T17:12:05.224Z"],["b_LOjb10onFtd","$D2025-06-20T19:58:06.793Z"],["b_Y3MYUYgXemt","$D2025-06-20T19:59:05.921Z"],["b_lmAiiLSya9O","$D2025-06-20T19:59:10.436Z"],["b_wMUsxCXQDpW","$D2025-06-20T20:00:09.238Z"],["b_2vvwvsBIZMO","$D2025-06-20T20:07:22.825Z"],["b_PMAdX7pnIGE","$D2025-06-20T20:09:15.801Z"],["b_3kkICfsTe3M","$D2025-06-20T20:11:18.345Z"],["b_1D0y9cirFDa","$D2025-06-20T20:12:58.158Z"],["b_PAt8ioFDSV4","$D2025-06-20T21:10:55.260Z"],["b_xfiWkPtrkdR","$D2025-06-20T21:12:58.434Z"],["b_BGagJSy0Z8a","$D2025-06-20T21:15:11.632Z"],["b_HMrWBjMvOvC","$D2025-06-20T21:16:28.348Z"],["b_4dQb3vnOgb1","$D2025-06-20T21:18:34.110Z"],["b_BADmbsUcoVK","$D2025-06-20T21:20:16.259Z"],["b_PX6b76qkxi0","$D2025-06-20T21:22:58.725Z"],["b_yNfCr4zEhRo","$D2025-06-20T21:28:08.325Z"],["b_0pbv6RmHTf2","$D2025-06-20T21:30:38.147Z"],["b_1Fy0Loon8dU","$D2025-06-20T21:34:07.475Z"],["b_lFd1n9Rsr8x","$D2025-06-20T21:54:43.875Z"],["b_l1mz3Cq8424","$D2025-06-20T22:02:50.380Z"],["b_lnJHsvUNYmY","$D2025-06-20T22:22:02.738Z"],["b_Jk71lNZJHlY","$D2025-06-20T22:23:12.397Z"],["b_UpQQuqg5PSR","$D2025-06-20T22:45:22.219Z"],["b_ur4zeRvP7zn","$D2025-06-20T22:48:23.463Z"],["b_uFEyJdO1C2C","$D2025-06-22T11:35:30.233Z"],["b_yy8KLCRmRHn","$D2025-06-22T11:36:55.604Z"],["b_IOJbvzjMGGA","$D2025-06-22T11:47:31.701Z"],["b_PMN9ysRWeY2","$D2025-06-22T11:48:35.352Z"],["b_nI9EXFWtoEg","$D2025-06-22T11:49:43.877Z"],["b_yzNuyYPBBoF","$D2025-06-23T06:43:05.906Z"],["b_TaK8zAwTTTd","$D2025-06-23T06:47:08.774Z"],["b_iE57B7MX7sR","$D2025-06-23T06:55:09.164Z"]] 107:[["b_TaK8zAwTTTd",false],["b_iE57B7MX7sR",false]] 108:[["b_TaK8zAwTTTd","$undefined"],["b_iE57B7MX7sR","$undefined"]] 109:[["b_TaK8zAwTTTd",null],["b_iE57B7MX7sR",null]] 10a:[["b_TaK8zAwTTTd",true],["b_iE57B7MX7sR",true]] 10b:[["b_TaK8zAwTTTd",true],["b_iE57B7MX7sR",true]] 10c:[] 10d:Tefb086,[V0_FILE]typescriptreact:file="components/nav-bar.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" export function NavBar() { const [isOpen, setIsOpen] = useState(false) const [scrolled, setScrolled] = useState(false) useEffect(() => { const handleScroll = () => { const offset = window.scrollY if (offset > 50) { setScrolled(true) } else { setScrolled(false) } } window.addEventListener("scroll", handleScroll) return () => { window.removeEventListener("scroll", handleScroll) } }, []) return (

E R

ENVIOUS RACING

setIsOpen(false)}>

E R

ENVIOUS RACING

) } [V0_FILE]typescriptreact:file="components/page-transition.tsx" isMerged="true" "use client" import { type ReactNode, useEffect, useState } from "react" import { usePathname } from "next/navigation" interface PageTransitionProps { children: ReactNode } export function PageTransition({ children }: PageTransitionProps) { const pathname = usePathname() const [displayChildren, setDisplayChildren] = useState(children) const [transitionStage, setTransitionStage] = useState("page-transition-enter") useEffect(() => { setTransitionStage("page-transition-enter-active") const timer = setTimeout(() => { setTransitionStage("page-transition-exit") setDisplayChildren(children) const exitTimer = setTimeout(() => { setTransitionStage("page-transition-exit-active") }, 10) return () => clearTimeout(exitTimer) }, 300) return () => clearTimeout(timer) }, [pathname, children]) return

{displayChildren}

} [V0_FILE]typescriptreact:file="components/performance-simulator.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { motion } from "framer-motion" import { Flag, Clock, Gauge } from "lucide-react" interface PerformanceSimulatorProps { gears: number[] finalDrive: number rpm: number tireSize: number car: string } export function PerformanceSimulator({ gears, finalDrive, rpm, tireSize, car }: PerformanceSimulatorProps) { const canvasRef = useRef(null) const [animationProgress, setAnimationProgress] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const [quarterMileTime, setQuarterMileTime] = useState(0) const [quarterMileSpeed, setQuarterMileSpeed] = useState(0) const [halfMileTime, setHalfMileTime] = useState(0) const [halfMileSpeed, setHalfMileSpeed] = useState(0) // Calculate performance metrics useEffect(() => { // Simplified performance calculation based on gearing const quarterTime = 13.5 - (1 / finalDrive) * 2 const quarterSpeed = 100 + (1 / finalDrive) * 50 // Half mile calculation const halfTime = quarterTime * 1.6 const halfSpeed = quarterSpeed * 1.3 setQuarterMileTime(Math.max(9, Math.min(16, quarterTime))) setQuarterMileSpeed(Math.max(80, Math.min(160, quarterSpeed))) setHalfMileTime(Math.max(14, Math.min(25, halfTime))) setHalfMileSpeed(Math.max(100, Math.min(200, halfSpeed))) }, [gears, finalDrive, rpm, tireSize]) // Draw the simulation useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas dimensions with proper scaling for high DPI displays const dpr = window.devicePixelRatio || 1 const rect = canvas.getBoundingClientRect() canvas.width = rect.width * dpr canvas.height = rect.height * dpr ctx.scale(dpr, dpr) // Set display size (css pixels) canvas.style.width = `${rect.width}px` canvas.style.height = `${rect.height}px` // Clear canvas ctx.clearRect(0, 0, rect.width, rect.height) // Set up dimensions const width = rect.width const height = rect.height const padding = { top: 40, right: 30, bottom: 40, left: 60 } const trackWidth = width - padding.left - padding.right const trackHeight = 80 // Draw background - dark gradient const bgGradient = ctx.createLinearGradient(0, 0, 0, height) bgGradient.addColorStop(0, "#111111") bgGradient.addColorStop(1, "#1a1a1a") ctx.fillStyle = bgGradient ctx.fillRect(0, 0, width, height) // Draw track const trackY = height / 2 - trackHeight / 2 ctx.fillStyle = "#222222" ctx.fillRect(padding.left, trackY, trackWidth, trackHeight) // Draw track markings ctx.strokeStyle = "#ffffff" ctx.setLineDash([5, 10]) ctx.beginPath() ctx.moveTo(padding.left, trackY + trackHeight / 2) ctx.lineTo(padding.left + trackWidth, trackY + trackHeight / 2) ctx.stroke() ctx.setLineDash([]) // Draw quarter mile marker const quarterMileX = padding.left + trackWidth * 0.5 ctx.strokeStyle = "#ff4444" ctx.lineWidth = 2 ctx.beginPath() ctx.moveTo(quarterMileX, trackY - 10) ctx.lineTo(quarterMileX, trackY + trackHeight + 10) ctx.stroke() ctx.fillStyle = "#ff4444" ctx.font = "12px Inter, sans-serif" ctx.textAlign = "center" ctx.fillText("1/4 Mile", quarterMileX, trackY - 15) // Draw half mile marker const halfMileX = padding.left + trackWidth * 0.9 ctx.strokeStyle = "#ff8844" ctx.lineWidth = 2 ctx.beginPath() ctx.moveTo(halfMileX, trackY - 10) ctx.lineTo(halfMileX, trackY + trackHeight + 10) ctx.stroke() ctx.fillStyle = "#ff8844" ctx.font = "12px Inter, sans-serif" ctx.textAlign = "center" ctx.fillText("1/2 Mile", halfMileX, trackY - 15) // Draw car position based on animation progress if (animationProgress > 0) { // Calculate car position let carX = padding.left if (animationProgress <= 0.5) { // First half of animation is quarter mile const quarterProgress = animationProgress * 2 // Scale to 0-1 for quarter mile carX = padding.left + quarterProgress * (quarterMileX - padding.left) } else { // Second half is half mile const halfProgress = (animationProgress - 0.5) * 2 // Scale to 0-1 for half mile carX = quarterMileX + halfProgress * (halfMileX - quarterMileX) } // Draw car ctx.fillStyle = "#ff0000" ctx.beginPath() ctx.roundRect(carX - 15, trackY + trackHeight / 2 - 10, 30, 20, 5) ctx.fill() // Add glow effect ctx.shadowColor = "#ff0000" ctx.shadowBlur = 10 ctx.fillStyle = "#ff6600" ctx.beginPath() ctx.roundRect(carX - 20, trackY + trackHeight / 2 - 5, 5, 10, 2) ctx.fill() ctx.shadowBlur = 0 // Draw speed and time ctx.fillStyle = "#ffffff" ctx.font = "14px Inter, sans-serif" ctx.textAlign = "center" let currentTime, currentSpeed if (animationProgress <= 0.5) { // Quarter mile const quarterProgress = animationProgress * 2 currentTime = quarterMileTime * quarterProgress currentSpeed = quarterMileSpeed * (0.5 + quarterProgress * 0.5) // Speed increases non-linearly } else { // Half mile const halfProgress = (animationProgress - 0.5) * 2 currentTime = quarterMileTime + (halfMileTime - quarterMileTime) * halfProgress currentSpeed = quarterMileSpeed + (halfMileSpeed - quarterMileSpeed) * halfProgress } ctx.fillText(`${currentTime.toFixed(2)}s`, carX, trackY + trackHeight + 30) ctx.fillText(`${Math.round(currentSpeed)} mph`, carX, trackY + trackHeight + 50) } // Draw car model name ctx.fillStyle = "#ffffff" ctx.font = "16px Inter, sans-serif" ctx.textAlign = "center" ctx.fillText(car, width / 2, padding.top / 2) }, [ animationProgress, gears, finalDrive, rpm, tireSize, car, quarterMileTime, quarterMileSpeed, halfMileTime, halfMileSpeed, ]) // Animation effect useEffect(() => { if (isAnimating) { let start: number | null = null const totalDuration = 3000 // 3 seconds for full animation const animate = (timestamp: number) => { if (!start) start = timestamp const elapsed = timestamp - start const progress = Math.min(elapsed / totalDuration, 1) setAnimationProgress(progress) if (progress < 1) { requestAnimationFrame(animate) } else { setIsAnimating(false) } } const animationId = requestAnimationFrame(animate) return () => cancelAnimationFrame(animationId) } }, [isAnimating]) const startAnimation = () => { setAnimationProgress(0) setIsAnimating(true) } return (

Quarter Mile

Time

{quarterMileTime.toFixed(2)}s

Speed

{Math.round(quarterMileSpeed)} mph

Half Mile

Time

{halfMileTime.toFixed(2)}s

Speed

{Math.round(halfMileSpeed)} mph

{isAnimating ? "Simulating..." : "Run Simulation"}

) } [V0_FILE]typescriptreact:file="components/ratio-input-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button3D } from "@/components/ui/button-3d" import { FloatingInput } from "@/components/ui/floating-input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { motion } from "framer-motion" interface RatioInputFormProps { onCalculate: (values: { firstGear: number gearCount: 5 | 6 spreadFactor: number finalDrive: number rpm: number }) => void initialValues?: { firstGear: number gearCount: 5 | 6 spreadFactor: number finalDrive: number rpm: number } } export function RatioInputForm({ onCalculate, initialValues = { firstGear: 3.5, gearCount: 5, spreadFactor: 0.8, finalDrive: 4.1, rpm: 7500, }, }: RatioInputFormProps) { const [firstGear, setFirstGear] = useState(initialValues.firstGear.toString()) const [gearCount, setGearCount] = useState<5 | 6>(initialValues.gearCount) const [spreadFactor, setSpreadFactor] = useState(initialValues.spreadFactor.toString()) const [finalDrive, setFinalDrive] = useState(initialValues.finalDrive.toString()) const [rpm, setRpm] = useState(initialValues.rpm.toString()) const [errors, setErrors] = useState>({}) const validateForm = () => { const newErrors: Record = {} if (!firstGear || isNaN(Number(firstGear)) || Number(firstGear) < 2 || Number(firstGear) > 5) { newErrors.firstGear = "First gear must be between 2 and 5" } if (!spreadFactor || isNaN(Number(spreadFactor)) || Number(spreadFactor) < 0.6 || Number(spreadFactor) > 0.95) { newErrors.spreadFactor = "Spread factor must be between 0.6 and 0.95" } if (!finalDrive || isNaN(Number(finalDrive)) || Number(finalDrive) < 2.2 || Number(finalDrive) > 6) { newErrors.finalDrive = "Final drive must be between 2.2 and 6" } if (!rpm || isNaN(Number(rpm)) || Number(rpm) < 5000 || Number(rpm) > 12000) { newErrors.rpm = "RPM must be between 5,000 and 12,000" } setErrors(newErrors) return Object.keys(newErrors).length === 0 } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (validateForm()) { onCalculate({ firstGear: Number(firstGear), gearCount, spreadFactor: Number(spreadFactor), finalDrive: Number(finalDrive), rpm: Number(rpm), }) } } return ( Transmission Settings

setFirstGear(e.target.value)} value={firstGear} /> setSpreadFactor(e.target.value)} value={spreadFactor} /> setFinalDrive(e.target.value)} value={finalDrive} /> setRpm(e.target.value)} value={rpm} />

Number of Gears setGearCount(Number.parseInt(value) as 5 | 6)} className="flex space-x-4" >

5-Speed

6-Speed

Calculate Gear Ratios

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true" "use client" import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" const Accordion = AccordionPrimitive.Root const AccordionItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AccordionItem.displayName = "AccordionItem" const AccordionTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( svg]:rotate-180", className )} {...props} > {children} )) AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName const AccordionContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => (

{children}

)) AccordionContent.displayName = AccordionPrimitive.Content.displayName export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" const AlertDialog = AlertDialogPrimitive.Root const AlertDialogTrigger = AlertDialogPrimitive.Trigger const AlertDialogPortal = AlertDialogPrimitive.Portal const AlertDialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName const AlertDialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogHeader.displayName = "AlertDialogHeader" const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogFooter.displayName = "AlertDialogFooter" const AlertDialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName const AlertDialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName const AlertDialogAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName const AlertDialogCancel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { variant: { default: "bg-background text-foreground", destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", }, }, defaultVariants: { variant: "default", }, } ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = "Alert" const AlertTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/animated-text.tsx" isMerged="true" "use client" import { useEffect } from "react" import { motion, useAnimation } from "framer-motion" import { useInView } from "framer-motion" import { useRef } from "react" import { cn } from "@/lib/utils" interface AnimatedTextProps { text: string className?: string once?: boolean highlightColor?: string highlightWords?: string[] } export function AnimatedText({ text, className, once = true, highlightColor = "text-red-600", highlightWords = [], }: AnimatedTextProps) { const controls = useAnimation() const ref = useRef(null) const isInView = useInView(ref, { once }) useEffect(() => { if (isInView) { controls.start("visible") } else if (!once) { controls.start("hidden") } }, [isInView, controls, once]) const words = text.split(" ") const renderWord = (word: string, index: number) => { const isHighlighted = highlightWords.includes(word) return ( {word}{" "} ) } return ( {words.map(renderWord)} ) } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true" "use client" import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" const AspectRatio = AspectRatioPrimitive.Root export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, } ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (
) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" const Breadcrumb = React.forwardRef< HTMLElement, React.ComponentPropsWithoutRef<"nav"> & { separator?: React.ReactNode } >(({ ...props }, ref) =>
) Breadcrumb.displayName = "Breadcrumb" const BreadcrumbList = React.forwardRef< HTMLOListElement, React.ComponentPropsWithoutRef<"ol"> >(({ className, ...props }, ref) => (
)) BreadcrumbList.displayName = "BreadcrumbList" const BreadcrumbItem = React.forwardRef< HTMLLIElement, React.ComponentPropsWithoutRef<"li"> >(({ className, ...props }, ref) => (
)) BreadcrumbItem.displayName = "BreadcrumbItem" const BreadcrumbLink = React.forwardRef< HTMLAnchorElement, React.ComponentPropsWithoutRef<"a"> & { asChild?: boolean } >(({ asChild, className, ...props }, ref) => { const Comp = asChild ? Slot : "a" return ( ) }) BreadcrumbLink.displayName = "BreadcrumbLink" const BreadcrumbPage = React.forwardRef< HTMLSpanElement, React.ComponentPropsWithoutRef<"span"> >(({ className, ...props }, ref) => ( )) BreadcrumbPage.displayName = "BreadcrumbPage" const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
) BreadcrumbSeparator.displayName = "BreadcrumbSeparator" const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => ( ) BreadcrumbEllipsis.displayName = "BreadcrumbElipssis" export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } [V0_FILE]typescriptreact:file="components/ui/button-3d.tsx" isMerged="true" "use client" import type React from "react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" interface Button3DProps { children: React.ReactNode className?: string onClick?: () => void color?: "red" | "blue" | "green" | "purple" size?: "sm" | "md" | "lg" disabled?: boolean } export function Button3D({ children, className, onClick, color = "red", size = "md", disabled = false, }: Button3DProps) { const colorClasses = { red: "bg-red-600 hover:bg-red-700 shadow-red-700/30", blue: "bg-blue-600 hover:bg-blue-700 shadow-blue-700/30", green: "bg-green-600 hover:bg-green-700 shadow-green-700/30", purple: "bg-purple-600 hover:bg-purple-700 shadow-purple-700/30", } const sizeClasses = { sm: "text-sm px-3 py-1", md: "text-base px-4 py-2", lg: "text-lg px-6 py-3", } return ( {children} ) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true" "use client" import * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" import { cn } from "@/lib/utils" import { buttonVariants } from "@/components/ui/button" export type CalendarProps = React.ComponentProps function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( , IconRight: ({ ...props }) => , }} {...props} /> ) } Calendar.displayName = "Calendar" export { Calendar } [V0_FILE]typescriptreact:file="components/ui/card-hover-effect.tsx" isMerged="true" "use client" import type React from "react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" interface CardHoverEffectProps { items: { title: string description: string icon?: React.ReactNode link?: string }[] className?: string cardClassName?: string } export function CardHoverEffect({ items, className, cardClassName }: CardHoverEffectProps) { return (
{items.map((item, idx) => (
{item.icon &&
{item.icon}
}
{item.title}

{item.description}
{item.link && (
Learn more
)} ))}
) } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) Card.displayName = "Card" const CardHeader = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/carousel.tsx" isMerged="true" "use client" import * as React from "react" import useEmblaCarousel, { type UseEmblaCarouselType, } from "embla-carousel-react" import { ArrowLeft, ArrowRight } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/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(() => { api?.scrollPrev() }, [api]) const scrollNext = React.useCallback(() => { 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, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true" "use client" import * as React from "react" import * as RechartsPrimitive from "recharts" import { cn } from "@/lib/utils" // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error("useChart must be used within a ") } return context } const ChartContainer = React.forwardRef< HTMLDivElement, React.ComponentProps<"div"> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["children"] } >(({ id, className, children, config, ...props }, ref) => { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` return (
{children}
) }) ChartContainer.displayName = "Chart" const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([_, config]) => config.theme || config.color ) if (!colorConfig.length) { return null } return (