({
size,
className,
empty,
color,
darkMode = true,
text,
rounded,
}: ChipProps)
| 14 | } |
| 15 | |
| 16 | export default function Chip({ |
| 17 | size, |
| 18 | className, |
| 19 | empty, |
| 20 | color, |
| 21 | darkMode = true, |
| 22 | text, |
| 23 | rounded, |
| 24 | }: ChipProps) { |
| 25 | let colorClassName = ""; |
| 26 | let borderClassName = ""; |
| 27 | let textClassName = ""; |
| 28 | switch (color) { |
| 29 | case "pink": |
| 30 | colorClassName = "bg-[#c41d77]"; |
| 31 | borderClassName = "border-[#c41d77]"; |
| 32 | textClassName = "text-[#c41d77]"; |
| 33 | break; |
| 34 | case "green": |
| 35 | colorClassName = "bg-[#7CB342]"; |
| 36 | borderClassName = "border-[#7CB342]"; |
| 37 | textClassName = "text-[#7CB342]"; |
| 38 | break; |
| 39 | case "yellow": |
| 40 | colorClassName = "bg-[#f09f17]"; |
| 41 | borderClassName = "border-[#f09f17]"; |
| 42 | textClassName = "text-[#f09f17]"; |
| 43 | break; |
| 44 | case "grey": |
| 45 | colorClassName = "bg-[#6E6E6E]"; |
| 46 | borderClassName = "border-[#6E6E6E]"; |
| 47 | textClassName = "text-[#6E6E6E]"; |
| 48 | break; |
| 49 | case "blue": |
| 50 | colorClassName = "bg-blue"; |
| 51 | borderClassName = "border-blue"; |
| 52 | textClassName = "text-blue"; |
| 53 | break; |
| 54 | default: |
| 55 | colorClassName = "bg-current"; |
| 56 | borderClassName = "border-current"; |
| 57 | textClassName = "text-current"; |
| 58 | } |
| 59 | |
| 60 | return ( |
| 61 | <span |
| 62 | className={classNames( |
| 63 | "uppercase p-1 font-bold inline-flex", |
| 64 | empty |
| 65 | ? `${borderClassName} ${textClassName} border-2` |
| 66 | : `${colorClassName} text-white`, |
| 67 | !empty && darkMode && "dark:text-blue-black", |
| 68 | size === "small" ? "text-xs px-1.5 py-1" : "text-sm px-2", |
| 69 | rounded && "rounded-xl", |
| 70 | className |
| 71 | )} |
| 72 | > |
| 73 | {text} |
nothing calls this directly
no outgoing calls
no test coverage detected