92:I[903690,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/29wcthg4qofk3.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/35_y0dqgn-0mt.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/1us3bl0q56vjs.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2p5g2vonn3_b4.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2tfn-xv8fvnhv.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3urjbzpvx1hzq.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/17cltoeeruep0.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0d8bbkzj_prz_.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/33i5u4z_a-w5d.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2ykiwolb6qpz5.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0pg_0xkvbnf5k.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3d71iiimqsmjs.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2oho62jneyxne.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/1w9o_mi4nnbhb.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0u_qtt74c-z_l.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/17ubrhzwe7qjg.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/19crje_28rfyr.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/4239bmm2rxjht.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/29wcthg4qofk3.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/35_y0dqgn-0mt.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/1us3bl0q56vjs.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2p5g2vonn3_b4.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2tfn-xv8fvnhv.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3urjbzpvx1hzq.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/17cltoeeruep0.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0d8bbkzj_prz_.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/33i5u4z_a-w5d.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2ykiwolb6qpz5.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0pg_0xkvbnf5k.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3d71iiimqsmjs.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/2oho62jneyxne.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/1w9o_mi4nnbhb.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/0u_qtt74c-z_l.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/17ubrhzwe7qjg.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/19crje_28rfyr.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa","/chat-static/_next/static/chunks/4239bmm2rxjht.js?dpl=dpl_HNDKTTMzarYUhecK2F7m5C6CBwfa"],"SWRDataProvider"] 94:T3b6c,[V0_FILE]typescriptreact:file="save-button.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Loader2, Check, Sun, Moon } from "lucide-react" import confetti from "canvas-confetti" import { cn } from "@/utils/cn" import "tailwindcss/tailwind.css" export default function SaveButton() { const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle") const [isDark, setIsDark] = useState(false) const handleSave = () => { if (status === "idle") { setStatus("saving") // Simulate saving process setTimeout(() => { setStatus("saved") // Trigger confetti confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, }) // Reset after 2 seconds setTimeout(() => setStatus("idle"), 2000) }, 2000) } } const toggleTheme = () => { setIsDark(!isDark) document.documentElement.classList.toggle("dark") } // Button variants for different states const buttonVariants = { idle: { backgroundColor: isDark ? "rgb(64, 64, 64)" : "rgb(243, 244, 246)", color: isDark ? "white" : "black", }, saving: { backgroundColor: "rgb(59, 130, 246)", color: "white", }, saved: { backgroundColor: "rgb(34, 197, 94)", color: "white", }, } return (

{status === "idle" && ( )} {status !== "idle" && ( {status === "saving" && ( )} {status === "saved" && ( )} {status === "saving" ? "Saving file" : "File saved"} )}

) } [V0_FILE]typescript:file="utils/cn.ts" isEdit="true" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="tailwind.config.js" isFixed="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: { animation: { flip: "flip 6s infinite steps(2, end)", rotate: "rotate 3s linear infinite both", }, keyframes: { flip: { to: { transform: "rotate(360deg)" }, }, rotate: { to: { transform: "rotate(90deg)" }, }, }, 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]json:file="package.json" isMerged="true" { "name": "save-button-project", "version": "1.0.0", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "framer-motion": "^10.12.16", "lucide-react": "^0.241.0", "canvas-confetti": "^1.6.0", "clsx": "^1.2.1", "tailwind-merge": "^1.13.2" }, "devDependencies": { "@types/react": "^18.2.12", "@types/react-dom": "^18.2.5", "typescript": "^5.1.3", "tailwindcss": "^3.3.2", "postcss": "^8.4.24", "autoprefixer": "^10.4.14" }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import SaveButton from "@/components/SaveButton" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/SaveButton.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Loader2, Check, Sun, Moon, Sparkles } from "lucide-react" import confetti from "canvas-confetti" import { cn } from "@/utils/cn" export default function SaveButton() { const [status, setStatus] = useState<"idle" | "saving" | "saved">("idle") const [isDark, setIsDark] = useState(false) const [bounce, setBounce] = useState(false) const handleSave = () => { if (status === "idle") { setStatus("saving") // Simulate saving process setTimeout(() => { setStatus("saved") setBounce(true) // Trigger confetti confetti({ particleCount: 100, spread: 70, origin: { y: 0.6 }, colors: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#00ffff", "#ff00ff"], shapes: ["star", "circle"], }) // Reset after 2 seconds setTimeout(() => { setStatus("idle") setBounce(false) }, 2000) }, 2000) } } const toggleTheme = () => { setIsDark(!isDark) document.documentElement.classList.toggle("dark") } // Button variants for different states const buttonVariants = { idle: { backgroundColor: isDark ? "rgb(64, 64, 64)" : "rgb(243, 244, 246)", color: isDark ? "white" : "black", scale: 1, }, saving: { backgroundColor: "rgb(59, 130, 246)", color: "white", scale: 1, }, saved: { backgroundColor: "rgb(34, 197, 94)", color: "white", scale: [1, 1.1, 1], transition: { duration: 0.2, times: [0, 0.5, 1], }, }, } const sparkleVariants = { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0 }, } return (

{status === "idle" && ( )} {status === "saving" && ( )} {status === "saved" && ( )} {status === "idle" ? "Save me, please!" : status === "saving" ? "Working on it..." : "Saved! Woohoo!"} {bounce && ( )}

) } 88:["$","$L92",null,{"chatId":"sgCIi1LiM2a","children":["$","$L93",null,{"data":{"@\"active-block\",\"sgCIi1LiM2a\",":{"id":"b_WqF6SjRCQfm","messageId":"7sCqQISqiBmqpbDJq25R0Nn9HeZYhME1","source":"$94","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"save-button","type":"code-project","project":"save-button"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"sgCIi1LiM2a\",":false,"":null},"children":"$L95"}]}]

About

Tags

Share

About

Tags

Share

More from adurotimi

More Templates Like This