[V0_FILE]typescriptreact:file="components/DarkModeToggle.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Moon, Sun } from "lucide-react" export const DarkModeToggle = () => { const [darkMode, setDarkMode] = useState(false) useEffect(() => { const isDarkMode = localStorage.getItem("darkMode") === "true" setDarkMode(isDarkMode) document.documentElement.classList.toggle("dark", isDarkMode) }, []) const toggleDarkMode = () => { const newDarkMode = !darkMode setDarkMode(newDarkMode) localStorage.setItem("darkMode", newDarkMode.toString()) document.documentElement.classList.toggle("dark", newDarkMode) } return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { ChargingWidget } from "@/components/ChargingWidget" import { Toaster } from "@/components/ui/toaster" export default function Home() { return (

) } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { 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: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/ChargingWidget.tsx" isEdit="true" "use client" import React, { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Battery, Check } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import { DarkModeToggle } from "./DarkModeToggle" export const ChargingWidget = () => { const [chargePercentage, setChargePercentage] = useState(0) const [timeRemaining, setTimeRemaining] = useState(60) const [isCharged, setIsCharged] = useState(false) const { toast } = useToast() useEffect(() => { const interval = setInterval(() => { if (chargePercentage < 100) { setChargePercentage((prevPercentage) => Math.min(prevPercentage + 3.33, 100)) setTimeRemaining((prevTime) => Math.max(prevTime - 2, 0)) } else { setIsCharged(true) clearInterval(interval) toast({ title: "Fully Charged", description: "David, your device is now fully charged!", duration: 3000, }) } }, 500) return () => clearInterval(interval) }, [chargePercentage, toast]) const handleRefresh = () => { setChargePercentage(0) setTimeRemaining(60) setIsCharged(false) } const getWittyMessage = (percentage: number) => { if (percentage === 0) return "Oops! I'm running on empty here!" if (percentage < 20) return "Just a sip of energy, please!" if (percentage < 50) return "Halfway there, hang in there!" if (percentage < 80) return "Almost ready for action!" if (percentage < 100) return "So close, I can taste the full charge!" return "Woohoo! I'm supercharged and ready to go!" } return (

{isCharged ? ( Charged ) : ( Charging {chargePercentage.toFixed(0)}% )}

{getWittyMessage(chargePercentage)}

{isCharged ? `Charged in ${Math.ceil(60 - timeRemaining)} mins` : `Ready in ~${Math.ceil(timeRemaining)} mins`}

{isCharged && ( Refresh )}

) }

About

Tags

Share

About

Tags

Share

More from adurotimi

More Templates Like This

About

Tags

Share

About

Tags

Share

More from adurotimi

More Templates Like This