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

67
src/components/productBox/components/MuiModalBuy.tsx Normal file
View File

@@ -0,0 +1,67 @@
import { Dispatch, SetStateAction } from "react";
import MuiModal from "../../../common/modal";
import Input from "../../input";
import Button from "../../button";
import { PiMinus, PiPlus } from "react-icons/pi";
const MuiModalBuy = ({
isOpen,
setIsOpen,
}: {
isOpen: boolean;
setIsOpen: Dispatch<SetStateAction<boolean>>;
}) => {
return (
<MuiModal
isOpenModal={isOpen}
setIsOpenModal={setIsOpen}
submitText="خرید"
title="خرید سرویس"
nameService="مولتی 1"
>
<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>
</MuiModal>
);
};
export default MuiModalBuy;

4
src/components/productBox/index.tsx
View File

@@ -1,8 +1,8 @@
import { AM, EC, GA, US, GD, GB } from "country-flag-icons/react/1x1";
import { ProductBoxProps } from "../../types/props";
import Button from "../button";
import MuiModal from "../../common/modal";
import { useState } from "react";
import MuiModalBuy from "./components/MuiModalBuy";
const ProductBox = ({
title,
@@ -26,7 +26,7 @@ const ProductBox = ({
: variant === 3 && "shadow-indigo-800 bg-indigo-600"
} bg-cover bg-center bg-banner`}
>
<MuiModal isOpenModal={isOpen} setIsOpenModal={setIsOpen} />
<MuiModalBuy isOpen={isOpen} setIsOpen={setIsOpen} />
<h1 className="max-md:text-xl md:text-2xl font-bold">{title}</h1>
<div className="w-full h-full p-2 flex gap-2 justify-between items-center">
<div className="w-full h-full flex flex-col gap-2">