soheilkhaledabadi/persian-ping-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : add progressSpace Components and add in ListConfig

Browse Source
This commit is contained in:
alij
2024-06-08 23:45:05 -07:00
parent 7ef23521c0
commit 0c28e72536
4 changed files with 92 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/profile/section/components/ConfigItem.tsx
View File

@@ -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

11
src/pages/profile/section/components/ModalConfigDetails.tsx
View File

@@ -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>
);