[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Playfair_Display } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import "./globals.css" const playfair = Playfair_Display({ subsets: ["latin"], style: ["normal", "italic"], variable: "--font-playfair", }) export const metadata: Metadata = { title: "Momento Mori - Remember You Must Die", description: "A contemplative mortality countdown timer", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @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: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --font-playfair: var(--font-playfair); --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/page.tsx" isMerged="true" import MomentoMoriTimer from "@/components/momento-mori-timer" export default function Home() { return } [V0_FILE]jpg:file="public/placeholder.svg?height=1080&width=1920&query=ancient%20roman%20empire%20colosseum%20ruins%20dramatic%20black%20and%20white%20cinematic%20landscape" query="ancient roman empire colosseum ruins dramatic black and white cinematic landscape" isMerged="true" [V0_FILE]jpg:file="public/ancient-roman-empire-colosseum-ruins-dramatic-blac.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ancient-roman-empire-colosseum-ruins-dramatic-blac-qsNWtnIv8qFHo9uK1oPyw8XlhHbC3i.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "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": "1.3.1", "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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/time-display.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" export default function TimeDisplay() { const [currentTime, setCurrentTime] = useState("") useEffect(() => { const getCurrentTime = () => { const now = new Date() const location = process.env.NEXT_PUBLIC_CURRENT_LOCATION || "America/New_York" try { const timeString = now.toLocaleTimeString("en-US", { timeZone: location, hour12: true, hour: "2-digit", minute: "2-digit", }) return timeString } catch (error) { return now.toLocaleTimeString("en-US", { hour12: true, hour: "2-digit", minute: "2-digit", }) } } const updateTime = () => { setCurrentTime(getCurrentTime()) } updateTime() const intervalId = setInterval(updateTime, 1000) return () => clearInterval(intervalId) }, []) return (

{currentTime}

) } [V0_FILE]typescriptreact:file="components/weeks-display.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" interface WeeksData { weeksLived: number totalWeeks: number } export default function WeeksDisplay() { const [weeksData, setWeeksData] = useState({ weeksLived: 0, totalWeeks: 0, }) useEffect(() => { const updateWeeksData = () => { const birthDate = new Date(2000, 2, 21) const expectedDeathDate = new Date(2080, 2, 21) const now = new Date() const timeLived = now.getTime() - birthDate.getTime() const totalLifetime = expectedDeathDate.getTime() - birthDate.getTime() const weeksLived = Math.floor(timeLived / (1000 * 60 * 60 * 24 * 7)) const totalWeeks = Math.floor(totalLifetime / (1000 * 60 * 60 * 24 * 7)) setWeeksData({ weeksLived, totalWeeks }) } updateWeeksData() const intervalId = setInterval(updateWeeksData, 60000) // Update every minute return () => clearInterval(intervalId) }, []) return ( <>

{weeksData.weeksLived} / {weeksData.totalWeeks} weeks

{weeksData.totalWeeks - weeksData.weeksLived} weeks remain

) } [V0_FILE]typescriptreact:file="components/greeting-header.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" export default function GreetingHeader() { const [greeting, setGreeting] = useState("Good morning, Jon") useEffect(() => { const getGreeting = () => { const now = new Date() const hour = now.getHours() const alternativeGreetings = [ "Let's get this bread, Jon", "Welcome back, Jon", "What will you do today, Jon?", "Top of the morning, Jon", "Rise and grind, Jon", "Time to slay the day, Jon", "Ready to level up, Jon?", "Another day, another opportunity, Jon", "Carpe diem, Jon", "Make it count, Jon", "Time's ticking, Jon", "Seize the moment, Jon", "Live your best life, Jon", "No cap, make today epic, Jon", ] if (Math.random() < 0.4) { const randomIndex = Math.floor(Math.random() * alternativeGreetings.length) return alternativeGreetings[randomIndex] } if (hour >= 5 && hour < 12) { return "Good morning, Jon" } else if (hour >= 12 && hour < 17) { return "Good afternoon, Jon" } else if (hour >= 17 && hour < 21) { return "Good evening, Jon" } else { return "Good night, Jon" } } setGreeting(getGreeting()) }, []) return

{greeting}

} [V0_FILE]typescriptreact:file="components/social-links.tsx" isMerged="true" import { Linkedin, Github, Twitter, Instagram } from "lucide-react" export default function SocialLinks() { return (

) } [V0_FILE]typescriptreact:file="components/momento-mori-timer.tsx" isEdit="true" isMerged="true" "use client" import TimeDisplay from "./time-display" import WeeksDisplay from "./weeks-display" import GreetingHeader from "./greeting-header" import CountdownTimer from "./countdown-timer" import DailyQuote from "./daily-quote" import SocialLinks from "./social-links" export default function MomentoMoriTimer() { return (

) } [V0_FILE]typescriptreact:file="components/daily-quote.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" interface QuoteData { quote: string author: string } export default function DailyQuote() { const [quoteData, setQuoteData] = useState({ quote: "The fool, with all his other faults, has this also, he is always getting ready to live.", author: "Seneca", }) useEffect(() => { const fetchDailyQuote = async () => { try { const response = await fetch("https://stoic-quotes.com/api/quote") if (response.ok) { const result = await response.json() if (result.text && result.author) { setQuoteData({ quote: result.text, author: result.author, }) } } } catch (error) { // Keep the default Seneca quote as fallback } } fetchDailyQuote() }, []) return (

"{quoteData.quote}"

— {quoteData.author}

) } [V0_FILE]typescriptreact:file="components/countdown-timer.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" interface TimeRemaining { years: number days: number hours: number minutes: number seconds: number } export default function CountdownTimer() { const [timeRemaining, setTimeRemaining] = useState({ years: 0, days: 0, hours: 0, minutes: 0, seconds: 0, }) useEffect(() => { const updateTimer = () => { const expectedDeathDate = new Date(2080, 2, 21) const now = new Date() const timeDiff = expectedDeathDate.getTime() - now.getTime() if (timeDiff <= 0) { setTimeRemaining({ years: 0, days: 0, hours: 0, minutes: 0, seconds: 0 }) return } const totalSeconds = Math.floor(timeDiff / 1000) const totalMinutes = Math.floor(totalSeconds / 60) const totalHours = Math.floor(totalMinutes / 60) const totalDays = Math.floor(totalHours / 24) const years = Math.floor(totalDays / 365.25) const remainingDays = totalDays - Math.floor(years * 365.25) const hours = totalHours % 24 const minutes = totalMinutes % 60 const seconds = totalSeconds % 60 setTimeRemaining({ years, days: remainingDays, hours, minutes, seconds, }) } updateTimer() const intervalId = setInterval(updateTimer, 1000) return () => clearInterval(intervalId) }, []) return (

{timeRemaining.years}

years

{timeRemaining.days}

days

{timeRemaining.hours}

hours

{timeRemaining.minutes}

min

{timeRemaining.seconds}

sec

) }

About

Tags

Share

More from jondoescodingx

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jondoescodingx

More Templates Like This