[V0_FILE]typescriptreact:file="app/fonts.ts" isMerged="true" import localFont from "next/font/local" // Load TWK Everett font export const twkEverett = localFont({ src: [ { path: "../public/fonts/TWKEverett-Medium.woff2", weight: "500", style: "normal", }, { path: "../public/fonts/TWKEverett-Regular.woff2", weight: "400", style: "normal", }, ], variable: "--font-twk-everett", display: "swap", }) [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { twkEverett } from "./fonts" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "iOS-style Countdown Timer", description: "A countdown timer with iOS-style scrolling digits", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --radius: 0.5rem; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .font-twk-everett { font-family: var(--font-twk-everett); } [V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { fontFamily: { "twk-everett": ["var(--font-twk-everett)"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [], } export default config [V0_FILE]typescriptreact:file="components/digit-reel.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { cn } from "@/lib/utils" import { motion, AnimatePresence } from "framer-motion" interface DigitReelProps { value: string className?: string } export default function DigitReel({ value, className }: DigitReelProps) { const [prevValue, setPrevValue] = useState(value) const [isAnimating, setIsAnimating] = useState(false) useEffect(() => { if (value !== prevValue) { setIsAnimating(true) const timer = setTimeout(() => { setPrevValue(value) setIsAnimating(false) }, 300) return () => clearTimeout(timer) } }, [value, prevValue]) // Generate the digits that will appear in the reel // For a digit like "5", we'll show "3", "4", "5", "6", "7" in the reel const generateReelDigits = (currentDigit: string) => { const digit = Number.parseInt(currentDigit, 10) const digits = [] // Add digits before current for (let i = 2; i > 0; i--) { const prevDigit = (digit - i + 10) % 10 digits.push(prevDigit.toString()) } // Add current digit digits.push(currentDigit) // Add digits after current for (let i = 1; i <= 2; i++) { const nextDigit = (digit + i) % 10 digits.push(nextDigit.toString()) } return digits } const reelDigits = generateReelDigits(value) return (

{/* Top gradient overlay */}

{reelDigits.map((digit, index) => (

2 ? "-mt-4" : "", )} > {digit}

))}

{/* Bottom gradient overlay */}

) } [V0_FILE]typescriptreact:file="components/countdown-timer.tsx" isEdit="true" "use client" import { useEffect, useState } from "react" import DigitReel from "./digit-reel" interface CountdownTimerProps { initialMinutes: number initialSeconds: number } export default function CountdownTimer({ initialMinutes = 0, initialSeconds = 0 }: CountdownTimerProps) { const [minutes, setMinutes] = useState(initialMinutes) const [seconds, setSeconds] = useState(initialSeconds) const [isActive, setIsActive] = useState(true) useEffect(() => { let interval: NodeJS.Timeout | null = null if (isActive) { interval = setInterval(() => { if (seconds > 0) { setSeconds(seconds - 1) } else if (minutes > 0) { setMinutes(minutes - 1) setSeconds(59) } else { clearInterval(interval as NodeJS.Timeout) setIsActive(false) } }, 1000) } return () => { if (interval) clearInterval(interval) } }, [isActive, minutes, seconds]) // Format numbers to always have two digits const formattedMinutes = minutes.toString().padStart(2, "0") const formattedSeconds = seconds.toString().padStart(2, "0") return (

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import CountdownTimer from "@/components/countdown-timer" export default function Home() { const [initialTime, setInitialTime] = useState({ minutes: 15, seconds: 42 }) return (

Voting ends in:

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This