From 94ebf2b9fa035d16006ff12733989165fdf26fd2 Mon Sep 17 00:00:00 2001
From: Aditya Tulsiyan <tulsiyanaditya11@gmail.com>
Date: Wed, 5 Jul 2023 21:39:20 +0530
Subject: [PATCH 1/3] Added options button on Docs

---
 app/docs/page.tsx | 40 ++++++++++++++++++++++++++--------------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/app/docs/page.tsx b/app/docs/page.tsx
index 2e687a46f..6990ad1ba 100644
--- a/app/docs/page.tsx
+++ b/app/docs/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { GitBranch, FileText, UploadCloud } from "react-feather";
-import { useEffect, ReactNode } from "react";
+import { useEffect, ReactNode, useState } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { Navbar, Footer } from "@/components";
@@ -77,7 +77,7 @@ const option1Steps = [
 const option2Steps = [
   {
     icon: <FileText size={18} color="white" />,
-    text: "OR, If you want to run it locally then follow these steps",
+    text: "If you want to run it locally then follow these steps",
     code: ""
   },
   {
@@ -181,22 +181,19 @@ function Step({ icon, text, code, image }: StepProps): JSX.Element {
   );
 }
 
-function AddYourProjectsGuide(): any {
+function AddYourProjectsGuide(): JSX.Element {
+  const [selectedOption, setSelectedOption] = useState(0);
 
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
 
-  const option2Render = option2Steps.map((step, index) => (
-    <Step
-      key={index}
-      icon={step.icon}
-      text={step.text}
-      code={step.code}
-    />
-  ));
+  let selectOption = (option: number) => {
+    setSelectedOption(option);
+  };
 
-  const option1Render = option1Steps.map((step, index) => (
+  const renderSteps = selectedOption === 0 ? option1Steps : option2Steps;
+  const stepsRender = renderSteps.map((step: any, index: number) => (
     <Step
       key={index}
       icon={step.icon}
@@ -235,12 +232,27 @@ function AddYourProjectsGuide(): any {
             />
           </svg>
         </div>
+        <div className="flex justify-center mt-10">
+          <button
+            className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 0 ? "bg-indigo-600 text-white animate-pulse" : "bg-gray-800 text-gray-300"
+              }`}
+            onClick={() => selectOption(0)}
+          >
+            Add Projects Directly From GitHub
+          </button>
+          <button
+            className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 1 ? "bg-indigo-600 text-white animate-pulse" : "bg-gray-800 text-gray-300"
+              }`}
+            onClick={() => selectOption(1)}
+          >
+            Set Up Projects Locally
+          </button>
+        </div>
         <article className="items-center max-w-5xl mx-auto">
           <p className="mb-5 text-xl font-bold tracking-tight text-red-500">
             Follow the following steps to add your projects to ProjectsHut:
           </p>
-          <div className="option1">{option1Render}</div>
-          <div className="option2">{option2Render}</div>
+          <div className="option">{stepsRender}</div>
         </article>
       </section>
       <Footer />

From f04aa5fb2474226536ce5bf407a9858a5bc10cd3 Mon Sep 17 00:00:00 2001
From: Aditya Tulsiyan <tulsiyanaditya11@gmail.com>
Date: Thu, 6 Jul 2023 20:47:02 +0530
Subject: [PATCH 2/3] Update: page.tsx

---
 app/docs/page.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/docs/page.tsx b/app/docs/page.tsx
index 6990ad1ba..9680cec17 100644
--- a/app/docs/page.tsx
+++ b/app/docs/page.tsx
@@ -2,8 +2,9 @@
 import { GitBranch, FileText, UploadCloud } from "react-feather";
 import { useEffect, ReactNode, useState } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { anOldHope } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { Navbar, Footer } from "@/components";
+import Image from "next/image";
 
 type StepProps = {
   icon: ReactNode;
@@ -161,7 +162,7 @@ function Step({ icon, text, code, image }: StepProps): JSX.Element {
             <div className="flex items-end justify-end">
               <button
                 onClick={copyCode}
-                className="cursor-pointer text-indigo-600 hover:text-indigo-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                className="cursor-pointer text-indigo-600"
               >
                 Copy
               </button>
@@ -171,12 +172,12 @@ function Step({ icon, text, code, image }: StepProps): JSX.Element {
       </div>
       {code && (
         <div className="mt-2">
-          <SyntaxHighlighter language="nginx" style={a11yDark}>
+          <SyntaxHighlighter language="nginx" style={anOldHope}>
             {code}
           </SyntaxHighlighter>
         </div>
       )}
-      {image && <img src={image} alt={text} className="mt-2" />}
+      {image && <Image src={image} alt={text} className="mt-2" width={10000} height={600} />}
     </div>
   );
 }
@@ -234,14 +235,14 @@ function AddYourProjectsGuide(): JSX.Element {
         </div>
         <div className="flex justify-center mt-10">
           <button
-            className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 0 ? "bg-indigo-600 text-white animate-pulse" : "bg-gray-800 text-gray-300"
+            className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 0 ? "bg-indigo-600 text-white" : "border border-gray-700 text-gray-300"
               }`}
             onClick={() => selectOption(0)}
           >
             Add Projects Directly From GitHub
           </button>
           <button
-            className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 1 ? "bg-indigo-600 text-white animate-pulse" : "bg-gray-800 text-gray-300"
+            className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 1 ? "bg-indigo-600 text-white" : "border border-gray-700 text-gray-300"
               }`}
             onClick={() => selectOption(1)}
           >

From ede7be6ff6615a8b1e8720032fc1374c58e8859f Mon Sep 17 00:00:00 2001
From: Aditya Tulsiyan <tulsiyanaditya11@gmail.com>
Date: Fri, 7 Jul 2023 02:51:55 +0530
Subject: [PATCH 3/3] Fix: copy code button

---
 app/docs/page.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/docs/page.tsx b/app/docs/page.tsx
index 9680cec17..a05f24aa1 100644
--- a/app/docs/page.tsx
+++ b/app/docs/page.tsx
@@ -140,11 +140,14 @@ const option2Steps = [
 
 function Step({ icon, text, code, image }: StepProps): JSX.Element {
   const copyCode = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-    navigator.clipboard.writeText(code).then(() => {
-      e.currentTarget.innerText = "Copied!";
-    });
+    const button = e.currentTarget as HTMLButtonElement;
+    const initialText = button.innerText;
+
+    navigator.clipboard.writeText(code);
+    button.innerText = "Copied!";
+
     setTimeout(() => {
-      e.currentTarget.innerText = "Copy";
+      button.innerText = initialText;
     }, 3000);
   };