enhancement(lint): Fix lint errors for src/components/Projects/index.tsx

Co-authored-by: NeonGamerBot-QK <neon@saahild.com>
Signed-off-by: zeon-neon[bot] <136533918+zeon-neon[bot]@users.noreply.github.com>

src/components/AboutPage/SkillSet.tsx

@@ -1,6 +1,5 @@
 import { json } from "stream/consumers";
 import Icon from "../static/Icons";
-import MIcon from "@mdi/react";
 import {
   bash,
   bun,
@@ -29,254 +28,13 @@ import {
   visualStudio,
 } from "../static/icons_list";
 import "./skillset.css";
-import { SiKalilinux, SiPostman } from "react-icons/si";
+// import { SiKalilinux, SiPostman } from "react-icons/si";
 import { mdiArch, mdiConsole, mdiLinux, mdiUbuntu } from "@mdi/js";
 export function SkillSet() {
-  return (
-    <div className="items-center text-center place-items-center">
-      <h1 className="project-heading">
-        Professional <strong className="texthighlight">Skillset </strong>
-      </h1>
-      <div className="flex inline-flex grid ">
-        <div
-          style={{}}
-          className="flex-1 max-w-5xl text-center min-w-sm ms-auto me-auto"
-        >
-          <div className="inline-flex">
-            <a
-              href="https://www.w3schools.com/w3css/"
-              className={"tech-icons inline-flex"}
-            >
-              <Icon icon="css" className="w-40" width={2000} height={2000} />
-            </a>
-            <a
-              href="https://www.w3schools.com/js/DEFAULT.asp"
-              className={"tech-icons inline-flex"}
-            >
-              <Icon icon="javascript" className="w-40" />
-            </a>
-            <a
-              href="https://www.typescriptlang.org/"
-              className={"tech-icons inline-flex"}
-            >
-              <Icon icon="typescript" className="w-40" />
-            </a>
-            <a href="https://nextjs.org/" className={"tech-icons inline-flex"}>
-              <Icon icon={next} className="w-40" />
-            </a>
-            <a
-              href="https://www.npmjs.com/"
-              className={"tech-icons inline-flex"}
-            >
-              <Icon icon={npm} className="w-40" />
-            </a>
-            <a
-              href="https://www.prisma.io/"
-              className={"tech-icons inline-flex"}
-            >
-              <Icon icon={prisma} className="w-40" />
-            </a>
-            <a href="https://pptr.dev/" className={"tech-icons inline-flex"}>
-              <Icon icon={puppeteer} className="w-40" />
-            </a>
-          </div>
-          <div className="inline-flex">
-            <a
-              href="https://sass-lang.com/"
-              className={"tech-icons inline-flex"}
-            >
-              <Icon icon={sass} className="w-40" />
-            </a>
-            <a
-              href="https://tailwindcss.com/"
-              className={"tech-icons inline-flex"}
-            >
-              <Icon icon={tailwind} className="w-40" />
-            </a>
-            <div className={"tech-icons inline-flex"}>
-              <Icon icon={bash} className="w-40" />
-            </div>
-            <a href="https://bun.sh/" className={"tech-icons inline-flex"}>
-              <Icon icon={bun} className="w-40" />
-            </a>
-            <a
-              href="https://cplusplus.com/"
-              className={"tech-icons inline-flex"}
-            >
-              <Icon icon={cpp} className="w-40" />
-            </a>
-            <a
-              href="https://www.docker.com/"
-              className={"tech-icons inline-flex"}
-            >
-              <Icon icon={docker} className="w-40" />
-            </a>
-            <a href="https://graphql.org/" className={"tech-icons inline-flex"}>
-              <Icon icon={graphql} className="w-40" />
-            </a>
-          </div>
-          <div className="inline-flex">
-            <a
-              href="https://www.w3schools.com/html/"
-              className={"tech-icons inline-flex"}
-            >
-              <Icon icon={html} className="w-40" />
-            </a>
-            <a href="https://react.dev/" className={"tech-icons inline-flex"}>
-              <Icon icon={javascriptReact} className="w-40" />
-            </a>
-            <a
-              href="https://www.python.org/"
-              className={"tech-icons inline-flex"}
-            >
-              <Icon icon={python} className="w-40" />
-            </a>
-            <a
-              href="https://dotnet.microsoft.com/en-us/languages/csharp"
-              className={"tech-icons inline-flex"}
-            >
-              <Icon icon={csharp} className="w-40" />
-            </a>
-            {/* for the sake of css coffeescript is out! */}
-            {/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-40' /></div> */}
-            <a href="https://yarnpkg.com/" className={"tech-icons inline-flex"}>
-              <Icon icon={yarn} className="w-40" />
-            </a>
-            <a href="https://ejs.co/" className={"tech-icons inline-flex"}>
-              <Icon icon={ejs} className="w-40" />
-            </a>
-            <a href="https://pnpm.io/" className={"tech-icons inline-flex"}>
-              <Icon icon={pnpm} className="w-40" />
-            </a>
-          </div>
-          {/*
-
-   */}
-        </div>
-        {/* <br />
-  <div style={{  justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'>
-  <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div>
-  </div> */}
-      </div>
-    </div>
-  );
+  return <p>meow</p>;
 }
 export function TechStack() {
-  return (
-    <div className="items-center text-center place-items-center">
-      <h1 className="project-heading">
-        <strong className="text-highlight">Tools</strong> I use
-      </h1>
-      <div className="flex inline-flex grid">
-        <div
-          style={{}}
-          className="content-center flex-1 max-w-5xl ms-auto me-auto min-w-sm"
-        >
-          <div className="inline-flex max-w-5xl min-w-sm">
-            <div className={"tech-icons inline-flex"}>
-              <Icon icon={vscode} className="w-40" width={2000} height={2000} />
-            </div>
-            <div className={"tech-icons inline-flex"}>
-              <Icon icon={git} className="w-40" width={2000} height={2000} />
-            </div>
-            <div className={"tech-icons inline-flex"}>
-              <Icon icon={docker} className="w-40" width={2000} height={2000} />
-            </div>
-            <div className={"tech-icons inline-flex"}>
-              <Icon icon={figma} className="w-40" width={2000} height={2000} />
-            </div>
-            <div className={"tech-icons inline-flex"}>
-              <Icon icon={robots} className="w-40" width={2000} height={2000} />
-            </div>
-            <div className={"tech-icons inline-flex"}>
-              <Icon icon={vercel} className="w-40" width={2000} height={2000} />
-            </div>
-            <div className={"tech-icons inline-flex"}>
-              <Icon
-                icon={visualStudio}
-                className="w-40"
-                width={2000}
-                height={2000}
-              />
-            </div>
-            {/* <div className={"tech-icons inline-flex"}><Icon icon=' className='w-40' /></div> */}
-          </div>
-          <br />
-          <div className="inline-flex">
-            {/* <div className={"tech-icons inline-flex"}><Icon icon={figma} className='w-40' width={2000} height={2000}/></div> */}
-            <div
-              className={"tech-icons inline-flex mauve"}
-              style={{ color: "var(--mauve)" }}
-            >
-              <MIcon
-                path={mdiLinux}
-                size={2}
-                className="m-0 md:m-5 lg:w-full"
-              />
-            </div>
-            <div
-              className={"tech-icons inline-flex mauve"}
-              style={{ color: "var(--mauve)" }}
-            >
-              <MIcon
-                path={mdiConsole}
-                size={2}
-                className="m-0 md:m-5 lg:w-full"
-              />
-            </div>
-            <div
-              className={"tech-icons inline-flex mauve"}
-              style={{ color: "var(--mauve)" }}
-            >
-              <MIcon
-                path={mdiUbuntu}
-                size={2}
-                className="m-0 md:m-5 lg:w-full"
-              />
-            </div>
-            <div
-              className={"tech-icons inline-flex mauve"}
-              style={{ color: "var(--mauve)" }}
-            >
-              <MIcon path={mdiArch} size={2} className="m-0 md:m-5 lg:w-full" />
-            </div>
-            <div
-              className={"tech-icons inline-flex mauve"}
-              style={{ color: "var(--mauve)" }}
-            >
-              <SiPostman />
-            </div>
-            <div
-              className={"tech-icons inline-flex mauve"}
-              style={{ color: "var(--mauve)" }}
-            >
-              {" "}
-              <SiKalilinux />
-            </div>
-            {/* <div className={"tech-icons inline-flex mauve"} style={{ color: "var(--mauve)"}}><MIcon path={mdiKaliLinux} size={2} className='w-full m-5' /></div> */}
-          </div>
-          {/* <div className='inline-flex'>
-  <div className={"tech-icons inline-flex"}><Icon icon={html} className='w-40' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={javascriptReact} className='w-40' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={python} className='w-40' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={csharp} className='w-40' /></div> */}
-          {/* for the sake of css coffeescript is out! */}
-          {/* <div className={"tech-icons inline-flex"}><Icon icon={coffeescript} className='w-40' /></div> */}
-          {/* <div className={"tech-icons inline-flex"}><Icon icon={yarn} className='w-40' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={ejs} className='w-40' /></div>
-  <div className={"tech-icons inline-flex"}><Icon icon={pnpm} className='w-40' /></div>
-  </div> */}
-          {/*
-
-   */}
-        </div>
-        {/* <br />
-  <div style={{  justifyContent: 'center', textAlign: 'center', alignItems: "center", marginLeft: '50px', paddingBottom: '50px' }} className='inline-flex'>
-  <div className={"tech-icons inline-flex"}><Icon icon={tailwind} className='w-40' /></div>
-  </div> */}
-      </div>
-    </div>
-  );
+  return <p>meow</p>;
 }
 export default function () {
   return (

src/components/Projects/index.tsx

@@ -1,25 +1,39 @@
-import React, { useEffect, useState } from "react"
-import "./style.css"
-import { LuGitFork, LuGlobe } from "react-icons/lu"
+import React, { useEffect, useState } from "react";
+import "./style.css";
 /**
  *
  * @param param0
  * @returns
  */
-export function Card({ title, description, image,alt, Badges, svn_link, is_fork} : {
-    title: string ,
-    description: string,
-    image?: string,
-    alt?: string,
-    Badges?: any,
-    svn_link: string,
-    is_fork: Boolean
+export function Card({
+  title,
+  description,
+  image,
+  alt,
+  Badges,
+  svn_link,
+  is_fork,
+}: {
+  title: string;
+  description: string;
+  image?: string;
+  alt?: string;
+  Badges?: any;
+  svn_link: string;
+  is_fork: Boolean;
 }) {
-    return <div style={{ background: "var(--surface0)"}}className="shadow-xl card md:w-80">
-{image ? 
-    <figure><img src={image} alt={alt || "No Alt"} /></figure>: null}
+  return (
+    <div
+      style={{ background: "var(--surface0)" }}
+      className="shadow-xl card md:w-80"
+    >
+      {image ? (
+        <figure>
+          <img src={image} alt={alt || "No Alt"} />
+        </figure>
+      ) : null}
       <div className="card-body">
-      <h2 className="text-center card-title text-highlight">{is_fork ? <LuGitFork /> : null}
+        <h2 className="text-center card-title text-highlight">
           <a href={svn_link}>{title}</a>
           {/* <div className="badge badge-secondary">NEW</div> */}
         </h2>
@@ -31,71 +45,125 @@ export function Card({ title, description, image,alt, Badges, svn_link, is_fork}
         </div>
       </div>
     </div>
+  );
 }
 // oh boy i cannot WAIT for myself to add projects in via git
 export default function Projects() {
   // most projects should be loaded via github
   // otherwise they will all be concacted with the github.json file
-    const [githubData, setGithubData] = useState ([])
-const [translateY, setTranslateY] = useState(0)
+  const [githubData, setGithubData] = useState([]);
+  const [translateY, setTranslateY] = useState(0);
 
   const fetchData = () => {
-      return Promise.all([fetch(`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100`)
-            .then((response) => response.json()),fetch(`https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100?page=2`)
-            .then((response) => response.json())])
-
-            .then((data) => 
-                {
-                  if(process.env.NODE_ENV !== "production")   console.log(data[0], data[1])
-                const idsThatAreFound:any = {}
+    return Promise.all([
+      fetch(
+        `https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100`,
+      ).then((response) => response.json()),
+      fetch(
+        `https://api.github.com/users/NeonGamerBot-QK/repos?per_page=100?page=2`,
+      ).then((response) => response.json()),
+    ]).then((data) => {
+      if (process.env.NODE_ENV !== "production") console.log(data[0], data[1]);
+      const idsThatAreFound: any = {};
       const items = [...data[0], ...data[1]]
-                .filter(e => e.topics.includes('github-include-on-site'))
+        .filter((e) => e.topics.includes("github-include-on-site"))
         .filter(function (item, pos, self) {
           if (idsThatAreFound[item.id]) return false;
-                    idsThatAreFound[item.id] = true
+          idsThatAreFound[item.id] = true;
           return true;
-                })
+        });
 
-                console.log()
-                if(process.env.NODE_ENV !== "production")    console.log(items)
+      console.log();
+      if (process.env.NODE_ENV !== "production") console.log(items);
       //@ts-ignore
-                    setGithubData(items)
-                })
-    }
+      setGithubData(items);
+    });
+  };
   useEffect(() => {
-      fetchData()
-    }, [])
-    return <>
+    fetchData();
+  }, []);
+  return (
+    <>
       <div className="min-h-screen hero">
-  <div className="flex-col text-center duration-1000 hero-content lg:flex-row" style={{ transform: `translateY(${translateY}%)`}}>
+        <div
+          className="flex-col text-center duration-1000 hero-content lg:flex-row"
+          style={{ transform: `translateY(${translateY}%)` }}
+        >
           {/* <img src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.jpg" className="max-w-sm rounded-lg shadow-2xl" /> */}
           <div>
-      <h1 className="text-5xl font-bold text-highlight lg:mt-20">Projects</h1>
+            <h1 className="text-5xl font-bold text-highlight lg:mt-20">
+              Projects
+            </h1>
             {/* <p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
       <button className="btn btn-primary">Get Started</button> */}
-    <div className="flex grid grid-cols-2 gap-2 mt-5 text-center duration-1000 md:gap-6" style={{ transform: `translateY(${-translateY}%)` }}>
-{githubData.length > 0 ?  githubData.map((d: any) => {
-return  <Card title={d.name} description={d.description} key={d.id}  svn_link={d.html_url} is_fork={d.fork}Badges={<>
+            <div
+              className="flex grid grid-cols-2 gap-2 mt-5 text-center duration-1000 md:gap-6"
+              style={{ transform: `translateY(${-translateY}%)` }}
+            >
+              {githubData.length > 0 ? (
+                githubData.map((d: any) => {
+                  return (
+                    <Card
+                      title={d.name}
+                      description={d.description}
+                      key={d.id}
+                      svn_link={d.html_url}
+                      is_fork={d.fork}
+                      Badges={
+                        <>
                           <div className="inline-flex">
-
-<a  target="_blank" href={d.html_url + '/fork'} style={{ background: "var(--mantle)", borderRadius: "50%" }} className="rounded-full btn btn-change mauve"><LuGitFork /></a>
-{d.homepage ? 
-    <a  target="_blank" href={d.homepage} style={{ background: "var(--mantle)", borderRadius: "50%" }} className="rounded-full btn btn-change mauve"><LuGlobe /></a>
-: null}
+                            <a
+                              target="_blank"
+                              href={d.html_url + "/fork"}
+                              style={{
+                                background: "var(--mantle)",
+                                borderRadius: "50%",
+                              }}
+                              className="rounded-full btn btn-change mauve"
+                            ></a>
+                            {d.homepage ? (
+                              <a
+                                target="_blank"
+                                href={d.homepage}
+                                style={{
+                                  background: "var(--mantle)",
+                                  borderRadius: "50%",
+                                }}
+                                className="rounded-full btn btn-change mauve"
+                              ></a>
+                            ) : null}
                           </div>
                           <div className="hidden grid-cols-3 max-w-60 lg:inline-flex">
-{d.topics.filter((e:string) => !e.includes('github-include-on-site')).map((topic:string,i:number) => {
-    return <div className="truncate badge badge-outline" key={i}><span className="truncate">{topic}</span></div>
+                            {d.topics
+                              .filter(
+                                (e: string) =>
+                                  !e.includes("github-include-on-site"),
+                              )
+                              .map((topic: string, i: number) => {
+                                return (
+                                  <div
+                                    className="truncate badge badge-outline"
+                                    key={i}
+                                  >
+                                    <span className="truncate">{topic}</span>
+                                  </div>
+                                );
                               })}
                           </div>
-</>}/>
-
-}) : <div>
+                        </>
+                      }
+                    />
+                  );
+                })
+              ) : (
+                <div>
                   <span className="loading loading-bars loading-lg mauve font-5xl"></span>
-  </div>}
+                </div>
+              )}
             </div>
           </div>
         </div>
       </div>
     </>
+  );
 }

src/components/footer/index.tsx

@@ -1,14 +1,10 @@
-import { SiDiscord, SiReplit } from "react-icons/si";
-import { FaKey } from "react-icons/fa";
 import Icon from "../static/Icons";
 import { git, npm } from "../static/icons_list";
 import bento from "../../assets/bento.svg";
 import tor from "../../assets/tor.svg";
 import "./index.css";
 import { useEffect, useState } from "react";
-import { LuGlobe, LuKey } from "react-icons/lu";
 // import { FaCodeCommit} fr
-import { FaCodeCommit, FaRocket } from "react-icons/fa6";
 const isDev = process.env.NODE_ENV !== "production";
 
 type DiscordStatus = "dnd" | "idle" | "online" | "offline";
@@ -124,7 +120,7 @@ export default function Footer() {
               className="badge mauve p-2 lg:visible hidden"
               style={{ background: "var(--surface1)" }}
             >
-              <FaKey style={{ marginRight: "5px" }} /> {fingerprint}
+              {fingerprint}
             </div>
           </a>
           <a
@@ -137,7 +133,7 @@ export default function Footer() {
               className="badge mauve p-2 md:visible invisible"
               style={{ background: "var(--surface1)" }}
             >
-              <FaCodeCommit style={{ marginRight: "5px" }} />{" "}
+              {" "}
               {process.env.REACT_APP_BUILD_SHA}
             </div>
           </a>
@@ -151,56 +147,34 @@ export default function Footer() {
               className="badge mauve p-2 md:visible invisible"
               style={{ background: "var(--surface1)" }}
             >
-              <FaRocket style={{ marginRight: "5px" }} />{" "}
               {process.env.REACT_APP_BUILD_ID}
             </div>
           </a>
-          <a href="https://github.com/NeonGamerBot-QK" target="_blank">
-            <Icon icon={git} />
-          </a>
-          <a href="https://www.npmjs.com/~neongamerbot" target="_blank">
-            <Icon icon={npm} />
-          </a>
+          <a href="https://github.com/NeonGamerBot-QK" target="_blank"></a>
+          <a href="https://www.npmjs.com/~neongamerbot" target="_blank"></a>
           <div className="inline-flex gap-2 bottom mt-1">
             <a
               href="https://replit.com/@NeonGamerBotQK"
               target="_blank"
               className="inline-flex"
-            >
-              <SiReplit
-                className="inline-flex hover:scale-125 duration-500 linear"
-                height="16"
-                width="16"
-                fill="var(--maroon)"
-              />
-            </a>
+            ></a>
             <a
               href="https://bento.me/saahil"
               target="_blank"
               className="inline-flex"
-            >
-              <Icon icon={bento} width={16} height={16} />{" "}
-            </a>
+            ></a>
             {lanyardData ? (
               <a href="https://discord.com/users/566766267046821888">
-                <SiDiscord
-                  fill={
-                    lanyardData.kv.is_disabled
-                      ? "var(--mauve)"
-                      : getFillColor(lanyardData.discord_status)
-                  }
-                />
+                <p>m</p>
               </a>
             ) : null}
           </div>
           {window.location.hostname.includes(".onion") ? (
             <a href="http://saahild.com/">
-              <LuGlobe stroke="var(--mauve)" />
+              <p>globe</p>
             </a>
           ) : (
-            <a href="https://ohdhie7qka42mvxcl2lb5bcxw6jumwn6lbqdmpli3xxhktvyqg2gtryd.onion/">
-              <Icon icon={tor} />
-            </a>
+            <a href="https://ohdhie7qka42mvxcl2lb5bcxw6jumwn6lbqdmpli3xxhktvyqg2gtryd.onion/"></a>
           )}
 
           {/* <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>