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 clsx from "clsx"; |
| #2 | |
| #3 | export function Avatar({ |
| #4 | name, |
| #5 | size = "md", |
| #6 | className, |
| #7 | }: { |
| #8 | name: string; |
| #9 | size?: "xs" | "sm" | "md" | "lg"; |
| #10 | className?: string; |
| #11 | }) { |
| #12 | const initials = name |
| #13 | .split(" ") |
| #14 | .map((n) => n[0]) |
| #15 | .join("") |
| #16 | .toUpperCase() |
| #17 | .slice(0, 2); |
| #18 | |
| #19 | const colors = [ |
| #20 | "bg-indigo-500", |
| #21 | "bg-emerald-500", |
| #22 | "bg-amber-500", |
| #23 | "bg-rose-500", |
| #24 | "bg-cyan-500", |
| #25 | "bg-violet-500", |
| #26 | "bg-pink-500", |
| #27 | "bg-teal-500", |
| #28 | ]; |
| #29 | |
| #30 | const colorIndex = |
| #31 | name.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0) % |
| #32 | colors.length; |
| #33 | |
| #34 | const sizes = { |
| #35 | xs: "w-5 h-5 text-[9px]", |
| #36 | sm: "w-6 h-6 text-[10px]", |
| #37 | md: "w-8 h-8 text-xs", |
| #38 | lg: "w-10 h-10 text-sm", |
| #39 | }; |
| #40 | |
| #41 | return ( |
| #42 | <div |
| #43 | className={clsx( |
| #44 | "rounded-full flex items-center justify-center font-medium text-white shrink-0", |
| #45 | colors[colorIndex], |
| #46 | sizes[size], |
| #47 | className |
| #48 | )} |
| #49 | title={name} |
| #50 | > |
| #51 | {initials} |
| #52 | </div> |
| #53 | ); |
| #54 | } |
| #55 |