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',

src/components/modal/ConfirmModal.tsx

@@ -0,0 +1,56 @@
+import { FC, useEffect } from 'react';
+import { Modal } from './Modal';
+import { PrimaryButton } from '../../components/button/PrimaryButton';
+import { SecondaryButton } from '../../components/button/SecondaryButton';
+
+interface ConfirmModalProps {
+    active: boolean;
+    setActive: (value: boolean) => void;
+    onConfirmClick: () => void;
+    title?: string;
+    message?: string;
+    confirmColor?: 'primary' | 'secondary' | 'error' | 'warning' | 'success';
+    confirmText?: string;
+}
+
+const ConfirmModal: FC<ConfirmModalProps> = ({
+    active,
+    setActive,
+    onConfirmClick,
+    title,
+    message,
+    confirmColor = 'secondary',
+    confirmText = 'Ок',
+}) => {
+    return (
+        <Modal
+            className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white fixed top-0 left-0"
+            onOpenChange={setActive}
+            open={active}
+            backdrop="blur"
+        >
+            <div className="w-[500px]">
+                <div className="font-bold text-[30px]">{title}</div>
+                <div className="font-bold text-[20px] mt-[20px]">{message}</div>
+                <div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
+                    <PrimaryButton
+                        onClick={() => {
+                            onConfirmClick();
+                            setActive(false);
+                        }}
+                        text={confirmText}
+                        color={confirmColor}
+                    />
+                    <SecondaryButton
+                        onClick={() => {
+                            setActive(false);
+                        }}
+                        text="Отмена"
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default ConfirmModal;

src/components/modal/Modal.tsx

@@ -47,7 +47,7 @@ export const Modal: React.FC<ModalProps> = ({
                         exit={modalbgVariants.closed}
                         transition={{ duration: 0.15 }}
                         className={cn(
-                            ' fixed top-0 left-0 h-svh w-svw backdrop-filter transition-all  z-50',
+                            ' fixed top-0 left-0 h-svh w-svw backdrop-filter transition-[background-color,backdrop-filter,opacity]  z-50',
                             backdrop == 'blur' && open && 'backdrop-blur-sm',
                             backdrop == 'opaque' &&
                                 open &&