Create check list

2026-06-17 10:57:52 +03:30
parent 908f5e72ed
commit c62e958e91
8 changed files with 162 additions and 60 deletions
@@ -1,62 +1,45 @@
-import { FC, SelectHTMLAttributes } from 'react'
-import { clx } from '../helpers/utils'
-import { ArrowDown2 } from 'iconsax-react'
-import Error from './Error'
+import { ArrowDown2 } from "iconsax-react";
+import { FC, SelectHTMLAttributes } from "react";
+import { clx } from "../helpers/utils";
+import Error from "./Error";

 export type ItemsSelectType = {
-    value: string,
-    label: string,
-}
+  value: string;
+  label: string;
+};
 type Props = {
-    className?: string,
-    items: ItemsSelectType[],
-    error_text?: string,
-    placeholder?: string,
-    label?: string,
-} & SelectHTMLAttributes<HTMLSelectElement>
+  className?: string;
+  items: ItemsSelectType[];
+  error_text?: string;
+  placeholder?: string;
+  label?: string;
+  labelClassName?: string;
+} & SelectHTMLAttributes<HTMLSelectElement>;

 const Select: FC<Props> = (props: Props) => {
-    return (
-        <div className='w-full relative'>
-            {
-                props.label &&
-                <label className='text-sm'>
-                    {props.label}
-                </label>
-            }
-            <select {...props} className={clx(
-                'w-full text-black block border appearance-none border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray',
-                props.className,
-                props.label && 'mt-1'
-            )}>
-                {
-                    props.placeholder &&
-                    <option value="" disabled selected={!props.value}>{props.placeholder}</option>
-                }
-                {
-                    props.items?.map((item) => {
-                        return (
-                            <option key={item.value} value={item.value}>
-                                {item.label}
-                            </option>
-                        )
-                    })
-                }
-            </select>
-            <ArrowDown2 size={16} color='black' className={clx(
-                'absolute z-0 top-3 left-2',
-                props.label && 'top-10'
-            )} />
-            {
-                props.error_text && props.error_text !== '' ?
-                    <Error
-                        errorText={props.error_text}
-                    />
-                    : null
-            }
-        </div>
+  return (
+    <div className="w-full relative">
+      {props.label && <label className={clx("text-sm", props.labelClassName)}>{props.label}</label>}
+      <div className={clx("relative", props.label && "mt-1")}>
+        <select {...props} className={clx("w-full text-black block border appearance-none border-border px-2.5 h-10 text-sm rounded-2.5 bg-gray", props.className)}>
+          {props.placeholder && (
+            <option value="" disabled selected={!props.value}>
+              {props.placeholder}
+            </option>
+          )}
+          {props.items?.map((item) => {
+            return (
+              <option key={item.value} value={item.value}>
+                {item.label}
+              </option>
+            );
+          })}
+        </select>
+        <ArrowDown2 size={16} color="black" className="absolute z-0 top-0 bottom-0 my-auto left-2" />
+      </div>
+      {props.error_text && props.error_text !== "" ? <Error errorText={props.error_text} /> : null}
+    </div>
+  );
+};

-    )
-}
-
-export default Select
+export default Select;