feat : completed turotial page with fake data

2024-05-24 15:14:06 +03:30
parent d2b3e8d4b2
commit 32f1c47f44
4 changed files with 193 additions and 5 deletions
--- a/src/pages/tutorial/section/components/Leran.tsx
+++ b/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;