check list

src/components/ProgressBar.tsx

@@ -0,0 +1,18 @@
+import { type FC } from "react";
+
+type Props = {
+  value: number;
+  className?: string;
+};
+
+const ProgressBar: FC<Props> = ({ value, className = "" }) => {
+  const progress = Math.min(100, Math.max(0, value));
+
+  return (
+    <div className={`flex-1 h-[5px] rounded-full bg-white/40 flex overflow-hidden ${className}`}>
+      <div className="h-full rounded-full bg-black" style={{ width: `${progress}%` }} />
+    </div>
+  );
+};
+
+export default ProgressBar;

src/components/TrashWithConfrim.tsx

@@ -1,30 +1,23 @@
-import { Trash } from 'iconsax-react'
-import { FC, useState } from 'react'
-import ModalConfrim from './ModalConfrim'
+import { Trash } from "iconsax-react";
+import { FC, useState } from "react";
+import ModalConfrim from "./ModalConfrim";
 
 interface Props {
-    onDelete: () => void,
-    isLoading?: boolean
+  onDelete: () => void;
+  isLoading?: boolean;
+  size?: number;
+  color?: string;
 }
 
-const TrashWithConfrim: FC<Props> = ({ onDelete, isLoading = false }) => {
-    const [isConfirm, setIsConfirm] = useState(false)
-    return (
-        <div>
-            <Trash
-                onClick={() => setIsConfirm(true)}
-                className='size-5'
-                color='#888'
-            />
+const TrashWithConfrim: FC<Props> = ({ onDelete, isLoading = false, size = 20, color = "#888" }) => {
+  const [isConfirm, setIsConfirm] = useState(false);
+  return (
+    <div>
+      <Trash onClick={() => setIsConfirm(true)} color={color} size={size} />
 
-            <ModalConfrim
-                isOpen={isConfirm}
-                close={() => setIsConfirm(false)}
-                onConfrim={() => onDelete()}
-                isLoading={isLoading}
-            />
-        </div>
-    )
-}
+      <ModalConfrim isOpen={isConfirm} close={() => setIsConfirm(false)} onConfrim={() => onDelete()} isLoading={isLoading} />
+    </div>
+  );
+};
 
-export default TrashWithConfrim
+export default TrashWithConfrim;