48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { MdEdit } from "react-icons/md";
|
||
import Button from "../../../components/button";
|
||
import ModalEditProfile from "./components/ModalEditProfile";
|
||
import { useState } from "react";
|
||
|
||
const ProfileDetails = () => {
|
||
return (
|
||
<div className="relative z-[10] w-full h-32 max-md:h-20 flex flex-row-reverse justify-between glass items-center py-2 px-4">
|
||
<EditProfile />
|
||
<ProductDetails />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ProfileDetails;
|
||
|
||
const EditProfile = () => {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
return (
|
||
<div className="w-full h-full flex justify-end items-center">
|
||
<ModalEditProfile isOpen={isOpen} setIsOpen={setIsOpen} />
|
||
<Button
|
||
extra="!py-4 max-md:!py-2 max-md:px-2"
|
||
onClick={() => setIsOpen(true)}
|
||
>
|
||
<MdEdit className="scale-[1.4] max-md:scale-100" />
|
||
</Button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const ProductDetails = () => {
|
||
return (
|
||
<div className="w-full h-full flex justify-start items-center">
|
||
<div className="md:mr-4 w-auto h-auto flex flex-col max-md:text-[12px] text-lg md:gap-2">
|
||
<p className="text-nowrap">
|
||
کانفیگ های فعال :{" "}
|
||
<span className="px-1 md:px-2 rounded-md bg-green-600"> 2 </span>
|
||
</p>
|
||
<p className="text-nowrap">
|
||
کانفیگ های غیر فعال :{" "}
|
||
<span className="px-1 md:px-2 rounded-md bg-yellow-400"> 10 </span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|