From 88c5648fd3fb830e58d0a0074e7f9996f0760d53 Mon Sep 17 00:00:00 2001
From: devvsakib <devvsakib@gmail.com>
Date: Sat, 27 Jul 2024 12:02:24 +0600
Subject: [PATCH] doc indiv new page added

---
 package.json                     |  3 ++-
 src/App.jsx                      | 19 +++++++++++-----
 src/components/BGShape.jsx       |  2 +-
 src/components/Header/Header.jsx | 18 +++++++++++----
 src/components/Layout/Layout.jsx | 23 ++++++++++---------
 src/pages/single doc/index.jsx   | 38 ++++++++++++++++++++++++++++++--
 6 files changed, 79 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index ecd554b..95cb412 100644
--- a/package.json
+++ b/package.json
@@ -31,5 +31,6 @@
     "pretty-quick": "^3.1.3",
     "tailwindcss": "^3.2.4",
     "vite": "^4.0.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/src/App.jsx b/src/App.jsx
index c427ca7..3ceafc0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,20 +1,27 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import "./index.css";
 import Error from "./components/Error/Error";
 import SearchInput from "./components/Search/SearchInput";
 import Layout from "./components/Layout/Layout";
-import BGShape from "./components/BGShape";
 
 function App() {
   const [search, setSearch] = useState("");
   const [type, setType] = useState("");
+  const [countStar, setCountStar] = useState(0);
 
+  useEffect(() => {
+    fetch("https://api.github.com/repos/devvsakib/github-error-solve")
+      .then((response) => response.json())
+      .then((data) => setCountStar(data.stargazers_count))
+      .catch((error) => console.error("Error fetching GitHub stars:", error));
+  }, []);
+console.log(countStar)
   return (
     <>
-        <Layout>
-          <SearchInput search={search} setSearch={setSearch} setType={setType} />
-          <Error search={search} type={type} />
-        </Layout>
+      <Layout stars={countStar}>
+        <SearchInput search={search} setSearch={setSearch} setType={setType} />
+        <Error search={search} type={type} />
+      </Layout>
     </>
   );
 }
diff --git a/src/components/BGShape.jsx b/src/components/BGShape.jsx
index e852cf8..23dbe0a 100644
--- a/src/components/BGShape.jsx
+++ b/src/components/BGShape.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const BGShape = () => {
   return (
-    <div className='-z-[99999] fixed top-0 left-0 w-full h-full'>
+    <div className='-z-[99999] fixed top-0 left-0 w-full h-full opacity-40'>
       {/* <div className='-z-[999] absolute top-0 left-0 w-full h-full bg-[#44ff15]/20 backdrop-blur-[5px] rounded-lg'></div>*/}
       <div className='-z-[99999999999999] absolute -top-[70%] md:-top-[90%] -left-[50%] md:left-0 w-[800px] md:w-full h-[500px] rounded-full bg-[#16f8d2f3]/30 blur-[100px]'></div>
       
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 05ec865..df37a82 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -12,7 +12,7 @@ import { HiMoon, HiSun } from "react-icons/hi";
 import { ThemeContext } from "../../context/ThemeContext";
 import { useContext, useState } from "react";
 
-function Header({ notice }) {
+function Header({ countStar, notice }) {
   const { theme, toggleTheme } = useContext(ThemeContext);
   const [open, setOpen] = useState(false);
 
@@ -78,8 +78,19 @@ function Header({ notice }) {
             return (
               <div key={`${link.name}-${index}`}>
                 {link?.isExternalURL ? (
-                  <a target="_blank" href={link.link} className="githubBtn">
-                    {link.icon}
+                  <a target="_blank" href={link.link}>
+                    <div className="bg-blue-600/50 shadow font-semibold flex gap-1 p-1 px-2 items-center rounded-full">
+                      <span className="githubBtn">
+                        {link.icon}
+                      </span>
+                      {
+                        countStar && (
+                          <div className="flex items-center gap-1">
+                            {countStar}
+                          </div>
+                        )
+                      }
+                    </div>
                   </a>
                 ) : (
                   <Link className="flex items-center gap-1" to={link.link}>
@@ -90,7 +101,6 @@ function Header({ notice }) {
               </div>
             );
           })}
-
           <div className="text-lg cursor-pointer" onClick={toggleTheme}>
             <HiMoon className="dark:hidden" />
             <HiSun className="hidden dark:inline" />
diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.jsx
index 250072f..d6480ac 100644
--- a/src/components/Layout/Layout.jsx
+++ b/src/components/Layout/Layout.jsx
@@ -8,17 +8,20 @@ import { ThemeProvider } from '../../context/ThemeContext';
  * prop
  * @returns A div with a header and children.
  */
-const Layout = ({children}) => {
+const Layout = ({ stars, children }) => {
     return (
-        <ThemeProvider>
-          <Header 
-              notice={"Under Construction"}
-          />
-          <div className='relative'>
-              {children}
-          </div>
-          <Footer />
-        </ThemeProvider>
+        <div className='flex flex-col justify-between min-h-screen'>
+            <ThemeProvider>
+                <Header
+                    countStar={stars}
+                    notice={"Under Construction"}
+                />
+                <div className='relative'>
+                    {children}
+                </div>
+                <Footer />
+            </ThemeProvider>
+        </div>
     );
 };
 
diff --git a/src/pages/single doc/index.jsx b/src/pages/single doc/index.jsx
index 29fd501..4155211 100644
--- a/src/pages/single doc/index.jsx	
+++ b/src/pages/single doc/index.jsx	
@@ -1,13 +1,47 @@
 import { useParams } from "react-router-dom";
 import Layout from "../../components/Layout/Layout";
+import { docs } from '../../data/Doc.json';
+import { useEffect, useState } from "react";
 
 const SingleDoc = () => {
     const { doc_name } = useParams();
+    const [doc, setDoc] = useState({});
+    const [loading, setLoading] = useState(true);
 
+    useEffect(() => {
+        setLoading(true);
+        const doc = docs.find(item => item.title.toLowerCase() === doc_name.split("_").join(" "));
+        setDoc(doc);
+        setTimeout(() => {
+            setLoading(false);
+        }, 300);
+    }, [doc_name]);
+    
     return (
         <Layout>
-            <section className="px-5 md:px-10">
-                {doc_name.split("_").join(" ")}
+            <section className="px-5 md:px-10 min-h-screen">
+                <h3 className="text-2xl md:text-3xl capitalize text-center my-10 mb-20">
+                    {doc_name.split("_").join(" ")}
+                </h3>
+                {
+                    loading ? <p>Loading...</p>
+                        :
+                        <div className="">
+                            <div>
+                                <div className="">
+                                    {
+                                        doc.tag.map((tag, index) => (
+                                            <span key={index} className="bg-primary text-white px-2 py-1 rounded-lg mr-2">
+                                                {tag}
+                                            </span>
+                                        ))
+                                    }
+                                </div>
+                                <hr className="my-5" />
+                            </div>
+                            <p className="text-justify">{doc.description}</p>
+                        </div>
+                }
             </section>
         </Layout>
     );