render categories on resource page and read from json file

Author: aedwardg

src/data/resources/css.json

@@ -0,0 +1,20 @@
+{
+  "pageName": "CSS Resources",
+  "entries": [
+    {
+      "title": "CSS Official Docs",
+      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS",
+      "tags": ["css", "official docs"]
+    },
+    {
+      "title": "Tailwind Official Docs",
+      "url": "https://tailwindcss.com",
+      "tags": ["css", "official docs", "tailwind"]
+    },
+    {
+      "title": "CSS Flexbox Layout Guide",
+      "url": "https://css-tricks.com/snippets/css/a-guide-to-flexbox/",
+      "tags": ["css", "cheatsheet"]
+    }
+  ]
+}

src/main.tsx

@@ -5,6 +5,8 @@ import "./index.css";
 import Layout from "./components/Layout";
 import Home from "./routes/Home";
 import About from "./routes/About";
+import Resources from "./routes/Resources";
+import ResourcePage from "./routes/Resources/ResourcePage";
 
 const root = document.getElementById("root");
 
@@ -16,6 +18,8 @@ if (root) {
           <Route element={<Layout />}>
             <Route index element={<Home />} />
             <Route path="/about" element={<About />} />
+            <Route path="/resources" element={<Resources />} />
+            <Route path="/resources/:category" element={<ResourcePage />} />
           </Route>
         </Routes>
       </BrowserRouter>

src/routes/Resources/CategoryCard.tsx

@@ -0,0 +1,21 @@
+import { Link } from "react-router";
+
+interface Props {
+  name: string;
+  slug: string;
+}
+
+const CategoryCard = ({ name, slug }: Props) => {
+  return (
+    <>
+      <Link
+        to={slug}
+        className="my-4 min-w-[50%] rounded-lg border-2 border-primary px-6 py-12 text-center text-2xl shadow-lg shadow-primary hover:bg-primary hover:text-accent hover:shadow-2xl hover:shadow-primary"
+      >
+        {name}
+      </Link>
+    </>
+  );
+};
+
+export default CategoryCard;

src/routes/Resources/ResourcePage.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router";
+
+interface JsonData {
+  pageName: string;
+  entries: Entry[];
+}
+
+interface Entry {
+  title: string;
+  url: string;
+  tags: string[];
+}
+
+const ResourcePage = () => {
+  const { category } = useParams();
+  const [data, setData] = useState<JsonData | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (category) {
+        const dataObject = (await import(
+          `../../data/resources/${category}.json`
+        )) as { default: JsonData };
+        return dataObject.default;
+      } else {
+        return { pageName: "", entries: [] };
+      }
+    };
+
+    fetchData().then(
+      (json) => {
+        setData(json);
+      },
+      () => {
+        setData({ pageName: "", entries: [] });
+      },
+    );
+  }, [category]);
+
+  if (data) {
+    return (
+      <>
+        <section className="h-2/3 bg-background">
+          <h3 className="text-xl text-accent">{data.pageName}</h3>
+          {data.entries.map((e) => e.title)}
+        </section>
+      </>
+    );
+  }
+};
+export default ResourcePage;

src/routes/Resources/index.tsx

@@ -0,0 +1,19 @@
+import CategoryCard from "./CategoryCard";
+
+const Resources = () => (
+  <main className="flex h-full w-full flex-col">
+    <section className="flex h-full flex-col justify-center">
+      <h3 className="my-12 text-center text-3xl text-secondary">Resources</h3>
+      <div className="grid w-full grid-cols-3 place-items-center gap-y-6 bg-background">
+        <CategoryCard name="HTML" slug="html" />
+        <CategoryCard name="CSS" slug="css" />
+        <CategoryCard name="JavaScript" slug="javascript" />
+        <CategoryCard name="Python" slug="python" />
+        <CategoryCard name="Java" slug="java" />
+        <CategoryCard name="C++" slug="c-plus-plus" />
+      </div>
+    </section>
+  </main>
+);
+
+export default Resources;