feat : completed turotial page with fake data

src/pages/tutorial/index.tsx

@@ -1,11 +1,11 @@
-import Alert from "../../components/alert/Alert";
+import Tutorials from "./section/Tutorials";
 
 const Tutorial = () => {
   return (
-    <div className="relative w-full h-full px-4 py-2">
+    <div className="relative w-full h-full py-2">
-      <Alert type="success" message="">
+      <div className="relative w-full h-full glass px-4 py-2">
-        به زودی صفحه اموزش اضافه می شود
+        <Tutorials />
-      </Alert>
+      </div>
     </div>
   );
 };

src/pages/tutorial/section/Tutorials.tsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import Learn from "./components/Leran";
+import ListTutorials from "./components/ListTutorial";
+import { TutorialList } from "../../../types/props";
+
+const Tutorials = () => {
+  const tutorialList: TutorialList = [
+    {
+      id: 1,
+      name: "آموزش اشتراکی اندروید",
+    },
+    {
+      id: 2,
+      name: "آموزش اشتراکی آیفون",
+    },
+    {
+      id: 3,
+      name: "آموزش cisco در اندروید",
+    },
+    {
+      id: 4,
+      name: "آموزش cisco در آیفون",
+    },
+    {
+      id: 5,
+      name: "آموزش سرویس مولتی",
+    },
+    {
+      id: 6,
+      name: "آموزش cisco در ویندوز",
+    },
+    {
+      id: 7,
+      name: "آموزش open vpn در اندروید",
+    },
+  ];
+  const [activeTutorial, setActiveTutorial] = useState<number>(1);
+  return (
+    <div className="relative w-full h-full flex flex-col px-4 py-4 text-start">
+      <h1 className="font-bold text-xl md:text-2xl text-center">آموزش</h1>
+      <p className="font-bold text-sm mt-2 md:text-lg text-center">
+        برای انتخاب آموزش مورد نظر کلیک کنید تا آموزش براتون نمایش داده شود
+      </p>
+      <ListTutorials
+        activeTutorial={activeTutorial}
+        tutorialList={tutorialList}
+        setActiveTutorial={setActiveTutorial}
+      />
+      <Learn activeTutorial={activeTutorial} tutorialList={tutorialList} />
+    </div>
+  );
+};
+
+export default Tutorials;

src/pages/tutorial/section/components/Leran.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import { LearnProps } from "../../../../types/props";
+
+import v2ray from "../../../../assets/tutorial/android/v2ray.png";
+import eshterki1 from "../../../../assets/tutorial/ios/1-eshterki.jpg";
+import eshterki2 from "../../../../assets/tutorial/ios/2-eshteraki.jpg";
+import eshterki3 from "../../../../assets/tutorial/ios/3-eshteraki.jpg";
+import eshterki4 from "../../../../assets/tutorial/ios/4-eshteraki.jpg";
+import Button from "../../../../components/button";
+
+const Learn = ({ activeTutorial, tutorialList }: LearnProps) => {
+  const data = [
+    {
+      id: 1,
+      images: [
+        {
+          id: 1,
+          url: v2ray,
+          alt: "v2ray",
+        },
+      ],
+      btn: "دانلود برنامه",
+    },
+    {
+      id: 2,
+      images: [
+        {
+          id: 1,
+          url: eshterki1,
+          alt: "eshterki1",
+        },
+        {
+          id: 2,
+          url: eshterki2,
+          alt: "eshteraki2",
+        },
+        {
+          id: 3,
+          url: eshterki3,
+          alt: "eshterki3",
+        },
+        {
+          id: 4,
+          url: eshterki4,
+          alt: "eshterki4",
+        },
+      ],
+      btn: null,
+    },
+    {
+      id: 3,
+      images: [],
+      btn: null,
+    },
+    {
+      id: 4,
+      images: [],
+      btn: null,
+    },
+    { id: 5, images: [], btn: null },
+    { id: 6, images: [], btn: null },
+    { id: 7, images: [], btn: null },
+  ];
+  const [tutotialImage, setTutorialImage] = useState(data);
+  const [list, setList] = useState(tutorialList);
+  useEffect(() => {
+    setList(tutorialList?.filter((id) => id.id === activeTutorial));
+    setTutorialImage(data?.filter((id) => id.id === activeTutorial));
+  }, [activeTutorial]);
+  return (
+    <div className="w-full h-full border-4 flex flex-col justify-center items-center border-solid mt-4 p-4 rounded-md border-gray-800 border-spacing-1">
+      {list?.map((i) => {
+        return (
+          <p key={i.id}>
+            <span className="p-2 bg-gray-800 rounded-md">{i.name}</span>
+          </p>
+        );
+      })}
+      {tutotialImage?.map((i) => {
+        return (
+          <div
+            className="w-full h-full flex flex-col justify-center items-center"
+            key={i.id}
+          >
+            <div className="w-full h-full grid grid-cols-1 md:grid-cols-2 m-4">
+              {i.images?.map((i, index) => {
+                return (
+                  <img
+                    src={i.url}
+                    key={index}
+                    alt={i.alt}
+                    className="rounded-md relative w-full mb-2 mx-auto md:w-1/2"
+                  />
+                );
+              })}
+            </div>
+            {i.btn && <Button>{i.btn}</Button>}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Learn;

src/pages/tutorial/section/components/ListTutorial.tsx

@@ -0,0 +1,29 @@
+import { ListTutorialsProps } from "../../../../types/props";
+
+const ListTutorials = ({
+  tutorialList,
+  activeTutorial,
+  setActiveTutorial,
+}: ListTutorialsProps) => {
+  return (
+    <div className="w-full h-full mt-4">
+      <ul className="grid grid-cols-2 gap-2 md:grid-cols-6 justify-center items-center">
+        {tutorialList?.map((i) => {
+          return (
+            <li
+              className={`text-center text-sm md:text-lg ${
+                i.id === activeTutorial ? "bg-yellow-600" : "bg-gray-800"
+              } rounded-md p-2 cursor-pointer`}
+              onClick={() => setActiveTutorial(i.id)}
+              key={i.id}
+            >
+              {i.name}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default ListTutorials;