From 5300f9ec0109227000dfbf6e0375922f6ef85aae Mon Sep 17 00:00:00 2001 From: ali josheghani Date: Thu, 6 Jun 2024 09:55:28 +0330 Subject: [PATCH] feat : add page profile (private component) and add section , modal for profile page --- src/App.tsx | 7 +- src/common/modal/index.tsx | 55 +++------------ src/components/button/index.tsx | 3 +- src/components/input/index.tsx | 3 +- .../productBox/components/MuiModalBuy.tsx | 67 +++++++++++++++++++ src/components/productBox/index.tsx | 4 +- src/pages/profile/index.tsx | 13 ++++ .../profile/section/ProductConfigList.tsx | 33 +++++++++ src/pages/profile/section/ProfileDetails.tsx | 60 +++++++++++++++++ .../profile/section/components/ConfigItem.tsx | 34 ++++++++++ .../section/components/ModalEditProfile.tsx | 26 +++++++ src/routes/PrivateRoute.tsx | 4 +- src/types/props.d.ts | 16 ++++- 13 files changed, 267 insertions(+), 58 deletions(-) create mode 100644 src/components/productBox/components/MuiModalBuy.tsx create mode 100644 src/pages/profile/index.tsx create mode 100644 src/pages/profile/section/ProductConfigList.tsx create mode 100644 src/pages/profile/section/ProfileDetails.tsx create mode 100644 src/pages/profile/section/components/ConfigItem.tsx create mode 100644 src/pages/profile/section/components/ModalEditProfile.tsx diff --git a/src/App.tsx b/src/App.tsx index 6edf9a0..46e2049 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,7 @@ import About from "./pages/about"; import ProgressBar from "./common/ProgressBar"; import AuthLayout from "./layout/AuthLayout"; import Login from "./pages/login"; +import Profile from "./pages/profile"; const App = () => { return ( @@ -19,11 +20,11 @@ const App = () => { } /> } /> } /> - }> - private

} /> + }> + } /> - } > + } > } /> diff --git a/src/common/modal/index.tsx b/src/common/modal/index.tsx index 1569be6..2ce266e 100644 --- a/src/common/modal/index.tsx +++ b/src/common/modal/index.tsx @@ -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({ >

- خرید سرویس مولتی 1 + {title} {nameService && {nameService} }

-
-

- مبلغ قابل پرداخت :{" "} - - 100/000 - -

-

- در صورت نداشتن کد تخفیف پرداخت رو بزنید -

-
-
- - -
-
-

تعداد:

-
- - - -
-
-
-
-

حجم :

-

10 گیگ

-
-
-

محدودیت کاربر :

-

بدون محدودیت

-
-
-

مدت زمان :

-

یک ماه

-
-
+ {children} - + diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx index 344230a..ef084ea 100644 --- a/src/components/button/index.tsx +++ b/src/components/button/index.tsx @@ -1,6 +1,6 @@ import { ButtonProps } from "../../types/props"; -function Button({ children, onClick, extra, active }: ButtonProps) { +function Button({ children, onClick, extra, active,...attrs }: ButtonProps) { return ( diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx index f5c49d0..1d9ee6d 100644 --- a/src/components/input/index.tsx +++ b/src/components/input/index.tsx @@ -6,6 +6,7 @@ const Input = ({ type, name, placeholder, + labelStyle, extra, ...attrs }: InputProps) => { @@ -14,7 +15,7 @@ const Input = ({ {label && ( diff --git a/src/components/productBox/components/MuiModalBuy.tsx b/src/components/productBox/components/MuiModalBuy.tsx new file mode 100644 index 0000000..4b7f205 --- /dev/null +++ b/src/components/productBox/components/MuiModalBuy.tsx @@ -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>; +}) => { + return ( + +
+

+ مبلغ قابل پرداخت :{" "} + + 100/000 + +

+

+ در صورت نداشتن کد تخفیف پرداخت رو بزنید +

+
+
+ + +
+
+

تعداد:

+
+ + + +
+
+
+
+

حجم :

+

10 گیگ

+
+
+

محدودیت کاربر :

+

بدون محدودیت

+
+
+

مدت زمان :

+

یک ماه

+
+
+ + ); +}; + +export default MuiModalBuy; diff --git a/src/components/productBox/index.tsx b/src/components/productBox/index.tsx index b3b42fa..493154e 100644 --- a/src/components/productBox/index.tsx +++ b/src/components/productBox/index.tsx @@ -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`} > - +

{title}

diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx new file mode 100644 index 0000000..7dd534a --- /dev/null +++ b/src/pages/profile/index.tsx @@ -0,0 +1,13 @@ +import ProfileDetails from "./section/ProfileDetails"; +import ProductConfigList from "./section/ProductConfigList"; + +const Profile = () => { + return ( +
+ + +
+ ); +}; + +export default Profile; diff --git a/src/pages/profile/section/ProductConfigList.tsx b/src/pages/profile/section/ProductConfigList.tsx new file mode 100644 index 0000000..46e23ed --- /dev/null +++ b/src/pages/profile/section/ProductConfigList.tsx @@ -0,0 +1,33 @@ +import ConfigItem from "./components/ConfigItem"; + +const ProductConfigList = () => { + return ( +
+

+ لیست کانفیگ ها +

+
+ + + +
+
+ ); +}; + +export default ProductConfigList; diff --git a/src/pages/profile/section/ProfileDetails.tsx b/src/pages/profile/section/ProfileDetails.tsx new file mode 100644 index 0000000..df7afad --- /dev/null +++ b/src/pages/profile/section/ProfileDetails.tsx @@ -0,0 +1,60 @@ +import { MdEdit } from "react-icons/md"; +import Button from "../../../components/button"; +import ModalEditProfile from "./components/ModalEditProfile"; +import { useState } from "react"; + +const ProfileDetails = () => { + return ( +
+ + + +
+ ); +}; + +export default ProfileDetails; + +const EditProfile = () => { + const [isOpen, setIsOpen] = useState(false); + return ( +
+ + +
+ ); +}; + +const ProfileImage = () => { + return ( +
+
+ + + +
+
+ ); +}; + +const ProductDetails = () => { + return ( +
+
+

+ کانفیگ های فعال :{" "} + 2 +

+

+ کانفیگ های غیر فعال :{" "} + 10 +

+
+
+ ); +}; diff --git a/src/pages/profile/section/components/ConfigItem.tsx b/src/pages/profile/section/components/ConfigItem.tsx new file mode 100644 index 0000000..57e9a75 --- /dev/null +++ b/src/pages/profile/section/components/ConfigItem.tsx @@ -0,0 +1,34 @@ +import { IoCopy } from "react-icons/io5"; +import Button from "../../../../components/button"; +import { ConfigItemProps } from "../../../../types/props"; + +const ConfigItem = ({ dateBuy, configName, isDisabled }: ConfigItemProps) => { + return ( +
+ {isDisabled && ( +
+

+ کانفیگ {configName} غیر فعال است +

+
+ )} +
+

تاریخ خرید : {dateBuy}

+
  • + {configName} +
    • +
    + + +
    +
    +
    + ); +}; +export default ConfigItem; diff --git a/src/pages/profile/section/components/ModalEditProfile.tsx b/src/pages/profile/section/components/ModalEditProfile.tsx new file mode 100644 index 0000000..239d793 --- /dev/null +++ b/src/pages/profile/section/components/ModalEditProfile.tsx @@ -0,0 +1,26 @@ +import { Dispatch, SetStateAction } from "react"; +import MuiModal from "../../../../common/modal"; +import Input from "../../../../components/input"; + +const ModalEditProfile = ({ + isOpen, + setIsOpen, +}: { + isOpen: boolean; + setIsOpen: Dispatch>; +}) => { + return ( + +
    + +
    +     + ); +}; + +export default ModalEditProfile; diff --git a/src/routes/PrivateRoute.tsx b/src/routes/PrivateRoute.tsx index a49d0c7..ec6d86e 100644 --- a/src/routes/PrivateRoute.tsx +++ b/src/routes/PrivateRoute.tsx @@ -1,8 +1,8 @@ -import { Navigate } from "react-router-dom"; +import { Navigate, Outlet } from "react-router-dom"; import { isAuthenticated } from "../utils/auth"; const PrivateRoute = () => { - return !isAuthenticated() && ; + return !isAuthenticated() ? : ; }; export default PrivateRoute; diff --git a/src/types/props.d.ts b/src/types/props.d.ts index 9963ef4..245592f 100644 --- a/src/types/props.d.ts +++ b/src/types/props.d.ts @@ -50,7 +50,7 @@ export interface NavData { } // begin ListTutorial.tsx -import { Component, InputHTMLAttributes, SetStateAction } from "react"; +import React, { Component, InputHTMLAttributes, SetStateAction } from "react"; export type TutorialList = { id: number; name: string }[]; @@ -92,10 +92,22 @@ export interface InputProps extends InputHTMLAttributes { type: string; name?: string; placeholder?: string; + labelStyle?: string; extra?: string; } export interface MuiModalProps { isOpenModal: boolean; - setIsOpenModal:SetStateAction + setIsOpenModal: SetStateAction; + title: string; + nameService?: string; + submitText: string; + submitOnClick?: () => void; + children: React.ReactNode; +} + +export interface ConfigItemProps { + dateBuy: string; + configName: string; + isDisabled: boolean; }