render resource page with cards for each json entry

Author: aedwardg

src/data/resources/css.json

@@ -9,7 +9,7 @@
     {
       "title": "Tailwind Official Docs",
       "url": "https://tailwindcss.com",
-      "tags": ["css", "official docs", "tailwind"]
+      "tags": ["css", "official docs", "tailwind", "test1", "test2", "test3"]
     },
     {
       "title": "CSS Flexbox Layout Guide",

src/routes/Resources/ResourceCard.tsx

@@ -0,0 +1,27 @@
+import { Entry } from "./types";
+
+const ResourceCard = ({ entry }: { entry: Entry }) => {
+  return (
+    <div className="min-h-24 min-w-56 rounded-md bg-slate-400 text-center shadow-lg shadow-gray-600 hover:shadow-2xl hover:shadow-gray-600">
+      <a
+        href={entry.url}
+        target="_blank"
+        rel="noreferrer"
+        className="flex h-full w-full flex-col justify-around px-6 py-4"
+      >
+        <p className="pb-4 text-xl text-primary">{entry.title}</p>
+        <div className="flex flex-wrap justify-center gap-2">
+          {entry.tags.map((t) => (
+            <div
+              key={t}
+              className="rounded-xl border-transparent bg-slate-300 px-2 pb-1"
+            >
+              {t}
+            </div>
+          ))}
+        </div>
+      </a>
+    </div>
+  );
+};
+export default ResourceCard;

src/routes/Resources/ResourcePage.tsx

@@ -1,16 +1,7 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router";
-
-interface JsonData {
-  pageName: string;
-  entries: Entry[];
-}
-
-interface Entry {
-  title: string;
-  url: string;
-  tags: string[];
-}
+import { JsonData } from "./types";
+import ResourceCard from "./ResourceCard";
 
 const ResourcePage = () => {
   const { category } = useParams();
@@ -41,9 +32,17 @@ const ResourcePage = () => {
   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 className="h-2/3 w-full bg-background">
+          <h3 className="my-12 text-center text-4xl text-primary">
+            {data.pageName}
+          </h3>
+          <div className="flex w-full justify-center">
+            <div className="mx-4 grid grid-cols-3 gap-x-4 sm:w-5/6 xl:w-3/4">
+              {data.entries.map((e) => (
+                <ResourceCard entry={e} key={e.title} />
+              ))}
+            </div>
+          </div>
         </section>
       </>
     );

src/routes/Resources/index.tsx

@@ -4,13 +4,15 @@ 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 className="flex w-full justify-center bg-background">
+        <div className="grid grid-cols-3 place-items-center gap-y-6 sm:w-5/6 xl:w-3/4">
+          <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>
       </div>
     </section>
   </main>

src/routes/Resources/types.ts

@@ -0,0 +1,10 @@
+export interface JsonData {
+  pageName: string;
+  entries: Entry[];
+}
+
+export interface Entry {
+  title: string;
+  url: string;
+  tags: string[];
+}