repositories
loading repo index
repositories
loading repo index
repository
loading code, commits, and activity
Projectflow
stars
latest
clone command
git clone gitlawb://did:key:z6Mkfh4Y...QBEi/projectflowgit clone gitlawb://did:key:z6Mkfh4Y.../projectflowb3cded1async from playground1d ago| import { motion } from "framer-motion"; |
| #2 | import clsx from "clsx"; |
| #3 |
| #4 | export function ProgressBar({ |
| #5 | value, |
| #6 | max, |
| #7 | color = "bg-accent", |
| #8 | size = "md", |
| #9 | }: { |
| #10 | value: number; |
| #11 | max: number; |
| #12 | color?: string; |
| #13 | size?: "sm" | "md"; |
| #14 | }) { |
| #15 | const pct = max > 0 ? (value / max) * 100 : 0; |
| #16 | return ( |
| #17 | <div |
| #18 | className={clsx( |
| #19 | "w-full rounded-full bg-surface-3 overflow-hidden", |
| #20 | size === "sm" ? "h-1.5" : "h-2" |
| #21 | )} |
| #22 | > |
| #23 | <motion.div |
| #24 | initial={{ width: 0 }} |
| #25 | animate={{ width: `${pct}%` }} |
| #26 | transition={{ duration: 0.5, ease: "easeOut" }} |
| #27 | className={clsx("h-full rounded-full", color)} |
| #28 | /> |
| #29 | </div> |
| #30 | ); |
| #31 | } |
| #32 |