componenets standardization 1

frontend/src/components/ui/list/List.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import Checkbox from "../../form/input/Checkbox";
 
 interface ListProps {
   children: ReactNode;
@@ -134,23 +135,13 @@ export const ListCheckboxItem: React.FC<ListCheckboxItemProps> = ({
 }) => {
   return (
     <li className={`border-b border-gray-200 px-3 py-2.5 last:border-b-0 dark:border-gray-800 ${className}`}>
-      <div className="flex items-center gap-2">
-        <label className="flex items-center space-x-3 group cursor-pointer">
-          <div className="relative w-5 h-5">
-            <input
-              id={id}
-              className="w-5 h-5 appearance-none cursor-pointer dark:border-gray-700 border border-gray-300 checked:border-transparent rounded-md checked:bg-brand-500 disabled:opacity-60"
-              type="checkbox"
-              checked={checked}
-              disabled={disabled}
-              onChange={(e) => onChange?.(e.target.checked)}
-            />
-          </div>
-        </label>
-        <label htmlFor={id} className="flex items-center text-sm text-gray-500 cursor-pointer select-none dark:text-gray-400">
-          {label}
-        </label>
-      </div>
+      <Checkbox
+        id={id}
+        label={label}
+        checked={checked}
+        disabled={disabled}
+        onChange={(val) => onChange?.(val)}
+      />
     </li>
   );
 };