34 lines
624 B
TypeScript
34 lines
624 B
TypeScript
import type { CSSProperties } from "react";
|
|
|
|
export const DotSizes = ["xs", "sm", "md", "lg"] as const;
|
|
export type DotSize = (typeof DotSizes)[number];
|
|
|
|
const DOT_SIZE_PX: Record<DotSize, string> = {
|
|
xs: "2px",
|
|
sm: "4px",
|
|
md: "8px",
|
|
lg: "12px",
|
|
};
|
|
|
|
interface DotProps {
|
|
color?: string;
|
|
size?: DotSize;
|
|
style?: CSSProperties;
|
|
}
|
|
|
|
export const Dot = ({ color = "gray", size = "sm", style }: DotProps) => {
|
|
return (
|
|
<span
|
|
style={{
|
|
content: '""',
|
|
width: DOT_SIZE_PX[size],
|
|
height: DOT_SIZE_PX[size],
|
|
borderRadius: "50%",
|
|
backgroundColor: color,
|
|
opacity: 0.8,
|
|
...style,
|
|
}}
|
|
/>
|
|
);
|
|
};
|