[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"

About

About