[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/vhscut/public/apple-icon-vrjcDq2p0WTG2aSPK6PDQAnRN94r7W.png" [V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/vhscut/public/icon-dark-32x32-HbPx8jGF8B1rbqlkmDTojriYOp4cPz.png" [V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/vhscut/public/icon-light-32x32-kSzXIbetxrFePAcdwzgJlsUE7qHKaV.png" [V0_FILE]typescript:file="app/api/proxy-image/route.ts" import { NextRequest, NextResponse } from "next/server" export async function GET(request: NextRequest) { const url = request.nextUrl.searchParams.get("url") if (!url) { return NextResponse.json({ error: "URL is required" }, { status: 400 }) } try { const response = await fetch(url, { headers: { "User-Agent": "Mozilla/5.0 (compatible; ImageProxy/1.0)", }, }) if (!response.ok) { throw new Error(`Failed to fetch image: ${response.status}`) } const contentType = response.headers.get("content-type") || "image/png" const arrayBuffer = await response.arrayBuffer() const base64 = Buffer.from(arrayBuffer).toString("base64") const dataUrl = `data:${contentType};base64,${base64}` return NextResponse.json({ base64: dataUrl }) } catch (error) { console.error("Error proxying image:", error) return NextResponse.json({ error: "Failed to proxy image" }, { status: 500 }) } } [V0_FILE]css:file="app/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Lato', 'Lato Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Hide scrollbar */ .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } [V0_FILE]typescriptreact:file="app/layout.tsx" import React from "react" import type { Metadata } from 'next' import { Analytics } from '@vercel/analytics/next' import './globals.css' import { Geist_Mono, Lato as V0_Font_Lato, Geist_Mono as V0_Font_Geist_Mono } from 'next/font/google' // Initialize fonts const _lato = V0_Font_Lato({ subsets: ['latin'], weight: ["100","300","400","700","900"] }) const _geistMono = V0_Font_Geist_Mono({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900"] }) export const metadata: Metadata = { title: 'Oscar Ballot 2026 | VHS CUT', description: 'Faça suas apostas para o Oscar 2026', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" import { OscarBallot } from "@/components/oscar-ballot" export default function Home() { return } [V0_FILE]typescriptreact:file="components/ballot-preview.tsx" "use client" import { forwardRef, useEffect, useState } from "react" import { oscarCategories, type Nominee } from "@/lib/oscar-data" interface BallotPreviewProps { selections: Record userName: string } // Shortened category names for ballot display const shortCategoryNames: Record = { "Melhor Atriz Coadjuvante": "Atriz Coad.", "Melhor Ator Coadjuvante": "Ator Coad.", "Melhor Roteiro Original": "Roteiro Orig.", "Melhor Roteiro Adaptado": "Roteiro Adap.", "Melhor Trilha Sonora": "Trilha Sonora", "Melhor Design de Produção": "Design Prod.", "Melhor Maquiagem e Penteado": "Maquiagem", "Melhores Efeitos Visuais": "Efeitos Visuais", "Melhor Filme Internacional": "Filme Intern.", "Melhor Curta Live Action": "Curta Live", "Melhor Curta de Animação": "Curta Anim.", "Melhor Curta de Documentário": "Curta Doc.", "Melhor Documentário": "Documentário", "Melhor Canção Original": "Canção Orig.", "Melhor Direção de Elenco": "Dir. Elenco", } // Cache for base64 encoded images const imageCache: Record = {} // Function to convert image URL to base64 async function imageToBase64(url: string): Promise { if (imageCache[url]) { return imageCache[url] } try { const response = await fetch(`/api/proxy-image?url=${encodeURIComponent(url)}`) if (!response.ok) throw new Error("Failed to fetch image") const data = await response.json() imageCache[url] = data.base64 return data.base64 } catch { return url // Fallback to original URL } } export const BallotPreview = forwardRef( ({ selections, userName }, ref) => { const [imageUrls, setImageUrls] = useState>({}) const [logoVhs, setLogoVhs] = useState("https://cdn.imgchest.com/files/ef1d1614aa5c.png") const [logoOscar, setLogoOscar] = useState("https://cdn.imgchest.com/files/287fd86291a1.png") const getNominee = (categoryId: string, nomineeId: string): Nominee | undefined => { const category = oscarCategories.find((c) => c.id === categoryId) return category?.nominees.find((n) => n.id === nomineeId) } const getShortCategoryName = (name: string): string => { return shortCategoryNames[name] || name.replace("Melhor ", "") } // Filter only categories with selection const selectedCategories = oscarCategories.filter( (cat) => selections[cat.id] ) // Pre-load all images as base64 useEffect(() => { const loadImages = async () => { // Load logos const [vhsBase64, oscarBase64] = await Promise.all([ imageToBase64("https://cdn.imgchest.com/files/ef1d1614aa5c.png"), imageToBase64("https://cdn.imgchest.com/files/287fd86291a1.png"), ]) setLogoVhs(vhsBase64) setLogoOscar(oscarBase64) // Load nominee images const imagePromises: Promise<[string, string]>[] = [] for (const category of selectedCategories) { const nominee = getNominee(category.id, selections[category.id]) if (nominee?.image) { imagePromises.push( imageToBase64(nominee.image).then((base64) => [nominee.image as string, base64]) ) } } const results = await Promise.all(imagePromises) const newImageUrls: Record = {} for (const [originalUrl, base64Url] of results) { newImageUrls[originalUrl] = base64Url } setImageUrls(newImageUrls) } loadImages() }, [selections, selectedCategories]) const getImageUrl = (url: string | undefined): string => { if (!url) return "/placeholder.svg" return imageUrls[url] || url } // Dimensions: 1350x1750 -> 675 x 875 at 2x pixelRatio const containerWidth = 675 const containerHeight = 875 // Poster dimensions - smaller posters const columns = 6 const posterWidth = 85 const posterHeight = 125 const rowGap = 14 const colGap = 14 // Calculate grid width for alignment const gridWidth = (posterWidth * columns) + (colGap * (columns - 1)) return (

{/* Header - Logo Oscar | User Name Box | Logo VHS CUT */}

{/* Oscar logo on the left */} Oscars

{/* User Name Box in the center */}

AS APOSTAS DE {userName || "Anonimo"}

{/* VHS CUT logo on the right */} VHS CUT

{/* Categories Grid */}

{/* Render rows */} {Array.from({ length: Math.ceil(selectedCategories.length / columns) }).map((_, rowIndex) => { const rowCategories = selectedCategories.slice(rowIndex * columns, (rowIndex + 1) * columns) return (

{rowCategories.map((category) => { const nominee = getNominee(category.id, selections[category.id]) return (

{/* Category Name */}

{getShortCategoryName(category.name)}

{/* Poster Image */}

{nominee?.image ? ( {nominee.name}

) : (

{nominee?.name}

)}

{/* Nominee Name */}

{nominee?.name}

{/* Film Name */} {nominee?.film && (

{nominee.film}

)}

) })}

{/* Footer - SIGA @VHSCUT NO X on the right */}

SIGA @VHSCUT NO X

) } ) BallotPreview.displayName = "BallotPreview" [V0_FILE]typescriptreact:file="components/category-card.tsx" "use client" import type { Category } from "@/lib/oscar-data" import { cn } from "@/lib/utils" interface CategoryCardProps { category: Category selectedNominee: string | null onSelect: (nomineeId: string) => void } export function CategoryCard({ category, selectedNominee, onSelect }: CategoryCardProps) { return (

{category.name}

{category.nominees.map((nominee) => ( ))}

) } [V0_FILE]typescriptreact:file="components/oscar-ballot.tsx" "use client" import { cn } from "@/lib/utils" import { useState, useRef, useCallback, useEffect } from "react" import { toPng } from "html-to-image" import { oscarCategories } from "@/lib/oscar-data" import { CategoryCard } from "./category-card" import { BallotPreview } from "./ballot-preview" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Download, Eye, RotateCcw } from "lucide-react" export function OscarBallot() { const [selections, setSelections] = useState>({}) const [userName, setUserName] = useState("") const [showPreview, setShowPreview] = useState(false) const [isGenerating, setIsGenerating] = useState(false) const [generatedImage, setGeneratedImage] = useState(null) const [showIntro, setShowIntro] = useState(true) const [introPhase, setIntroPhase] = useState<"logo" | "fadeOut" | "done">("logo") const ballotRef = useRef(null) // Intro animation sequence useEffect(() => { if (!showIntro) return // Phase 1: Show logo for 1.5s const logoTimer = setTimeout(() => { setIntroPhase("fadeOut") }, 1500) // Phase 2: Fade out and hide intro after 0.5s transition const fadeTimer = setTimeout(() => { setIntroPhase("done") setShowIntro(false) }, 2000) return () => { clearTimeout(logoTimer) clearTimeout(fadeTimer) } }, [showIntro]) const handleSelect = (categoryId: string, nomineeId: string) => { setSelections((prev) => { // Se já está selecionado, desmarca if (prev[categoryId] === nomineeId) { const { [categoryId]: _, ...rest } = prev return rest } // Senão, seleciona return { ...prev, [categoryId]: nomineeId, } }) } const totalSelections = Object.keys(selections).length const progress = (totalSelections / oscarCategories.length) * 100 const handleReset = () => { setSelections({}) setUserName("") setShowPreview(false) } const handleDownload = useCallback(async () => { if (!ballotRef.current) return setIsGenerating(true) try { // 1350x1750 -> 675 x 875 at 2x pixelRatio const pixelRatio = 2 const dataUrl = await toPng(ballotRef.current, { quality: 1, pixelRatio, backgroundColor: "#0a0a0a", cacheBust: true, fetchRequestInit: { mode: "cors", cache: "no-cache", }, skipFonts: true, }) setGeneratedImage(dataUrl) } catch (err) { console.error("Erro ao gerar imagem:", err) } finally { setIsGenerating(false) } }, [userName]) // Show intro screen if (showIntro) { return (

) } return (

{/* Header */}

Oscar Ballot 2026

{totalSelections}/{oscarCategories.length}

Seguir

{/* Main Content */}

{/* Title Section */}

Hora de montar suas apostas para o Oscar 2026!

{/* Melhor Filme - Destaque no Topo */} {oscarCategories .filter((cat) => cat.id === "best-picture") .map((category) => (

{category.name}

{category.nominees.map((nominee) => ( ))}

))} {/* Todas as outras categorias - 2 colunas */}

{oscarCategories .filter((cat) => cat.id !== "best-picture") .map((category) => ( handleSelect(category.id, nomineeId)} /> ))}

{/* Generate Section */}

Gerar Ballot

Seu nome setUserName(e.target.value)} className="bg-transparent border-border/50 text-center placeholder:text-muted-foreground/50" />

1350x1750px

{/* Preview Modal */} {showPreview && (

Preview do Ballot

)} {/* Result Modal */} {generatedImage && (

Seu ballot está pronto!

Segure na imagem (Celular) ou clique com botão direito (PC) para salvar.

)} {/* Footer */}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" '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" 'use client' import * as React from 'react' import * as AccordionPrimitive from '@radix-ui/react-accordion' import { ChevronDownIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Accordion({ ...props }: React.ComponentProps) { return } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( svg]:rotate-180', className, )} {...props} > {children} ) } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" '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' function AlertDialog({ ...props }: React.ComponentProps) { return } function AlertDialogTrigger({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogPortal({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogContent({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogAction({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogCancel({ className, ...props }: React.ComponentProps) { return ( ) } export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" 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 px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', { variants: { variant: { default: 'bg-card text-card-foreground', destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90', }, }, defaultVariants: { variant: 'default', }, }, ) function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps) { return (

) } function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" 'use client' import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio' function AspectRatio({ ...props }: React.ComponentProps) { return } export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" 'use client' import * as React from 'react' import * as AvatarPrimitive from '@radix-ui/react-avatar' import { cn } from '@/lib/utils' function Avatar({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarImage({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarFallback({ className, ...props }: React.ComponentProps) { return ( ) } export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" 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 badgeVariants = cva( 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90', secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span' return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { ChevronRight, MoreHorizontal } from 'lucide-react' import { cn } from '@/lib/utils' function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) { return

} function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) { return (

) } function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & { asChild?: boolean }) { const Comp = asChild ? Slot : 'a' return ( ) } function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) { return ( ) } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) { return (
svg]:size-3.5', className)} {...props} > {children ?? }

) { return (

) } function ButtonGroupText({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) { const Comp = asChild ? Slot : 'div' return ( ) } function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }: React.ComponentProps) { return ( ) } export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } [V0_FILE]typescriptreact:file="components/ui/button.tsx" 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 transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" 'use client' import * as React from 'react' import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react' import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker' import { cn } from '@/lib/utils' import { Button, buttonVariants } from '@/components/ui/button' function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps['variant'] }) { const defaultClassNames = getDefaultClassNames() return ( svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className, )} captionLayout={captionLayout} formatters={{ formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }), ...formatters, }} classNames={{ root: cn('w-fit', defaultClassNames.root), months: cn( 'flex gap-4 flex-col md:flex-row relative', defaultClassNames.months, ), month: cn('flex flex-col w-full gap-4', defaultClassNames.month), nav: cn( 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav, ), button_previous: cn( buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous, ), button_next: cn( buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next, ), month_caption: cn( 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption, ), dropdowns: cn( 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns, ), dropdown_root: cn( 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root, ), dropdown: cn( 'absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown, ), caption_label: cn( 'select-none font-medium', captionLayout === 'label' ? 'text-sm' : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label, ), table: 'w-full border-collapse', weekdays: cn('flex', defaultClassNames.weekdays), weekday: cn( 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday, ), week: cn('flex w-full mt-2', defaultClassNames.week), week_number_header: cn( 'select-none w-(--cell-size)', defaultClassNames.week_number_header, ), week_number: cn( 'text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number, ), day: cn( 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', defaultClassNames.day, ), range_start: cn( 'rounded-l-md bg-accent', defaultClassNames.range_start, ), range_middle: cn('rounded-none', defaultClassNames.range_middle), range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end), today: cn( 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today, ), outside: cn( 'text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside, ), disabled: cn( 'text-muted-foreground opacity-50', defaultClassNames.disabled, ), hidden: cn('invisible', defaultClassNames.hidden), ...classNames, }} components={{ Root: ({ className, rootRef, ...props }) => { return (

) }, Chevron: ({ className, orientation, ...props }) => { if (orientation === 'left') { return ( ) } if (orientation === 'right') { return ( ) } return ( ) }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...props }) => { return (

{children}

) }, ...components, }} {...props} /> ) } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames() const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) ref.current?.focus() }, [modifiers.focused]) return ( ) } function CarouselNext({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps) { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) } export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" '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 } function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<'div'> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >['children'] }) { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, '')}` return (

{children}

) } 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 ( [V0_FILE]css:file="styles/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } }