82:I[903690,["/chat-static/_next/static/immutable/chunks/1o6h6x663zy04.js","/chat-static/_next/static/immutable/chunks/2m82wc70tddty.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3o_do00zpb1mt.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/300wx85v17r4x.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/0hzhjtks438-t.js","/chat-static/_next/static/immutable/chunks/1vocqkm3a_1im.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/1d27mj4qznfw8.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3srf9h7msbpj9.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/1np-j802-sgrx.js","/chat-static/_next/static/immutable/chunks/2owpwowxho3m_.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/29yrv11tyt1vu.js","/chat-static/_next/static/immutable/chunks/3sn4vx261dox0.js","/chat-static/_next/static/immutable/chunks/0nx1v2xq-1q6f.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/25bs_fkkq5ymp.js","/chat-static/_next/static/immutable/chunks/0egykxuezct38.js"],"ExplicitChatIdProvider"] 83:I[838238,["/chat-static/_next/static/immutable/chunks/1o6h6x663zy04.js","/chat-static/_next/static/immutable/chunks/2m82wc70tddty.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3o_do00zpb1mt.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/300wx85v17r4x.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/0hzhjtks438-t.js","/chat-static/_next/static/immutable/chunks/1vocqkm3a_1im.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/1d27mj4qznfw8.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3srf9h7msbpj9.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/1np-j802-sgrx.js","/chat-static/_next/static/immutable/chunks/2owpwowxho3m_.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/29yrv11tyt1vu.js","/chat-static/_next/static/immutable/chunks/3sn4vx261dox0.js","/chat-static/_next/static/immutable/chunks/0nx1v2xq-1q6f.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/25bs_fkkq5ymp.js","/chat-static/_next/static/immutable/chunks/0egykxuezct38.js"],"SWRDataProvider"] 84:T268f,[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:

) } 7b:["$","$L82",null,{"chatId":"h3EqALZrtsH","children":["$","$L83",null,{"data":{"@\"active-block\",\"h3EqALZrtsH\",":{"id":"b_RHDgAFmzymn","messageId":"qtg2dIdfWxtzsql8kCCFqfASLanQca4E","source":"$84","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"ios-countdown-timer","type":"code-project","project":"ios-countdown-timer"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"h3EqALZrtsH\",":false,"":null},"children":"$L85"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This