diff --git a/src/common/modal/index.tsx b/src/common/modal/index.tsx new file mode 100644 index 0000000..f3064c5 --- /dev/null +++ b/src/common/modal/index.tsx @@ -0,0 +1,5 @@ +const Modal = () => { + return
index
; +}; + +export default Modal; diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx index e0693fb..1b24a13 100644 --- a/src/components/button/index.tsx +++ b/src/components/button/index.tsx @@ -1,9 +1,13 @@ import { ButtonProps } from "../../types/props"; -function Button({ children, onClick, extra }: ButtonProps) { +function Button({ children, onClick, extra, active }: ButtonProps) { return ( + + + ); +}; + +export default ProductBox; diff --git a/src/components/pulsatingCircle/index.tsx b/src/components/pulsatingCircle/index.tsx index 5e72c3c..8acdf03 100644 --- a/src/components/pulsatingCircle/index.tsx +++ b/src/components/pulsatingCircle/index.tsx @@ -2,11 +2,11 @@ import { FC } from "react"; const PulsatingCircle: FC = () => { return ( -
-
- 1 +
+
+ 1
-
+
); }; diff --git a/src/pages/shop/index.tsx b/src/pages/shop/index.tsx index 77c2785..b52abe0 100644 --- a/src/pages/shop/index.tsx +++ b/src/pages/shop/index.tsx @@ -1,6 +1,8 @@ +import BestQuality from "./section/bestQuality/BestQuality"; import FastSell from "./section/fastSell/FastSell"; import Intro from "./section/intro/Intro"; import NowSell from "./section/nowSell/NowSell"; +import ProductList from "./section/productList/ProductList"; const Shop = () => { return ( @@ -9,6 +11,8 @@ const Shop = () => { + +
); diff --git a/src/pages/shop/section/bestQuality/BestQuality.tsx b/src/pages/shop/section/bestQuality/BestQuality.tsx new file mode 100644 index 0000000..acd5841 --- /dev/null +++ b/src/pages/shop/section/bestQuality/BestQuality.tsx @@ -0,0 +1,25 @@ +import PulsatingCircle from "../../../../components/pulsatingCircle"; + +const BestQuality = () => { + return ( +
+
+ +
+
+

+ به عنوان{" "} + + اولین و بهترین + {" "} + ارائه دهنده{" "} +

+

+ مفتخریم که در خدمت شما باشیم +

+
+
+ ); +}; + +export default BestQuality; diff --git a/src/pages/shop/section/intro/Intro.tsx b/src/pages/shop/section/intro/Intro.tsx index ccb6116..e3537e2 100644 --- a/src/pages/shop/section/intro/Intro.tsx +++ b/src/pages/shop/section/intro/Intro.tsx @@ -1,5 +1,7 @@ import Button from "../../../../components/button"; +import Rocket3D from "../../../../assets/ui/Rocket.png"; + const Intro = () => { return (
@@ -18,9 +20,9 @@ const Intro = () => {
intro
diff --git a/src/pages/shop/section/productList/ProductList.tsx b/src/pages/shop/section/productList/ProductList.tsx index e3c72e6..06542a5 100644 --- a/src/pages/shop/section/productList/ProductList.tsx +++ b/src/pages/shop/section/productList/ProductList.tsx @@ -1,5 +1,30 @@ +import { useState } from "react"; +import ButtonList from "./components/ButtonList"; +import ListAllProduct from "./components/ListAllProduct"; + const ProductList = () => { - return
; + const [activeId, setActiveId] = useState(1); + const ProductsList = [ + { id: 1, title: "سرویس اشتراکی" }, + { id: 2, title: "سرویس گیمینگ" }, + { id: 3, title: "سرویس مولتی" }, + ]; + return ( +
+
+

+ برای انتخاب پلن مورد نظر کلیک کنید تا پلن و سرویس ها براتون نمایش داده + شود +

+ + +
+
+ ); }; export default ProductList; diff --git a/src/pages/shop/section/productList/components/ButtonList.tsx b/src/pages/shop/section/productList/components/ButtonList.tsx new file mode 100644 index 0000000..2cc254d --- /dev/null +++ b/src/pages/shop/section/productList/components/ButtonList.tsx @@ -0,0 +1,27 @@ +import Button from "../../../../../components/button"; +import { ButtonListProps } from "../../../../../types/props"; + +const ButtonList = ({ + ProductsList, + activeId, + setActiveId, +}: ButtonListProps) => { + return ( +
+ {ProductsList?.map((i) => { + return ( + + ); + })} +
+ ); +}; + +export default ButtonList; diff --git a/src/pages/shop/section/productList/components/ListAllProduct.tsx b/src/pages/shop/section/productList/components/ListAllProduct.tsx new file mode 100644 index 0000000..a11dbc7 --- /dev/null +++ b/src/pages/shop/section/productList/components/ListAllProduct.tsx @@ -0,0 +1,90 @@ +import { Fragment, useEffect, useState } from "react"; +import ProductBox from "../../../../../components/productBox"; + +const ListAllProduct = ({ activeId }: { activeId: number }) => { + const Product = [ + { + id: 1, + data: [ + { id: 1, title: "مولتی سرور ۱", users: 2, price: "100/000", space: 40 }, + { id: 2, title: "مولتی سرور ۲", users: 2, price: "200/000", space: 60 }, + { + id: 3, + title: "مولتی سرور ۳", + users: 1, + price: "300/000", + space: 100, + }, + { id: 4, title: "مولتی سرور ۴", users: 3, price: "400/000", space: 50 }, + ], + }, + { + id: 2, + data: [ + { + id: 1, + title: " کاهش پینگ ۱", + users: 2, + price: "1/000/000", + space: 40, + }, + { id: 2, title: "کاهش پینگ ۲", users: 2, price: "500/000", space: 60 }, + { + id: 3, + title: "کاهش پینگ ۳", + users: 1, + price: "800/000", + space: 100, + }, + { id: 4, title: "کاهش پینگ ۴", users: 3, price: "200/000", space: 50 }, + ], + }, + { + id: 3, + data: [ + { id: 1, title: " سرور بازی ۱", users: 2, price: "50/000", space: 40 }, + { id: 2, title: "سرور بازی ۲", users: 2, price: "100/000", space: 60 }, + { + id: 3, + title: "سرور بازی ۳", + users: 1, + price: "700/000", + space: 100, + }, + { id: 4, title: "سرور بازی ۴", users: 3, price: "350/000", space: 50 }, + ], + }, + ]; + const [dataProduct, setDataProduct] = useState( + Product?.filter((i) => i.id === activeId) + ); + useEffect(() => { + setDataProduct(Product?.filter((i) => i.id === activeId)); + }, [activeId]); + + return ( +
+ {dataProduct?.map((item) => { + return ( + + {item.data?.map((i) => { + return ( + + ); + })} + + ); + })} +
+ ); +}; + +export default ListAllProduct; diff --git a/src/types/props.d.ts b/src/types/props.d.ts index 41eecce..da968b1 100644 --- a/src/types/props.d.ts +++ b/src/types/props.d.ts @@ -12,6 +12,7 @@ export interface ButtonProps { children: React.ReactNode; onClick?: () => void; extra?: string; + active?: boolean; } // begin Route @@ -49,7 +50,7 @@ export interface NavData { } // begin ListTutorial.tsx -import { SetStateAction } from "react"; +import { Component, SetStateAction } from "react"; export type TutorialList = { id: number; name: string }[]; @@ -69,3 +70,18 @@ interface TypewriterProps { text: string; speed?: number; // سرعت تایپ در میلی‌ثانیه } + +interface ButtonListProps { + ProductsList: { id: number; title: string }[]; + activeId: number; + setActiveId: SetStateAction; +} + +interface ProductBoxProps { + title: string; + space: number; + users: number; + price: string; + btnText: string; + variant: number; +}