91:I[903690,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/29wcthg4qofk3.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/35_y0dqgn-0mt.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/1us3bl0q56vjs.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2p5g2vonn3_b4.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2tfn-xv8fvnhv.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3urjbzpvx1hzq.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/17cltoeeruep0.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0d8bbkzj_prz_.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/33i5u4z_a-w5d.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2ykiwolb6qpz5.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0pg_0xkvbnf5k.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3d71iiimqsmjs.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/105_gv2xuw0rt.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3adrnto-fcbln.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0u_qtt74c-z_l.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/17ubrhzwe7qjg.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/19crje_28rfyr.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/4239bmm2rxjht.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ"],"ExplicitChatIdProvider"] 92:I[838238,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/29wcthg4qofk3.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/35_y0dqgn-0mt.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/1us3bl0q56vjs.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2p5g2vonn3_b4.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2tfn-xv8fvnhv.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3urjbzpvx1hzq.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/17cltoeeruep0.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0d8bbkzj_prz_.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/33i5u4z_a-w5d.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/2ykiwolb6qpz5.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0pg_0xkvbnf5k.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3d71iiimqsmjs.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/105_gv2xuw0rt.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/3adrnto-fcbln.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/0u_qtt74c-z_l.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/17ubrhzwe7qjg.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/19crje_28rfyr.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ","/chat-static/_next/static/chunks/4239bmm2rxjht.js?dpl=dpl_7qHsRKhreykohUjK6FiaNMt9rRzQ"],"SWRDataProvider"] 93:T10e5,[V0_FILE]typescriptreact:file="status-badge.tsx" isEdit="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Circle, CheckCircle } from "lucide-react" import { cn } from "@/lib/utils" type StatusType = "draft" | "in-progress" | "in-review" | "completed" interface StatusBadgeProps { status: StatusType onStatusChange?: (status: StatusType) => void className?: string } const statusOrder: StatusType[] = ["draft", "in-progress", "in-review", "completed"] export default function StatusBadge({ status, onStatusChange, className }: StatusBadgeProps) { const [isHovered, setIsHovered] = useState(false) const variants = { draft: { icon: (props: any) => , text: "Draft", colors: "bg-gray-50 text-gray-700", }, "in-progress": { icon: (props: any) => ( ), text: "In-progress", colors: "bg-orange-50 text-orange-700", }, "in-review": { icon: (props: any) => ( ), text: "In-review", colors: "bg-blue-50 text-blue-700", }, completed: { icon: (props: any) => , text: "Completed", colors: "bg-green-50 text-green-700", }, } const handleClick = () => { if (onStatusChange) { const currentIndex = statusOrder.indexOf(status) const nextIndex = (currentIndex + 1) % statusOrder.length onStatusChange(statusOrder[nextIndex]) } } const currentVariant = variants[status] return ( setIsHovered(true)} onHoverEnd={() => setIsHovered(false)} onClick={handleClick} transition={{ type: "spring", stiffness: 400, damping: 20, }} className={cn( "inline-flex items-center gap-2 rounded-full shadow-sm transition-colors cursor-pointer", isHovered ? "px-3 py-1" : "p-1.5", currentVariant.colors, className, )} > {currentVariant.icon({})} {isHovered && ( {currentVariant.text} )} ) } [V0_FILE]typescriptreact:file="utils/index.ts" export function cn(...classes: (string | undefined)[]) { return classes.filter(Boolean).join(" ") } [V0_FILE]typescriptreact:file="demo.tsx" isEdit="true" "use client" import { useState } from "react" import StatusBadge from "./status-badge" import type { StatusType } from "./types" export default function Demo() { const [statuses, setStatuses] = useState(["draft", "in-progress", "in-review", "completed"]) const handleStatusChange = (index: number, newStatus: StatusType) => { setStatuses((prev) => { const updated = [...prev] updated[index] = newStatus return updated }) } return (

{statuses.map((status, index) => ( handleStatusChange(index, newStatus)} /> ))}

) } [V0_FILE]typescriptreact:file="types.ts" export type StatusType = "draft" | "in-progress" | "in-review" | "completed" 88:["$","$L91",null,{"chatId":"S0p45J48xFE","children":["$","$L92",null,{"data":{"@\"active-block\",\"S0p45J48xFE\",":{"id":"b_vxImBLi2pm8","messageId":"1TLllabnyWXcYeyChsU2AsknRhOpMch7","source":"$93","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"status-badges","type":"code-project","project":"status-badges"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"S0p45J48xFE\",":false,"":null},"children":"$L94"}]}]

About

Tags

Share

About

Tags

Share

More from adurotimi

More Templates Like This