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

feat : add page profile (private component) and add section , modal for profile page

Browse Source
This commit is contained in:
ali josheghani
2024-06-06 09:55:28 +03:30
parent 18cc4948e6
commit 5300f9ec01
13 changed files with 267 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/common/modal/index.tsx
View File

@@ -4,13 +4,15 @@ import { motion } from "framer-motion";
import { IoClose } from "react-icons/io5";
import Button from "../../components/button";
import { MuiModalProps } from "../../types/props";
import { useNavigate } from "react-router-dom";
import Input from "../../components/input";
import { PiMinus, PiPlus } from "react-icons/pi";
export default function MuiModal({
isOpenModal,
setIsOpenModal,
title,
nameService,
submitText,
submitOnClick,
children,
}: MuiModalProps) {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
@@ -18,7 +20,6 @@ export default function MuiModal({
setOpen(false);
setIsOpenModal(false);
};
const navigate = useNavigate();
useEffect(() => {
if (isOpenModal) handleOpen();
@@ -41,58 +42,18 @@ export default function MuiModal({
>
<motion.div className="w-full h-full flex justify-between">
<h1 className="text-lg md:text-xl font-bold">
خرید سرویس <span className="text-green-600"> مولتی 1 </span>
{title} {nameService && <span className="text-green-600"> {nameService} </span>}
</h1>
<button onClick={handleClose}>
<IoClose className="w-7 h-7" />
</button>
</motion.div>
<motion.div className="w-full h-full flex flex-col justify-between text-center items-center">
<div className="w-full h-full px-2 py-2 flex flex-col gap-3">
<h1 className="text-lg md:text-xl">
مبلغ قابل پرداخت :{" "}
<span className="px-2 py-[1px] rounded-md bg-secondTheme text-black">
100/000
</span>
</h1>
<p className="text-sm md:text-base text-gray-500">
در صورت نداشتن کد تخفیف پرداخت رو بزنید
</p>
</div>
<div className="w-full h-full p-2 flex gap-2 justify-center">
<Input type="text" id="1" name="offer" />
<Button extra="!bg-green-600"> اعمال </Button>
</div>
<div className="w-full h-full px-4 py-2 flex gap-3 justify-center">
<p className="text-sm md:text-base text-gray-500">تعداد:</p>
<div className="bg-gray-700 rounded-md flex justify-between gap-1 items-center px-1">
<PiMinus className="cursor-pointer" />
<input
type="number"
className="w-10 bg-transparent focus:ring-0 outline-none border-none ring-0"
value={1}
/>
<PiPlus className="cursor-pointer" />
</div>
</div>
<div className="w-full h-full px-4 py-2 flex flex-col gap-3 justify-center">
<div className="flex justify-between px-4 py-1 shadow-md shadow-gray-800 rounded-md bg-gray-800">
<p className="text-sm md:text-base">حجم :</p>
<p className="text-sm md:text-base">10 گیگ</p>
</div>
<div className="flex justify-between px-4 py-1 shadow-md shadow-gray-800 rounded-md bg-gray-800">
<p className="text-sm md:text-base">محدودیت کاربر :</p>
<p className="text-sm md:text-base">بدون محدودیت</p>
</div>
<div className="flex justify-between px-4 py-1 shadow-md shadow-gray-800 rounded-md bg-gray-800">
<p className="text-sm md:text-base">مدت زمان :</p>
<p className="text-sm md:text-base">یک ماه</p>
</div>
</div>
{children}
</motion.div>
<motion.div className="w-full h-full flex justify-end items-center gap-2 md:gap-3 text-lg md:text-xl">
<Button onClick={() => handleClose()}> بستن </Button>
<Button onClick={() => navigate("login")}> باشه </Button>
<Button onClick={submitOnClick}> {submitText} </Button>
</motion.div>
</motion.div>
</Modal>