[V0_FILE]typescriptreact:file="components/toasts/background-process-notification.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" export default function BackgroundProcessNotification({ color = "#3b82f6" }) { const [visible, setVisible] = useState(true) const [progress, setProgress] = useState(0) const [expanded, setExpanded] = useState(false) const [isActive, setIsActive] = useState(true) useEffect(() => { const handleVisibilityChange = () => { setIsActive(!document.hidden) } document.addEventListener("visibilitychange", handleVisibilityChange) return () => { document.removeEventListener("visibilitychange", handleVisibilityChange) } }, []) useEffect(() => { if (!isActive || progress >= 100) return const interval = setInterval(() => { setProgress((prev) => { const newProgress = prev + 1 if (newProgress >= 100) { clearInterval(interval) return 100 } return newProgress }) }, 150) return () => clearInterval(interval) }, [isActive, progress]) if (!visible) return null return (

{progress}%

Uploading files

{isActive ? "In progress..." : "Paused (tab inactive)"}

• document.pdf (2.4 MB) - Complete

• image.jpg (4.1 MB) - {progress >= 60 ? "Complete" : `${Math.min(Math.floor(progress * 1.5), 100)}%`}

• video.mp4 (12.8 MB) - {progress >= 30 ? `${Math.floor((progress - 30) * 1.4)}%` : "Waiting..."}

) } [V0_FILE]typescriptreact:file="components/toasts/ai-action-confirmation.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Sparkles, Mic, Check, X } from "lucide-react" export default function AIActionConfirmation({ color = "#8b5cf6" }) { const [visible, setVisible] = useState(true) const [isPulsing, setIsPulsing] = useState(true) const [opacity, setOpacity] = useState(1) useEffect(() => { const timer = setTimeout(() => { setIsPulsing(false) }, 2000) const handleScroll = () => { const scrollY = window.scrollY const newOpacity = Math.max(1 - scrollY / 500, 0.5) setOpacity(newOpacity) } window.addEventListener("scroll", handleScroll) return () => { clearTimeout(timer) window.removeEventListener("scroll", handleScroll) } }, []) if (!visible) return null return (

AI has generated a response

Would you like to apply these changes?

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{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))", }, }, keyframes: { shake: { "0%, 100%": { transform: "translateX(0)" }, "10%, 30%, 50%, 70%, 90%": { transform: "translateX(-5px)" }, "20%, 40%, 60%, 80%": { transform: "translateX(5px)" }, }, }, }, }, plugins: [], } export default config [V0_FILE]typescriptreact:file="components/toasts/minimal-success-toast.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Check, X } from "lucide-react" export default function MinimalSuccessToast({ color = "#10b981" }) { const [visible, setVisible] = useState(true) useEffect(() => { const timer = setTimeout(() => { setVisible(false) }, 5000) return () => clearTimeout(timer) }, []) if (!visible) return null return (

A successful toast.

) } [V0_FILE]typescriptreact:file="components/toasts/interactive-error-alert.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { AlertCircle, X } from "lucide-react" import { cn } from "@/lib/utils" export default function InteractiveErrorAlert({ color = "#ef4444" }) { const [visible, setVisible] = useState(true) const [isShaking, setIsShaking] = useState(true) useEffect(() => { const timer = setTimeout(() => { setIsShaking(false) }, 500) return () => clearTimeout(timer) }, []) if (!visible) return null return (

Connection error occurred

Unable to connect to the server. Please try again.

) } [V0_FILE]typescriptreact:file="components/toasts/informational-toast.tsx" "use client" import { useState, useEffect } from "react" import { Info, X } from "lucide-react" export default function InformationalToast({ color = "#3b82f6" }) { const [visible, setVisible] = useState(true) useEffect(() => { const timer = setTimeout(() => { setVisible(false) }, 5000) return () => clearTimeout(timer) }, []) if (!visible) return null return (

An informational toast.

) } [V0_FILE]typescriptreact:file="components/toasts/warning-toast.tsx" "use client" import { useState, useEffect } from "react" import { AlertTriangle, X } from "lucide-react" export default function WarningToast({ color = "#f97316" }) { const [visible, setVisible] = useState(true) useEffect(() => { const timer = setTimeout(() => { setVisible(false) }, 5000) return () => clearTimeout(timer) }, []) if (!visible) return null return (

A warning toast.

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Github, Twitter } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism" import MinimalSuccessToast from "@/components/toasts/minimal-success-toast" import InteractiveErrorAlert from "@/components/toasts/interactive-error-alert" import BackgroundProcessNotification from "@/components/toasts/background-process-notification" import AIActionConfirmation from "@/components/toasts/ai-action-confirmation" import InformationalToast from "@/components/toasts/informational-toast" import WarningToast from "@/components/toasts/warning-toast" const colors = [ { name: "Default", value: "hsl(var(--primary))" }, { name: "Green", value: "#10b981" }, { name: "Blue", value: "#3b82f6" }, { name: "Red", value: "#ef4444" }, { name: "Purple", value: "#8b5cf6" }, { name: "Orange", value: "#f97316" }, ] export default function Home() { const [selectedColor, setSelectedColor] = useState(colors[0].value) const [activeTab, setActiveTab] = useState("minimal") const [copyButtonText, setCopyButtonText] = useState("Copy Code") const [shareDropdownOpen, setShareDropdownOpen] = useState(false) const toastComponents = { minimal: { component: , code: `import { useState, useEffect } from "react"; import { Check, X } from 'lucide-react'; import { cn } from "@/lib/utils"; export default function MinimalSuccessToast({ color = "#10b981" }) { const [visible, setVisible] = useState(true); useEffect(() => { const timer = setTimeout(() => { setVisible(false); }, 5000); return () => clearTimeout(timer); }, []); if (!visible) return null; return (

A successful toast.

); }`, }, info: { component: , code: `import { useState, useEffect } from "react"; import { Info, X } from 'lucide-react'; import { cn } from "@/lib/utils"; export default function InformationalToast({ color = "#3b82f6" }) { const [visible, setVisible] = useState(true); useEffect(() => { const timer = setTimeout(() => { setVisible(false); }, 5000); return () => clearTimeout(timer); }, []); if (!visible) return null; return (

An informational toast.

); }`, }, warning: { component: , code: `import { useState, useEffect } from "react"; import { AlertTriangle, X } from 'lucide-react'; import { cn } from "@/lib/utils"; export default function WarningToast({ color = "#f97316" }) { const [visible, setVisible] = useState(true); useEffect(() => { const timer = setTimeout(() => { setVisible(false); }, 5000); return () => clearTimeout(timer); }, []); if (!visible) return null; return (

A warning toast.

); }`, }, error: { component: , code: `import { useState, useEffect } from "react"; import { AlertCircle, X } from 'lucide-react'; import { cn } from "@/lib/utils"; export default function InteractiveErrorAlert({ color = "#ef4444" }) { const [visible, setVisible] = useState(true); const [isShaking, setIsShaking] = useState(true); useEffect(() => { const timer = setTimeout(() => { setIsShaking(false); }, 500); return () => clearTimeout(timer); }, []); if (!visible) return null; return (

Connection error occurred

Unable to connect to the server. Please try again.

); }`, }, process: { component: , code: `import { useState, useEffect } from "react"; import { ChevronDown, ChevronUp } from 'lucide-react'; import { cn } from "@/lib/utils"; export default function BackgroundProcessNotification({ color = "#3b82f6" }) { const [visible, setVisible] = useState(true); const [progress, setProgress] = useState(0); const [expanded, setExpanded] = useState(false); const [isActive, setIsActive] = useState(true); useEffect(() => { const handleVisibilityChange = () => { setIsActive(!document.hidden); }; document.addEventListener("visibilitychange", handleVisibilityChange); return () => { document.removeEventListener("visibilitychange", handleVisibilityChange); }; }, []); useEffect(() => { if (!isActive || progress >= 100) return; const interval = setInterval(() => { setProgress(prev => { const newProgress = prev + 1; if (newProgress >= 100) { clearInterval(interval); return 100; } return newProgress; }); }, 150); return () => clearInterval(interval); }, [isActive, progress]); if (!visible) return null; return (

{progress}%

Uploading files

{isActive ? "In progress..." : "Paused (tab inactive)"}

• document.pdf (2.4 MB) - Complete

• image.jpg (4.1 MB) - {progress >= 60 ? "Complete" : \`\${Math.min(Math.floor(progress * 1.5), 100)}%\`}

• video.mp4 (12.8 MB) - {progress >= 30 ? \`\${Math.floor((progress - 30) * 1.4)}%\` : "Waiting..."}

); }`, }, ai: { component: , code: `import { useState, useEffect } from "react"; import { Sparkles, Mic, Check, X } from 'lucide-react'; import { cn } from "@/lib/utils"; export default function AIActionConfirmation({ color = "#8b5cf6" }) { const [visible, setVisible] = useState(true); const [isPulsing, setIsPulsing] = useState(true); const [opacity, setOpacity] = useState(1); useEffect(() => { const timer = setTimeout(() => { setIsPulsing(false); }, 2000); const handleScroll = () => { const scrollY = window.scrollY; const newOpacity = Math.max(1 - scrollY / 500, 0.5); setOpacity(newOpacity); }; window.addEventListener('scroll', handleScroll); return () => { clearTimeout(timer); window.removeEventListener('scroll', handleScroll); }; }, []); if (!visible) return null; return (

AI has generated a response

Would you like to apply these changes?

); }`, }, } const handleCopyCode = () => { navigator.clipboard.writeText(toastComponents[activeTab].code) setCopyButtonText("Copied!") setTimeout(() => { setCopyButtonText("Copy Code") }, 2000) } useEffect(() => { const handleClickOutside = (event) => { if (shareDropdownOpen && !event.target.closest(".share-dropdown-container")) { setShareDropdownOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, [shareDropdownOpen]) return (

modern toast notifications

with love.{" "} Damburudhar .

{shareDropdownOpen && (

)}

Select Notification Color

{colors.map((color) => (

Preview

Success Info Warning Error Process AI Action

{toastComponents[activeTab].component}

Code

{toastComponents[activeTab].code}

) }

About

Tags

Share

About

Tags

Share

More from garlicgang-8643

More Templates Like This