feat : add progressSpace Components and add in ListConfig

src/components/progressSpace/index.tsx

@@ -0,0 +1,33 @@
+import { motion } from "framer-motion";
+import { ProgressSpaceProps } from "../../types/props";
+
+const ProgressSpace = ({ startSpace, endSpace }: ProgressSpaceProps) => {
+  let startSpacePercentage;
+  if (typeof endSpace === "number") {
+    startSpacePercentage = (startSpace / endSpace) * 100;
+  }
+  return (
+    <div className="relative w-full h-full p-3 bg-gray-800 rounded-md flex gap-2 justify-center items-center">
+      <div className="flex gap-1">
+        <span>حجم </span>
+        <span>{startSpace}</span>
+        <span>GB</span>
+      </div>
+      <div className="w-full rounded-full h-2.5 bg-gray-700">
+        <motion.div
+          className="bg-blue-600 h-2.5 rounded-full"
+          animate={{ width: `${startSpacePercentage}%` }}
+          initial={{ width: 0 }}
+          transition={{ type: "tween", duration: 1 }}
+          style={{ transformOrigin: "right" }}
+        ></motion.div>
+      </div>
+      <div className="flex flex-row-reverse gap-1">
+        <span> {endSpace}</span>
+        <span>GB</span>
+      </div>
+    </div>
+  );
+};
+
+export default ProgressSpace;

src/pages/profile/section/components/ConfigItem.tsx

@@ -3,9 +3,16 @@ import Button from "../../../../components/button";
 import { ConfigItemProps } from "../../../../types/props";
 import ModalConfigDetails from "./ModalConfigDetails";
 import { useState } from "react";
+import Dropdown, { DropdownItem } from "../../../../components/dropdown";
+import ProgressSpace from "../../../../components/progressSpace";
 
 const ConfigItem = ({ dateBuy, configName, isDisabled }: ConfigItemProps) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [isOpenDropDown, setIsOpenDropDown] = useState(false);
+  const handleToggle = () => {
+    setIsOpenDropDown(!isOpen);
+  };
+
   return (
     <>
       <ModalConfigDetails
@@ -40,12 +47,27 @@ const ConfigItem = ({ dateBuy, configName, isDisabled }: ConfigItemProps) => {
             {configName}
           </li>
           <div className="max-md:hidden flex flex-row-reverse gap-2 justify-end items-center">
-            <Button extra="!m-0 !px-2 !py-1.5 shadow-md shadow-white">
+            <Button extra="!m-0 !px-2 !py-1.5 flex flex-row-reverse justify-center items-center gap-1 shadow-md shadow-white">
+              کپی
               <IoCopy />
             </Button>
-            <Button extra="!m-0 !px-2 !py-1 shadow-md shadow-white">
+            <Button extra="!m-0 !px-2 !py-1.5 shadow-md shadow-white">
               آموزش
             </Button>
+            <Dropdown isOpen={isOpenDropDown} setIsOpen={setIsOpenDropDown}>
+              <Button
+                id="dropdownDefaultButton"
+                data-dropdown-toggle="dropdown"
+                type="button"
+                onClick={handleToggle}
+                extra="!m-0 !px-2 !py-1.5 shadow-md shadow-white"
+              >
+                حجم
+              </Button>
+              <DropdownItem widthTailwind="w-[20rem] left-0">
+                <ProgressSpace startSpace={100} endSpace={200} />
+              </DropdownItem>
+            </Dropdown>
           </div>
           <div className="md:hidden flex flex-row-reverse gap-2 justify-end items-center">
             <Button

src/pages/profile/section/components/ModalConfigDetails.tsx

@@ -3,6 +3,7 @@ import MuiModal from "../../../../common/modal";
 import Button from "../../../../components/button";
 import { IoCopy } from "react-icons/io5";
 import Alert from "../../../../components/alert/Alert";
+import ProgressSpace from "../../../../components/progressSpace";
 
 const ModalConfigDetails = ({
   isOpen,
@@ -36,15 +37,21 @@ const ModalConfigDetails = ({
             </Button>
           ) : (
             <>
-              <Button extra="!m-0 !px-2 !py-1.5 shadow-md shadow-white">
+              <Button extra="!m-0 !px-2 !py-1.5 flex flex-row-reverse justify-center items-center gap-1 shadow-md shadow-white">
+                کپی
                 <IoCopy />
               </Button>
-              <Button extra="!m-0 !px-2 !py-1 shadow-md shadow-white">
+              <Button extra="!m-0 !px-2 !py-1.5 shadow-md shadow-white">
                 آموزش
               </Button>
             </>
           )}
         </div>
+        {!isDisabled && (
+          <div className="w-full h-full">
+            <ProgressSpace startSpace={100} endSpace={200} />
+          </div>
+        )}
       </div>
     </MuiModal>
   );

src/types/props.d.ts

@@ -8,9 +8,8 @@ export interface AlertProps {
 }
 
 // begin Button.tsx
-export interface ButtonProps {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
-  onClick?: () => void;
   extra?: string;
   active?: boolean;
 }
@@ -50,7 +49,14 @@ export interface NavData {
 }
 
 // begin ListTutorial.tsx
-import React, { Component, InputHTMLAttributes, SetStateAction } from "react";
+import React, {
+  ButtonHTMLAttributes,
+  Component,
+  Dispatch,
+  InputHTMLAttributes,
+  ReactNode,
+  SetStateAction,
+} from "react";
 
 export type TutorialList = { id: number; name: string }[];
 
@@ -112,3 +118,20 @@ export interface ConfigItemProps {
   isDisabled: boolean;
 }
 
+// نوع Item برای آیتم‌های داخل Dropdown
+export interface DropdownItem {
+  label: string;
+  value: string;
+  onClick: () => void;
+}
+
+export interface DropdownProps {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  children: ReactNode | ReactNode[];
+}
+
+export interface ProgressSpaceProps {
+  startSpace: number;
+  endSpace: number | "ultimate";
+}