Made a bunch of crap and trying to fix it somehow

Author: technoph1le

public/data/index.json

@@ -1,3 +1,10 @@
-{
-  "languages": ["JavaScript", "Sass"]
-}
+[
+  {
+    "language": "Sass",
+    "icon": "/icons/sass.svg"
+  },
+  {
+    "language": "CSS",
+    "icon": "/icons/css.svg"
+  }
+]

public/icons/css.svg

@@ -1,39 +1,100 @@
 import Footer from "./layouts/Footer";
 import Header from "./layouts/Header";
-import SnippetList from "./components/SnippetList";
-import Sidebar from "./layouts/Sidebar";
-import { Navigate, useLocation } from "react-router-dom";
-import SnippetModal from "./components/SnippetModal";
+import Banner from "./layouts/Banner";
+import { useState } from "react";
+import Button from "./components/Button";
+import { CopyIcon, ExpandIcon } from "./components/Icons";
+import slugify from "./utils/slugify";
+import { useLanguages } from "./hooks/useLanguages";
+import { useCategories } from "./hooks/useCategories";
+import { useSnippets } from "./hooks/useSnippets";
+
+type LanguageType = {
+  language: string;
+  icon: string;
+};
+
+type SnippetType = {
+  title: string;
+  description: string;
+  code: string;
+  tags: string[];
+  author: string;
+};
 
 const App = () => {
-  const location = useLocation();
+  const [language, setLanguage] = useState<LanguageType>({
+    language: "Sass",
+    icon: "/icons/sass.svg",
+  });
+  const [category, setCategory] = useState<string>("");
+  const [snippet, setSnippet] = useState<SnippetType>();
+
+  const { fetchedLanguages } = useLanguages();
+  const { fetchedCategories } = useCategories(language.language);
+  const { fetchedSnippets } = useSnippets(language.language, category);
 
-  if (location.pathname === "/") {
-    return <Navigate to="/javascript/dom-manipulation" replace />;
-  }
+  const handleLanguageChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    const language = fetchedLanguages.find(
+      (lan) => slugify(lan.language) === slugify(event.target.value)
+    );
+    if (language) {
+      setLanguage(language);
+    }
+  };
 
   return (
     <>
-      {/* Had to put the modal in App.tsx as well for it to work despite
-        it's also being created in HTML with portal. 
-        If you know why it's that way, please let me know. */}
-      <SnippetModal />
+      {/* <SnippetModal /> */}
       <div className="container flow" data-flow-space="xl">
         <Header />
-        <div className="heading">
-          <h1 className="main-title">
-            Made to save your <span className="text-highlight">time.</span>
-          </h1>
-          <p>
-            Find the necessary snippet in seconds, across multiple languages.
-            Just search and copy!
-          </p>
-        </div>
+        <Banner />
         <main className="main">
-          <Sidebar />
-          <SnippetList />
+          <aside className="sidebar flow">
+            <select
+              id="languages"
+              className="language-switcher"
+              onChange={handleLanguageChange}
+            >
+              {fetchedLanguages.map(({ language }) => (
+                <option key={language} value={slugify(language)}>
+                  {language}
+                </option>
+              ))}
+            </select>
+            <ul role="list" className="categories">
+              {fetchedCategories.map((name) => (
+                <li className="category">
+                  <button onClick={() => setCategory(name)}>{name}</button>
+                </li>
+              ))}
+            </ul>
+          </aside>
+          <section className="flow">
+            <h2 className="section-title">{category}</h2>
+            <ul role="list" className="snippets">
+              {fetchedSnippets.map((snippet) => (
+                <li className="snippet">
+                  <div className="snippet__preview">
+                    <img src={language.icon} alt={language.language} />
+                    <Button isIcon={true} className="snippet__copy">
+                      <CopyIcon />
+                    </Button>
+                  </div>
+
+                  <div className="snippet__content">
+                    <h3 className="snippet__title">{snippet.title}</h3>
+                    <Button isIcon={true}>
+                      <ExpandIcon />
+                    </Button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </section>
         </main>
-        <hr className="divider" />
         <Footer />
       </div>
     </>

public/icons/sass.svg

@@ -3,10 +3,10 @@ import { LogoIcon } from "./Icons";
 
 const Logo = () => {
   return (
-    <Link to={"/"} className="logo">
+    <a href="/" className="logo">
       <LogoIcon />
       <span>QuickSnip</span>
-    </Link>
+    </a>
   );
 };