[V0_FILE]typescriptreact:file="app/page.tsx" import NotificationDemo from "../notification-demo" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="notification-demo.tsx" "use client" import { useState } from "react" import Notification from "./notification" import { motion } from "framer-motion" const NotificationDemo = () => { const [notifications, setNotifications] = useState([ { id: 1, sender: "Project Manager", message: "Design assets uploaded to workspace. Access now to review latest updates.", time: "2 min ago", variant: "light" as const, isRead: false, }, { id: 2, sender: "Team Bot", message: "Your weekly report is ready for review. Click to see your project metrics and milestones.", time: "Just now", variant: "dark" as const, isRead: false, }, ]) const handleMarkAsRead = (id: number) => { console.log(`Marked notification ${id} as read`) setNotifications((prev) => prev.map((notification) => (notification.id === id ? { ...notification, isRead: true } : notification)), ) } const handleReply = (id: number, message: string) => { console.log(`Reply to notification ${id}: ${message}`) // Here you would typically send the reply to your backend } return ( {notifications.map((notification) => ( handleMarkAsRead(notification.id)} onReply={(message) => handleReply(notification.id, message)} /> ))} ) } export default NotificationDemo [V0_FILE]typescriptreact:file="notification.tsx" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { MessageCircle, Check, CornerUpRight, Send } from "lucide-react" import { cn } from "@/lib/utils" import { motion, AnimatePresence, useAnimate } from "framer-motion" type NotificationProps = { sender: string message: string time: string variant?: "light" | "dark" onMarkAsRead?: () => void onReply?: (message: string) => void } const Notification = ({ sender, message, time, variant = "light", onMarkAsRead, onReply }: NotificationProps) => { const isDark = variant === "dark" const [isRead, setIsRead] = useState(false) const [showReadButton, setShowReadButton] = useState(true) const [isReplying, setIsReplying] = useState(false) const [replyText, setReplyText] = useState("") const [messageSent, setMessageSent] = useState(false) const [isReplyHovered, setIsReplyHovered] = useState(false) const [isReplyPressed, setIsReplyPressed] = useState(false) const [isAnimatingOut, setIsAnimatingOut] = useState(false) const [scope, animate] = useAnimate() const inputRef = useRef(null) const replyContainerRef = useRef(null) const buttonContainerRef = useRef(null) // Define fixed colors to ensure consistency const darkModeColors = { normal: "rgb(39, 39, 42)", // zinc-800 hover: "rgb(63, 63, 70)", // zinc-700 active: "rgb(63, 63, 70)", // zinc-700 text: { normal: "rgb(228, 228, 231)", // zinc-200 hover: "rgb(255, 255, 255)", // white active: "rgb(255, 255, 255)", // white }, } const lightModeColors = { normal: "rgb(243, 244, 246)", // zinc-100 hover: "rgb(229, 231, 235)", // zinc-200 active: "rgb(229, 231, 235)", // zinc-200 text: { normal: "rgb(82, 82, 91)", // zinc-600 hover: "rgb(39, 39, 42)", // zinc-800 active: "rgb(39, 39, 42)", // zinc-800 }, } // Get the appropriate background color based on state const getBackgroundColor = () => { const colors = isDark ? darkModeColors : lightModeColors if (isReplyPressed) return colors.active if (isReplyHovered) return colors.hover return colors.normal } // Get the appropriate text color based on state const getTextColor = () => { const colors = isDark ? darkModeColors.text : lightModeColors.text if (isReplyPressed) return colors.active if (isReplyHovered) return colors.hover return colors.normal } // Optimized spring animation config const springConfig = { type: "spring" as const, stiffness: 170, // Increased stiffness for faster response damping: 26, // Balanced damping for controlled bounce mass: 0.8, // Reduced mass for lighter feel } // Exit animation config with slightly longer duration to ensure smooth completion const exitConfig = { type: "spring" as const, stiffness: 170, damping: 26, mass: 0.8, restDelta: 0.001, // Smaller rest delta for smoother finish restSpeed: 0.001, // Smaller rest speed for smoother finish } // Auto-dismiss timer for "Marked as read" button useEffect(() => { let readButtonTimer: NodeJS.Timeout if (isRead && showReadButton) { readButtonTimer = setTimeout(() => { setShowReadButton(false) }, 1500) // Changed from 3000 to 1500 (1.5 seconds) } return () => { if (readButtonTimer) clearTimeout(readButtonTimer) } }, [isRead, showReadButton]) // Auto-dismiss timer for message sent confirmation useEffect(() => { let dismissTimer: NodeJS.Timeout if (messageSent && !isAnimatingOut) { dismissTimer = setTimeout(() => { // Start the exit animation setIsAnimatingOut(true) }, 1500) // 1.5 seconds } return () => { if (dismissTimer) clearTimeout(dismissTimer) } }, [messageSent, isAnimatingOut]) // Focus input when reply opens useEffect(() => { if (isReplying && !messageSent && !isAnimatingOut && inputRef.current) { setTimeout(() => { inputRef.current?.focus() }, 300) } }, [isReplying, messageSent, isAnimatingOut]) const handleMarkAsRead = () => { if (isRead) return setIsRead(true) animate(scope.current, { opacity: [1, 0.7, 1], scale: [1, 0.98, 1] }, { duration: 0.3 }) // Animate the icon to pulse animate("svg.message-icon", { scale: [1, 1.2, 1] }, { duration: 0.4, ease: "easeInOut" }) onMarkAsRead?.() } const handleReplyClick = () => { // If a message was just sent, don't allow toggling if (messageSent || isAnimatingOut) return const newIsReplying = !isReplying setIsReplying(newIsReplying) } const handleSubmitReply = () => { if (!replyText.trim() || messageSent || isAnimatingOut) return // Call the onReply callback with the message onReply?.(replyText) // Clear the input setReplyText("") // Show the confirmation message setMessageSent(true) setIsAnimatingOut(false) // Animate the notification to acknowledge the sent message animate(scope.current, { scale: [1, 1.02, 1] }, { duration: 0.4, ease: "easeInOut" }) } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSubmitReply() } } // Handle animation complete const handleExitComplete = () => { // Use a slightly longer timeout to ensure the animation is completely finished setTimeout(() => { setMessageSent(false) setIsReplying(false) setIsAnimatingOut(false) }, 100) // Increased from 50ms to 100ms } return (

{/* Background decoration */}

New message from {sender}

{time}

{message} {/* Button container with fixed layout */}

{/* Reply button - always present */} setIsReplyHovered(true)} onMouseLeave={() => setIsReplyHovered(false)} onMouseDown={() => setIsReplyPressed(true)} onMouseUp={() => setIsReplyPressed(false)} onTouchStart={() => setIsReplyPressed(true)} onTouchEnd={() => setIsReplyPressed(false)} layout style={{ backgroundColor: getBackgroundColor(), color: getTextColor(), transition: "background-color 0.2s ease, color 0.2s ease", height: "42px", transformOrigin: "center", willChange: "transform", flex: showReadButton || !isRead ? 1 : 2, }} className="py-2.5 px-4 rounded-lg text-center text-sm font-medium flex items-center justify-center gap-1.5" > Reply {/* Mark as read button - conditionally rendered */} {(showReadButton || !isRead) && ( {isRead ? ( Marked as read ) : ( Mark as read )} )}

{/* Reply input with 4px gap */} {isReplying && !isAnimatingOut && (

{messageSent ? ( Message has been sent ) : ( setReplyText(e.target.value)} onKeyDown={handleKeyDown} placeholder={`Reply to ${sender}...`} className={cn( "flex-1 bg-transparent border-none outline-none text-sm", isDark ? "placeholder:text-zinc-500" : "placeholder:text-zinc-400", )} /> )}

)}

) } export default Notification

About

Tags

Share

About

Tags

Share

More from laugebirchlorup

More Templates Like This

About

Tags

Share

About

Tags

Share

More from laugebirchlorup

More Templates Like This