| 182 | } |
| 183 | |
| 184 | const CircularUI = ({ label, circles, className }: CircularUIProps) => ( |
| 185 | <div className={className}> |
| 186 | <div className="bg-linear-to-b from-border size-fit rounded-2xl to-transparent p-px"> |
| 187 | <div className="bg-linear-to-b from-background to-muted/25 relative flex aspect-square w-fit items-center -space-x-4 rounded-[15px] p-4"> |
| 188 | {circles.map((circle, i) => ( |
| 189 | <div |
| 190 | key={i} |
| 191 | className={cn("size-7 rounded-full border sm:size-8", { |
| 192 | "border-primary": circle.pattern === "none", |
| 193 | "border-primary bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_4px)]": |
| 194 | circle.pattern === "border", |
| 195 | "border-primary bg-background bg-[repeating-linear-gradient(-45deg,var(--color-primary),var(--color-primary)_1px,transparent_1px,transparent_4px)]": |
| 196 | circle.pattern === "primary", |
| 197 | "bg-background z-1 border-blue-500 bg-[repeating-linear-gradient(-45deg,var(--color-blue-500),var(--color-blue-500)_1px,transparent_1px,transparent_4px)]": |
| 198 | circle.pattern === "blue", |
| 199 | })} |
| 200 | ></div> |
| 201 | ))} |
| 202 | </div> |
| 203 | </div> |
| 204 | <span className="text-muted-foreground mt-1.5 block text-center text-sm"> |
| 205 | {label} |
| 206 | </span> |
| 207 | </div> |
| 208 | ); |