[V0_FILE]markdown:file="README.md" # Slides to tabs *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/elevservicesllc-6710s-projects/v0-slides-to-tabs) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/eoEHGwwlZ0F) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/elevservicesllc-6710s-projects/v0-slides-to-tabs](https://vercel.com/elevservicesllc-6710s-projects/v0-slides-to-tabs)** ## Build your app Continue building your app on: **[https://v0.app/chat/eoEHGwwlZ0F](https://v0.app/chat/eoEHGwwlZ0F)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.09 0 0); --foreground: oklch(0.95 0.01 106); --card: oklch(0.14 0.01 264); --card-foreground: oklch(0.95 0.01 106); --popover: oklch(0.12 0.01 264); --popover-foreground: oklch(0.95 0.01 106); --primary: oklch(0.76 0.18 106); --primary-foreground: oklch(0.09 0 0); --secondary: oklch(0.22 0.02 264); --secondary-foreground: oklch(0.95 0.01 106); --muted: oklch(0.19 0.01 264); --muted-foreground: oklch(0.62 0.02 264); --accent: oklch(0.76 0.18 106); --accent-foreground: oklch(0.09 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.22 0.02 264); --input: oklch(0.22 0.02 264); --ring: oklch(0.76 0.18 106); --chart-1: oklch(0.76 0.18 106); --chart-2: oklch(0.65 0.15 280); --chart-3: oklch(0.55 0.12 310); --chart-4: oklch(0.45 0.08 340); --chart-5: oklch(0.7 0.16 90); --radius: 0.5rem; --sidebar: oklch(0.12 0.01 264); --sidebar-foreground: oklch(0.95 0.01 106); --sidebar-primary: oklch(0.76 0.18 106); --sidebar-primary-foreground: oklch(0.09 0 0); --sidebar-accent: oklch(0.22 0.02 264); --sidebar-accent-foreground: oklch(0.95 0.01 106); --sidebar-border: oklch(0.22 0.02 264); --sidebar-ring: oklch(0.76 0.18 106); } .dark { --background: oklch(0.09 0 0); --foreground: oklch(0.95 0.01 106); --card: oklch(0.14 0.01 264); --card-foreground: oklch(0.95 0.01 106); --popover: oklch(0.12 0.01 264); --popover-foreground: oklch(0.95 0.01 106); --primary: oklch(0.76 0.18 106); --primary-foreground: oklch(0.09 0 0); --secondary: oklch(0.22 0.02 264); --secondary-foreground: oklch(0.95 0.01 106); --muted: oklch(0.19 0.01 264); --muted-foreground: oklch(0.62 0.02 264); --accent: oklch(0.76 0.18 106); --accent-foreground: oklch(0.09 0 0); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.22 0.02 264); --input: oklch(0.22 0.02 264); --ring: oklch(0.76 0.18 106); --chart-1: oklch(0.76 0.18 106); --chart-2: oklch(0.65 0.15 280); --chart-3: oklch(0.55 0.12 310); --chart-4: oklch(0.45 0.08 340); --chart-5: oklch(0.7 0.16 90); --sidebar: oklch(0.12 0.01 264); --sidebar-foreground: oklch(0.95 0.01 106); --sidebar-primary: oklch(0.76 0.18 106); --sidebar-primary-foreground: oklch(0.09 0 0); --sidebar-accent: oklch(0.22 0.02 264); --sidebar-accent-foreground: oklch(0.95 0.01 106); --sidebar-border: oklch(0.22 0.02 264); --sidebar-ring: oklch(0.76 0.18 106); } @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; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next/core" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "♔ Unholy Unroman Unempire ♔", description: "A presentation exploring historical paradoxes", 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" "use client" import { useState, useEffect } from "react" import { Card } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Crown, Swords, Users, Map, Shield, Flame, Calendar } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import Image from "next/image" type Territory = { id: number name: string owner: string | null color: string x: number y: number } type Kingdom = { name: string color: string territories: number[] allies: string[] } type GameLog = { message: string timestamp: number type: "claim" | "attack" | "alliance" | "defense" } const START_YEAR = 1524 const WEEK_IN_MS = 7 * 24 * 60 * 60 * 1000 export default function GamePage() { const [activeTab, setActiveTab] = useState("map") const [playerKingdom, setPlayerKingdom] = useState("") const [hasJoined, setHasJoined] = useState(false) const [currentYear, setCurrentYear] = useState(START_YEAR) const [gameStartTime] = useState(Date.now()) useEffect(() => { const updateYear = () => { const weeksElapsed = Math.floor((Date.now() - gameStartTime) / WEEK_IN_MS) setCurrentYear(START_YEAR + weeksElapsed) } updateYear() const interval = setInterval(updateYear, 60000) // Check every minute return () => clearInterval(interval) }, [gameStartTime]) const [territories, setTerritories] = useState([ { id: 1, name: "England", owner: null, color: "bg-slate-700", x: 15, y: 25 }, { id: 2, name: "Scotland", owner: null, color: "bg-slate-700", x: 18, y: 18 }, { id: 3, name: "France", owner: null, color: "bg-slate-700", x: 25, y: 35 }, { id: 4, name: "Spain", owner: null, color: "bg-slate-700", x: 15, y: 50 }, { id: 5, name: "Portugal", owner: null, color: "bg-slate-700", x: 8, y: 50 }, { id: 6, name: "Holy Roman Empire", owner: null, color: "bg-slate-700", x: 45, y: 35 }, { id: 7, name: "Ottoman Empire", owner: null, color: "bg-slate-700", x: 70, y: 50 }, { id: 8, name: "Poland-Lithuania", owner: null, color: "bg-slate-700", x: 60, y: 25 }, { id: 9, name: "Duchy of Milan", owner: null, color: "bg-slate-700", x: 38, y: 42 }, { id: 10, name: "Republic of Venice", owner: null, color: "bg-slate-700", x: 42, y: 43 }, { id: 11, name: "Papal States", owner: null, color: "bg-slate-700", x: 40, y: 47 }, { id: 12, name: "Kingdom of Naples", owner: null, color: "bg-slate-700", x: 48, y: 52 }, { id: 13, name: "Denmark-Norway", owner: null, color: "bg-slate-700", x: 40, y: 15 }, { id: 14, name: "Sweden", owner: null, color: "bg-slate-700", x: 50, y: 12 }, { id: 15, name: "Muscovy", owner: null, color: "bg-slate-700", x: 75, y: 20 }, { id: 16, name: "Kingdom of Hungary", owner: null, color: "bg-slate-700", x: 55, y: 42 }, { id: 17, name: "Kingdom of Bohemia", owner: null, color: "bg-slate-700", x: 48, y: 32 }, { id: 18, name: "Swiss Confederation", owner: null, color: "bg-slate-700", x: 35, y: 40 }, ]) const [kingdoms, setKingdoms] = useState>({}) const [gameLogs, setGameLogs] = useState([ { message: "The year is 1524. Europe lies unclaimed, waiting for ambitious rulers to seize power.", timestamp: Date.now() - 2000, type: "claim", }, ]) const [attackTarget, setAttackTarget] = useState(null) const kingdomColors = [ "bg-red-600", "bg-blue-600", "bg-green-600", "bg-purple-600", "bg-yellow-600", "bg-pink-600", "bg-cyan-600", "bg-orange-600", ] const addLog = (message: string, type: GameLog["type"]) => { setGameLogs((prev) => [{ message, timestamp: Date.now(), type }, ...prev].slice(0, 20)) } const joinGame = () => { if (!playerKingdom.trim()) return const color = kingdomColors[Object.keys(kingdoms).length % kingdomColors.length] setKingdoms((prev) => ({ ...prev, [playerKingdom]: { name: playerKingdom, color, territories: [], allies: [], }, })) setHasJoined(true) addLog(`${playerKingdom} has emerged as a new power in Europe!`, "claim") } const claimTerritory = (territoryId: number) => { const territory = territories.find((t) => t.id === territoryId) if (!territory || !hasJoined) return const playerKingdomData = kingdoms[playerKingdom] if (!playerKingdomData) return if (territory.owner) { addLog(`${territory.name} is already ruled by ${territory.owner}!`, "defense") return } const newColor = playerKingdomData.color setTerritories((prev) => prev.map((t) => (t.id === territoryId ? { ...t, owner: playerKingdom, color: newColor } : t)), ) setKingdoms((prev) => ({ ...prev, [playerKingdom]: { ...playerKingdomData, territories: [...playerKingdomData.territories, territoryId], }, })) addLog(`${playerKingdom} claimed ${territory.name}!`, "claim") } const attackTerritory = (territoryId: number) => { const territory = territories.find((t) => t.id === territoryId) if (!territory || !hasJoined || !territory.owner) return const playerKingdomData = kingdoms[playerKingdom] const defenderKingdomData = kingdoms[territory.owner] if (!playerKingdomData || !defenderKingdomData || territory.owner === playerKingdom) return if (playerKingdomData.allies.includes(territory.owner)) { addLog(`Cannot attack your ally ${territory.owner}!`, "defense") return } const attackPower = playerKingdomData.territories.length + Math.random() * 20 const defensePower = defenderKingdomData.territories.length * 1.2 + Math.random() * 20 if (attackPower > defensePower) { // Victory setTerritories((prev) => prev.map((t) => (t.id === territoryId ? { ...t, owner: playerKingdom, color: playerKingdomData.color } : t)), ) setKingdoms((prev) => ({ ...prev, [playerKingdom]: { ...playerKingdomData, territories: [...playerKingdomData.territories, territoryId], }, [territory.owner]: { ...defenderKingdomData, territories: defenderKingdomData.territories.filter((t) => t !== territoryId), }, })) addLog(`${playerKingdom} conquered ${territory.name} from ${territory.owner}!`, "attack") } else { // Defeat addLog(`${playerKingdom}'s attack on ${territory.name} was repelled by ${territory.owner}!`, "defense") } setAttackTarget(null) } const proposeAlliance = (kingdomName: string) => { if (!hasJoined || kingdomName === playerKingdom) return const playerKingdomData = kingdoms[playerKingdom] if (!playerKingdomData) return if (playerKingdomData.allies.includes(kingdomName)) { addLog(`Already allied with ${kingdomName}!`, "alliance") return } setKingdoms((prev) => ({ ...prev, [playerKingdom]: { ...playerKingdomData, allies: [...playerKingdomData.allies, kingdomName], }, [kingdomName]: { ...prev[kingdomName], allies: [...prev[kingdomName].allies, playerKingdom], }, })) addLog(`${playerKingdom} and ${kingdomName} have formed an alliance!`, "alliance") } const playerKingdomData = kingdoms[playerKingdom] return (

{currentYear >= 1608 && ( 🌍 Africa and Asia available at 1608 )}

Unholy Unroman Unempire

Season {currentYear}

{hasJoined && playerKingdomData && (

{playerKingdom} Territories: {playerKingdomData.territories.length}

)}

{!hasJoined ? (

Welcome, Ruler!

The year is {currentYear}. Europe lies unclaimed. Enter the realm and establish your kingdom. Claim territories, forge alliances, and conquer your enemies!

Kingdom Name setPlayerKingdom(e.target.value)} onKeyDown={(e) => e.key === "Enter" && joinGame()} className="text-center" />

) : ( Territory Map Kingdoms Alliances Battle History

Map of Europe - Season {currentYear}

Click territories below to claim them

{territories.map((territory) => ( !territory.owner && claimTerritory(territory.id)} >

{territory.name}

{territory.owner ? (

Ruled by {territory.owner} {territory.owner !== playerKingdom && ( )}

) : ( Unclaimed - Click to Claim )}

))}

All Kingdoms

{Object.values(kingdoms).map((kingdom) => (

{kingdom.name}

Territories: {kingdom.territories.length}

Allies: {kingdom.allies.length}

{kingdom.name !== playerKingdom && ( )}

))}

Your Alliances

{playerKingdomData && playerKingdomData.allies.length > 0 ? (

{playerKingdomData.allies.map((allyName) => { const ally = kingdoms[allyName] if (!ally) return null return (

{ally.name}

Allied Kingdom

) })}

) : (

No alliances yet. Visit the Kingdoms tab to form alliances.

)}

Battle History

{gameLogs.map((log, index) => (

{log.type === "attack" && } {log.type === "claim" && } {log.type === "alliance" && } {log.type === "defense" && }

{log.message}

{new Date(log.timestamp).toLocaleTimeString()}

))}

)}

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [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/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/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/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/card.tsx" import * as React from 'react' import { cn } from '@/lib/utils' function Card({ className, ...props }: React.ComponentProps<'div'>) { return (

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

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

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

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

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

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

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" 'use client' import * as React from 'react' import * as DialogPrimitive from '@radix-ui/react-dialog' import { XIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Dialog({ ...props }: React.ComponentProps) { return } function DialogTrigger({ ...props }: React.ComponentProps) { return } function DialogPortal({ ...props }: React.ComponentProps) { return } function DialogClose({ ...props }: React.ComponentProps) { return } function DialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function DialogContent({ className, children, showCloseButton = true, ...props }: React.ComponentProps & { showCloseButton?: boolean }) { return ( {children} {showCloseButton && ( Close )} ) } function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

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

) } function DialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function DialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from 'react' import { cn } from '@/lib/utils' function Input({ className, type, ...props }: React.ComponentProps<'input'>) { return ( ) } export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" 'use client' import * as React from 'react' import * as LabelPrimitive from '@radix-ui/react-label' import { cn } from '@/lib/utils' function Label({ className, ...props }: React.ComponentProps) { return ( ) } export { Label } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" 'use client' import * as React from 'react' import * as TabsPrimitive from '@radix-ui/react-tabs' import { cn } from '@/lib/utils' function Tabs({ className, ...props }: React.ComponentProps) { return ( ) } function TabsList({ className, ...props }: React.ComponentProps) { return ( ) } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ) } function TabsContent({ className, ...props }: React.ComponentProps) { return ( ) } export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "eslint .", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "latest", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [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; } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_3U5mqaQrRq3UJqL9w1I9GtmCOWD3/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" [V0_FILE]png:file="public/europe-map-1524.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_3U5mqaQrRq3UJqL9w1I9GtmCOWD3/0DMMddAUg-SJuoXI5ZJwtF/public/europe-map-1524.png" [V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_3U5mqaQrRq3UJqL9w1I9GtmCOWD3/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" [V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_3U5mqaQrRq3UJqL9w1I9GtmCOWD3/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" [V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_3U5mqaQrRq3UJqL9w1I9GtmCOWD3/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_3U5mqaQrRq3UJqL9w1I9GtmCOWD3/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_3U5mqaQrRq3UJqL9w1I9GtmCOWD3/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_3U5mqaQrRq3UJqL9w1I9GtmCOWD3/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_3U5mqaQrRq3UJqL9w1I9GtmCOWD3/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_3U5mqaQrRq3UJqL9w1I9GtmCOWD3/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This