user role controller

src/components/drop-down-list/DropDownList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { cn } from '../../lib/cn';
 import { checkMark, chevroneDropDownList } from '../../assets/icons/input';
 import { useClickOutside } from '../../hooks/useClickOutside';
@@ -14,6 +14,7 @@ interface DropDownListProps {
     onChange: (state: string) => void;
     defaultState?: DropDownListItem;
     items: DropDownListItem[];
+    weight?: string;
 }
 
 export const DropDownList: React.FC<DropDownListProps> = ({
@@ -22,6 +23,7 @@ export const DropDownList: React.FC<DropDownListProps> = ({
     onChange,
     defaultState,
     items = [{ text: '', value: '' }],
+    weight = 'w-[180px]',
 }) => {
     if (items.length == 0) items.push({ text: '', value: '' });
 
@@ -38,13 +40,19 @@ export const DropDownList: React.FC<DropDownListProps> = ({
         setActive(false);
     });
 
+    useEffect(() => {
+        setValue(defaultState != undefined ? defaultState : items[0]);
+    }, [defaultState]);
+
+    console.log(defaultState, items);
     return (
         <div className={cn('relative', className)} ref={ref}>
             <div
                 className={cn(
-                    ' flex items-center h-[40px] rounded-[10px] bg-liquid-lighter px-[16px] w-[180px]',
+                    ' flex items-center h-[40px] rounded-[10px] bg-liquid-lighter px-[16px]',
                     'text-[18px] font-bold cursor-pointer select-none',
                     'transitin-all active:scale-95 duration-300',
+                    weight,
                 )}
                 onClick={() => {
                     setActive(!active);
@@ -63,8 +71,9 @@ export const DropDownList: React.FC<DropDownListProps> = ({
 
             <div
                 className={cn(
-                    ' absolute rounded-[10px] bg-liquid-lighter w-[180px] left-0 top-[48px] z-50 transition-all duration-300',
+                    ' absolute rounded-[10px] bg-liquid-lighter  left-0 top-[48px] z-50 transition-all duration-300',
                     'grid overflow-hidden',
+                    weight,
                     active
                         ? 'grid-rows-[1fr] opacity-100'
                         : 'grid-rows-[0fr] opacity-0',