chore: dot-migration

Author: tractorss

src/lib/dot.tsx

@@ -1,16 +1,16 @@
-import styled from "styled-components";
-import { borderBox } from "../styles/common-style";
-
+import React from "react";
+import { cn } from "../utils";
 interface DotProps {
   color: string;
+  className?: string;
 }
 
-const Dot = styled.div<DotProps>`
-  ${borderBox}
-  background: ${({ color }) => color};
-  border-radius: 50%;
-  width: 8px;
-  height: 8px;
-`;
-
+function Dot({ color, className }: Readonly<DotProps>) {
+  return (
+    <div
+      style={{ background: color }}
+      className={cn("box-border h-2 w-2 rounded-full", className)}
+    />
+  );
+}
 export default Dot;

src/lib/dropdown/base-item.tsx

@@ -47,10 +47,6 @@ const StyledText = styled.p`
   user-select: none;
 `;
 
-const StyledDot = styled(Dot)`
-  margin-right: 8px;
-`;
-
 const CountDisplay = styled.label`
   width: 24px;
   height: 24px;
@@ -89,7 +85,7 @@ const BaseItem: React.FC<IBaseItem> = ({
     {...{ onClick, ...props }}
   >
     {icon ?? (Icon && <Icon className="item-icon" />)}
-    {dot && <StyledDot color={dot} />}
+    {dot && <Dot className="mr-2" color={dot} />}
     <StyledText>{text}</StyledText>
     {childrenCount !== undefined ? (
       <CountDisplay className="count-display">