import { AnimatePresence, motion } from 'framer-motion' import { ChevronLeft, Paperclip, Mic, Clipboard, Forward, Trash2, CircleCheck, Pin, UserRoundPen, Undo2, } from 'lucide-react' import { useEffect, useRef, useState } from 'react' import { useOnClickOutside } from 'usehooks-ts' import Confetti from './Confetti' export default function App() { const [reactionView, setReactionView] = useState(false) const ref1 = useRef(null) const ref2 = useRef(null) const ref3 = useRef(null) const refs = [ref1, ref2, ref3] useOnClickOutside(refs, () => setReactionView(false)) useEffect(() => { function onKeyDown(event: KeyboardEvent) { if (event.key === 'Escape') { setReactionView(false) } } window.addEventListener('keydown', onKeyDown) return () => window.removeEventListener('keydown', onKeyDown) }, []) const [activeEmoji, setActiveEmoji] = useState<string | null>(null) const handleEmojiClick = (emoji: string) => { setActiveEmoji(emoji) } const handleConfettiComplete = () => { setActiveEmoji(null) } return ( <main className="relative flex min-h-screen w-full items-start justify-center bg-zinc-50 px-4 py-10 md:items-center"> <div className="relative h-[760px] w-full max-w-[393px] overflow-hidden rounded-[50px] border-[6px] border-black bg-[#000] ring-4 ring-[#b7b5a8]"> <div className="bg-pattern flex h-full w-full flex-col items-center justify-center bg-cover bg-center"> <div className="flex w-full items-center justify-between border-b border-white/5 bg-[#2e222f]/50 p-2 pt-14 backdrop-blur-lg"> <button className="flex w-20 items-center text-sm font-bold text-blue-600"> <ChevronLeft size={26} /> Back </button> <div className="flex flex-col items-center justify-center"> <h3 className="text-center font-semibold text-white"> Leonel Ngoya </h3> <span className="text-sm font-medium text-white/60">online</span> </div> <div className="flex w-20 items-center justify-end"> <img src="/profile.jpg" alt="Profile" className="h-11 w-11 rounded-full object-cover" /> </div> </div> <div className="flex h-full w-full flex-col items-center justify-center space-y-2"> <div className="flex w-full items-center justify-start px-4"> <div className="relative max-w-[75%] rounded-xl rounded-bl-none bg-[#212121] px-2 py-1.5"> <span className="text-sm text-white"> Hello LN, Have you seen the latest animation on lndev/ui ? </span> <span className="absolute bottom-2 right-2 hidden text-[10px] text-white/50 sm:block"> 07:44 PM </span> </div> </div> <div className="flex w-full items-center justify-end px-4"> <motion.div className="relative max-w-[75%] cursor-pointer rounded-xl rounded-br-none bg-[#9249f6] px-2 py-1.5" onClick={() => setReactionView(true)} whileTap={{ scale: 0.9 }} layoutId="message" > <span className="text-sm text-white"> Of course! click on this message to view it ! </span> <span className="absolute bottom-2 right-2 hidden text-[10px] text-white/50 sm:block"> 07:49 PM </span> </motion.div> </div> <div className="flex w-full items-center justify-start px-4"> <div className="relative max-w-[60%] rounded-xl rounded-bl-none bg-[#212121] px-2 py-1.5"> <span className="text-sm text-white"> Wowww that's amazing ! I love it </span> <span className="absolute bottom-2 right-2 hidden text-[10px] text-white/50 sm:block"> 07:50 PM </span> </div> </div> </div> <div className="flex w-full items-center justify-between gap-2 border-t border-white/10 px-4 pb-10 pt-2 backdrop-blur-lg"> <Paperclip size={26} className="text-white/60" /> <input type="text" placeholder="Message" className="w-full rounded-full bg-zinc-800 px-2 py-1.5 text-sm text-white/60 outline-none ring-0" /> <Mic size={26} className="text-white/60" /> </div> </div> <AnimatePresence> {reactionView ? ( <div className="absolute inset-0 z-30 flex items-center justify-center overflow-hidden"> <div className="flex w-full items-center justify-end px-4"> <div className="flex w-full flex-col items-end justify-center gap-2"> <motion.div className="flex items-center justify-between gap-1 overflow-hidden rounded-full bg-[#2e222f]/70 px-2 py-2" ref={ref1} animate={{ width: '100%', opacity: 1 }} initial={{ width: 0, opacity: 0 }} exit={{ width: 0, opacity: 0 }} transition={{ duration: 0.2, type: 'spring', stiffness: 1000, damping: 100, }} > {emojis.map((emoji, index) => ( <motion.button key={emoji} className="shrink-0 text-3xl" animate={{ opacity: 1, y: 0 }} initial={{ opacity: 0, y: 20 }} transition={{ duration: 0.2, type: 'spring', stiffness: 100, damping: 10, delay: index * 0.05, }} onClick={() => handleEmojiClick(emoji)} > <motion.div whileTap={{ scale: 0.9 }} whileHover={{ scale: 1.1 }} > {emoji} </motion.div> {activeEmoji === emoji && ( <Confetti emoji={emoji} onComplete={handleConfettiComplete} /> )} </motion.button> ))} </motion.div> <motion.div className="relative w-full max-w-[75%] cursor-pointer rounded-xl rounded-br-none bg-[#9249f6] px-2 py-1.5" layoutId="message" ref={ref2} > <span className="text-sm text-white"> Of course! click on this message to view it ! </span> <span className="absolute bottom-2 right-2 hidden text-[10px] text-white/50 sm:block"> 07:49 PM </span> </motion.div> <motion.div className="flex w-[220px] flex-col items-center justify-between overflow-hidden rounded-lg bg-[#2e222f]/70" ref={ref3} animate={{ scale: 1, opacity: 1 }} initial={{ scale: 0, opacity: 0 }} exit={{ scale: 0, opacity: 0 }} transition={{ duration: 0.2, type: 'spring', stiffness: 1000, damping: 100, }} > <motion.button className="flex w-full items-center justify-between gap-2 border-b border-white/5 px-4 py-2 text-white"> <span className="text-sm">Reply</span> <Undo2 className="" size={18} /> </motion.button> <motion.button className="flex w-full items-center justify-between gap-2 border-b border-white/5 px-4 py-2 text-white"> <span className="text-sm">Copy</span> <Clipboard className="" size={18} /> </motion.button> <motion.button className="flex w-full items-center justify-between gap-2 border-b border-white/5 px-4 py-2 text-white"> <span className="text-sm">Edit</span> <UserRoundPen className="" size={18} /> </motion.button> <motion.button className="flex w-full items-center justify-between gap-2 border-b border-white/5 px-4 py-2 text-white"> <span className="text-sm">Pin</span> <Pin className="" size={18} /> </motion.button> <motion.button className="flex w-full items-center justify-between gap-2 border-b border-white/5 px-4 py-2 text-white"> <span className="text-sm">Forward</span> <Forward className="" size={18} /> </motion.button> <motion.button className="flex w-full items-center justify-between gap-2 border-b-4 border-white/5 px-4 py-2 text-red-500"> <span className="text-sm">Delete</span> <Trash2 className="" size={18} /> </motion.button> <motion.button className="flex w-full items-center justify-between gap-2 px-4 py-2 text-white"> <span className="text-sm">Select</span> <CircleCheck className="" size={18} /> </motion.button> </motion.div> </div> </div> </div> ) : null} </AnimatePresence> <AnimatePresence> {reactionView ? ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute inset-0 backdrop-blur-xl" /> ) : null} </AnimatePresence> <AnimatePresence> {!reactionView ? ( <motion.div className="absolute left-1/2 top-3 z-[50] flex h-8 w-40 -translate-x-1/2 cursor-pointer items-center justify-between rounded-full border border-orange-50/30 bg-black px-2" animate={{ width: 160, opacity: 1 }} initial={{ width: 128, opacity: 0 }} exit={{ width: 128, opacity: 0 }} transition={{ duration: 0.2, type: 'spring', stiffness: 100, damping: 10, }} > <img src="/photo.jpg" alt="photo" className="size-5 rounded object-cover" /> <div className="flex items-center gap-0.5"> <div className="size-[2px] rounded-full bg-orange-50"></div> <div className="size-[2px] rounded-full bg-orange-50"></div> <div className="size-[2px] rounded-full bg-orange-50"></div> <div className="size-[2px] rounded-full bg-orange-50"></div> </div> </motion.div> ) : null} </AnimatePresence> <AnimatePresence> {reactionView ? ( <motion.div className="absolute left-1/2 top-3 z-30 h-8 w-32 -translate-x-1/2 rounded-full bg-black" animate={{ width: 128 }} initial={{ width: 160 }} exit={{ width: 160 }} transition={{ duration: 0.2, type: 'spring', stiffness: 100, damping: 10, }} ></motion.div> ) : null} </AnimatePresence> <div className="absolute bottom-3 left-1/2 z-[50] h-1 w-44 -translate-x-1/2 cursor-pointer rounded-full bg-white"></div> </div> </main> ) } const emojis = ['🤝', '❤️', '👍', '💯', '🔥', '⚡️', '🤣', '😢']

Reaction Message

Code

Stacks

X ( Twitter ) Post