Jason Woltje
716f230f72
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
40 lines
1007 B
TypeScript
40 lines
1007 B
TypeScript
import type { ReactElement } from "react";
|
|
|
|
export type DotVariant = "teal" | "blue" | "amber" | "red" | "muted";
|
|
|
|
export interface DotProps {
|
|
variant?: DotVariant;
|
|
className?: string;
|
|
}
|
|
|
|
interface DotColorDef {
|
|
bg: string;
|
|
shadow: string;
|
|
}
|
|
|
|
export function Dot({ variant = "muted", className = "" }: DotProps): ReactElement {
|
|
const colors: Record<DotVariant, DotColorDef> = {
|
|
teal: { bg: "var(--success)", shadow: "0 0 5px var(--success)" },
|
|
blue: { bg: "var(--primary)", shadow: "0 0 5px var(--primary)" },
|
|
amber: { bg: "var(--warn)", shadow: "0 0 5px var(--warn)" },
|
|
red: { bg: "var(--danger)", shadow: "0 0 5px var(--danger)" },
|
|
muted: { bg: "var(--muted)", shadow: "none" },
|
|
};
|
|
|
|
const { bg, shadow } = colors[variant];
|
|
|
|
return (
|
|
<span
|
|
className={`inline-block ${className}`}
|
|
style={{
|
|
width: 7,
|
|
height: 7,
|
|
borderRadius: "50%",
|
|
background: bg,
|
|
boxShadow: shadow,
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
);
|
|
}
|