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| #1 | import { motion } from "framer-motion"; |
| #2 | import clsx from "clsx"; |
| #3 | |
| #4 | export function Tabs({ |
| #5 | tabs, |
| #6 | active, |
| #7 | onChange, |
| #8 | }: { |
| #9 | tabs: { id: string; label: string; count?: number }[]; |
| #10 | active: string; |
| #11 | onChange: (id: string) => void; |
| #12 | }) { |
| #13 | return ( |
| #14 | <div className="flex items-center gap-1 border-b border-border"> |
| #15 | {tabs.map((tab) => ( |
| #16 | <button |
| #17 | key={tab.id} |
| #18 | onClick={() => onChange(tab.id)} |
| #19 | className={clsx( |
| #20 | "px-3 py-2.5 text-sm font-medium transition-colors relative", |
| #21 | active === tab.id |
| #22 | ? "text-zinc-100" |
| #23 | : "text-zinc-500 hover:text-zinc-300" |
| #24 | )} |
| #25 | > |
| #26 | <span className="flex items-center gap-2"> |
| #27 | {tab.label} |
| #28 | {tab.count !== undefined && ( |
| #29 | <span className="text-2xs text-zinc-500">{tab.count}</span> |
| #30 | )} |
| #31 | </span> |
| #32 | {active === tab.id && ( |
| #33 | <motion.div |
| #34 | layoutId="tab-indicator" |
| #35 | className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent rounded-full" |
| #36 | /> |
| #37 | )} |
| #38 | </button> |
| #39 | ))} |
| #40 | </div> |
| #41 | ); |
| #42 | } |
| #43 |