📝 Added documentation page template

client/client-landing/components/documentation/YoutubeSideBarLinks.tsx

@@ -0,0 +1,58 @@
+interface LinkProps {
+  fnc: Function;
+  sources: {
+    href: string;
+    title: string;
+    subTitle: string;
+    content: string;
+  }[];
+  current: string;
+  icon: JSX.Element;
+}
+/* Video Selection Side bar to select the required video to display.
+   This saves space and only required information is displayed.
+   Array of Objects are passed and iterated to create buttons for each object.
+*/
+const YoutubeSideBarLink = ({ fnc, sources, current, icon }: LinkProps) => {
+  return (
+    <>
+      <p className="text-3xl my-3">Youtube Tutorial</p>
+      {sources.map((source, i) => (
+        <div key={i} className="flex mx-2 w-full">
+          <div
+            onClick={() => fnc({ source: source, type: "VIDEO" })}
+            className={`${
+              current === source.href
+                ? "border-base-green"
+                : "md:border-transparent"
+            } border-b-4 md:border-b-0 md:border-r-4 w-full cursor-pointer py-4 flex items-center justify-between transform hover:md:-translate-x-4`}
+          >
+            <div>
+              <h3
+                className={`${
+                  current === source.href ? "font-medium" : ""
+                } text-xl mb-2`}
+              >
+                {source.title}
+              </h3>
+            </div>
+
+            <div className="mx-4">
+              <span
+                className={`${
+                  current === source.href
+                    ? "bg-base-green bg-opacity-80"
+                    : "bg-base-smoke"
+                } w-12 hidden md:flex justify-center items-center p-2 rounded-full`}
+              >
+                {icon}
+              </span>
+            </div>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default YoutubeSideBarLink;

client/client-landing/components/documentation/documentation.tsx

@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { ArrowIcon } from "../../utils/icons";
+import PdfDisplay from "./pdfDisplay";
+import PdfSideBarLink from "./pdfSideBarLink";
+import YoutubeDisplay from "./youtubeDisplay";
+import YoutubeSideBarLink from "./YoutubeSideBarLinks";
+
+/*
+  pdfSources (array of Objects) to store name and url of the PDF.
+*/
+const Documentation = () => {
+  const pdfSources: {
+    name: string;
+    href: string;
+  }[] = [
+    {
+      name: "Sample PDF",
+      href: "https://drive.google.com/file/d/1kPcD_GpBODXD6pUgfLaqPhEHwpB-lpk3/preview",
+    },
+    {
+      name: "Lab PDF",
+      href: "https://drive.google.com/file/d/1LZzQP5RPTMI4RKzTpnwfA3ufnc60Z2zA/preview",
+    },
+    {
+      name: "Paralinguistic PDF",
+      href: "https://drive.google.com/file/d/1-Ktm3gE9WWDxnT_wvUON1VudSRb6dM8i/preview",
+    },
+  ];
+
+  /*
+  youtubeSources (array of Objects) to store name and url of the Youtube Videos/Local Videos address..
+  */
+  const youtubeSources: {
+    title: string;
+    subTitle: string;
+    content: string;
+    href: string;
+  }[] = [
+    {
+      title: "C++ in 100 Seconds",
+      subTitle: "Fireship",
+      content:
+        "C++ or C-plus-plus or Cpp is an extremely popular object-oriented programming language. Created in 1979, today it powers game engines, databases, compilers, embedded systems, desktop software, and much of our software infrastructure. ",
+      href: "https://www.youtube.com/embed/MNeX4EGtR5Y",
+    },
+    {
+      title: "Firebase in 100 Seconds",
+      subTitle: "Fireship",
+      content:
+        "Firebase is a suite of tools for building apps on top of Google Cloud Platform. It's most famous for its realtime database, but also includes services for user authentication, serverless computing, push messaging, file storage, and more.",
+      href: "https://www.youtube.com/embed/vAoB4VbhRzM",
+    },
+    {
+      title: "GraphQL Explained in 100 Seconds",
+      subTitle: "Fireship",
+      content:
+        "What is GraphQL? Learn how it compares to REST and why developers love this query language for reading and mutating data in APIs",
+      href: "https://www.youtube.com/embed/eIQh02xuVw4",
+    },
+  ];
+
+  const [display, setDisplay] = useState({
+    source: pdfSources[1],
+    type: "PDF",
+  });
+
+  return (
+    <div>
+      <h1 className="text-5xl lg:text-5xl font-extrabold text-base-blue">
+        Documentation
+      </h1>
+      <hr />
+      <div>
+        <br />
+
+        <div className="flex flex-col md:flex-row justify-evenly mt-8">
+          <div className="w-full md:w-4/12 flex flex-col md:flex-col">
+            {/* Pdf Navigation Bar */}
+            <PdfSideBarLink
+              fnc={setDisplay}
+              icon={<ArrowIcon />}
+              sources={pdfSources}
+              current={display.source.href}
+            />
+            {/* Video Navigation Bar */}
+            <YoutubeSideBarLink
+              icon={<ArrowIcon />}
+              fnc={setDisplay}
+              sources={youtubeSources}
+              current={display.source.href}
+            />
+          </div>
+          <div className="w-full md:px-8 mt-8 md:mt-0">
+            <div className="px-4 md:px-8 py-4 lg:px-8 bg-gray-100 border-t-8 rounded-sm border-base-green">
+              {/* Content elements which displayes according to the selection in Side Bar */}
+              {display.type === "PDF" ? (
+                <PdfDisplay source={display.source} />
+              ) : (
+                <YoutubeDisplay source={display.source} />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Documentation;

client/client-landing/components/documentation/index.tsx

@@ -0,0 +1 @@
+export { default as Documentation } from "./documentation";

client/client-landing/components/documentation/pdfDisplay.tsx

@@ -0,0 +1,22 @@
+import { LinkProps } from "../../utils/interfaces";
+{
+  /* Function takes the object as parameters and displays the video using Object.href inside an iframe. */
+}
+const PdfDisplay = ({ source }: LinkProps) => {
+  return (
+    <>
+      <div key={source.name} className="">
+        <div className=" h-screen my-5 shadow-xl ">
+          <iframe
+            src={source.href}
+            height="100%"
+            width="100%"
+            className="rounded-lg"
+          ></iframe>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PdfDisplay;

client/client-landing/components/documentation/pdfSideBarLink.tsx

@@ -0,0 +1,55 @@
+interface LinkProps {
+  fnc: Function;
+  sources: {
+    href: string;
+    name: string;
+  }[];
+  current: string;
+  icon: JSX.Element;
+}
+/* The component takes array of Objects in parameters, iterates over it using map function
+   and calls the display function with Object as parameter.
+*/
+const PdfSideBarLink = ({ fnc, sources, current, icon }: LinkProps) => {
+  return (
+    <>
+      <p className="text-3xl my-3">PDF Tutorial</p>
+      {sources.map((source) => (
+        <div key={source.name} className="flex mx-2 w-full">
+          <div
+            onClick={() => fnc({ source: source, type: "PDF" })}
+            className={`${
+              current === source.href
+                ? "border-base-green"
+                : "md:border-transparent"
+            } border-b-4 md:border-b-0 md:border-r-4 w-full cursor-pointer py-4 flex items-center justify-between transform hover:md:-translate-x-4`}
+          >
+            <div>
+              <h3
+                className={`${
+                  current === source.href ? "font-medium" : ""
+                } text-xl mb-2`}
+              >
+                {source.name}
+              </h3>
+            </div>
+
+            <div className="mx-4">
+              <span
+                className={`${
+                  current === source.href
+                    ? "bg-base-green bg-opacity-80"
+                    : "bg-base-smoke"
+                } w-12 hidden md:flex justify-center items-center p-2 rounded-full`}
+              >
+                {icon}
+              </span>
+            </div>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default PdfSideBarLink;

client/client-landing/components/documentation/youtubeDisplay.tsx

@@ -0,0 +1,29 @@
+import { LinkProps } from "../../utils/interfaces";
+/* Function which takes Video details as an Object and displays them inside an iframe. */
+const YoutubeDisplay = ({ source }: LinkProps) => {
+  return (
+    <>
+      <div className="flex flex-col justify-center items-center">
+        <div className="flex flex-col justify-center items-center my-7">
+          <div className="text-4xl font-medium">{source.title}</div>
+          <div className="text-xl mt-2 font-medium">{source.subTitle}</div>
+        </div>
+        <div className="flex flex-col bg-white rounded-lg justify-center items-center h-auto md:h-auto  ">
+          <div className="pt-10 px-5 lg:px-20 text-lg">{source.content}</div>
+          <div className="video-container m-5 mb-0 ">
+            <iframe
+              className="rounded-lg"
+              width="100%"
+              height="300vh"
+              src={source.href}
+              title={source.title}
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            ></iframe>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default YoutubeDisplay;

client/client-landing/components/shared/layout.tsx

@@ -37,6 +37,9 @@ const Layout: React.FC = ({ children }) => {
       case "/contact-us": {
         return <Titles.Contact />;
       }
+      case "/documentation": {
+        return "Documentation Svg Template";
+      }
       case "/500": {
         return <Titles.ServerError />;
       }

client/client-landing/components/shared/navbar.tsx

@@ -21,6 +21,10 @@ const Navbar = () => {
       name: "Join Us",
       href: "/join-us",
     },
+    {
+      name: "Documentation",
+      href: "/documentation",
+    },
     {
       name: "Contact Us",
       href: "/contact-us",

client/client-landing/pages/documentation.tsx

@@ -0,0 +1,23 @@
+import Head from "next/head";
+
+import { Documentation } from "../components/documentation";
+import { Layout } from "../components/shared";
+
+const documentation = () => {
+  return (
+    <>
+      <Head>
+        <title>Documentation</title>
+        <meta
+          name="documentation"
+          content="GitHub Community SRM aims to help teachers manage student projects on the SRMIST KTR GitHub Enterprise"
+        />
+      </Head>
+      <Layout>
+        <Documentation />
+      </Layout>
+    </>
+  );
+};
+
+export default documentation;

client/client-landing/styles/tailwind.styles.css

@@ -88,3 +88,23 @@
     @apply bottom-0 top-0 right-0 left-0;
   }
 }
+
+.video-container {
+  overflow: hidden;
+  position: relative;
+  width:100%;
+}
+
+.video-container::after {
+  padding-top: 56.25%;
+  display: block;
+  content: '';
+}
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

client/client-landing/utils/interfaces.ts

@@ -78,3 +78,14 @@ export interface ContributorFormData
 
 export interface ContactUsFormData
   extends Yup.InferType<typeof contactUsValidation> {}
+
+export interface LinkProps {
+  source: {
+    href: string;
+    title?: string;
+    subTitle?: string;
+    content?: string;
+    name?: string;
+    icon?: JSX.Element;
+  };
+}