add description column add styling to resource container

donovangg · Mar 17, 2024 · dcb8b0c · dcb8b0c
1 parent be88761
commit dcb8b0c
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 29 deletions.
diff --git a/db/config.ts b/db/config.ts
@@ -9,6 +9,7 @@ const Resource = defineTable({
     category: column.text(),
     title: column.text(),
     imgSrc: column.text(),
+    description: column.text(),
   },
 });
 

diff --git a/db/seed.ts b/db/seed.ts
@@ -10,6 +10,8 @@ export default async function seed() {
       imgSrc:
         "https://qczsiistziidnaavyrgw.supabase.co/storage/v1/object/sign/players/mago-san.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJwbGF5ZXJzL21hZ28tc2FuLnBuZyIsImlhdCI6MTcxMDU3MTc0MCwiZXhwIjoxNzQyMTA3NzQwfQ.gJHiKEQq8Zi9lHzbPknqIkYgp_AJMkbsTAbwWdqEfWA&t=2024-03-16T06%3A49%3A00.087Z",
       id: 1,
+      description:
+        "I'm Mago san Kenryo  Hayashi is a Japanese Fighting Games player currently representing GyoGun.",
     },
     {
       link: "https://replaytheater.app/?game=unib",
@@ -18,6 +20,8 @@ export default async function seed() {
       imgSrc:
         "https://qczsiistziidnaavyrgw.supabase.co/storage/v1/object/sign/players/mago-san.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJwbGF5ZXJzL21hZ28tc2FuLnBuZyIsImlhdCI6MTcxMDU3MTc0MCwiZXhwIjoxNzQyMTA3NzQwfQ.gJHiKEQq8Zi9lHzbPknqIkYgp_AJMkbsTAbwWdqEfWA&t=2024-03-16T06%3A49%3A00.087Z",
       id: 2,
+      description:
+        "I'm Mago san Kenryo  Hayashi is a Japanese Fighting Games player currently representing GyoGun.",
     },
     {
       link: "https://replaytheater.app/?game=unib",
@@ -26,6 +30,8 @@ export default async function seed() {
       imgSrc:
         "https://qczsiistziidnaavyrgw.supabase.co/storage/v1/object/sign/players/mago-san.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJwbGF5ZXJzL21hZ28tc2FuLnBuZyIsImlhdCI6MTcxMDU3MTc0MCwiZXhwIjoxNzQyMTA3NzQwfQ.gJHiKEQq8Zi9lHzbPknqIkYgp_AJMkbsTAbwWdqEfWA&t=2024-03-16T06%3A49%3A00.087Z",
       id: 3,
+      description:
+        "I'm Mago san Kenryo  Hayashi is a Japanese Fighting Games player currently representing GyoGun.",
     },
     {
       link: "https://replaytheater.app/?game=unib",
@@ -34,6 +40,8 @@ export default async function seed() {
       imgSrc:
         "https://qczsiistziidnaavyrgw.supabase.co/storage/v1/object/sign/players/mago-san.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJwbGF5ZXJzL21hZ28tc2FuLnBuZyIsImlhdCI6MTcxMDU3MTc0MCwiZXhwIjoxNzQyMTA3NzQwfQ.gJHiKEQq8Zi9lHzbPknqIkYgp_AJMkbsTAbwWdqEfWA&t=2024-03-16T06%3A49%3A00.087Z",
       id: 4,
+      description:
+        "I'm Mago san Kenryo  Hayashi is a Japanese Fighting Games player currently representing GyoGun.",
     },
     {
       link: "https://replaytheater.app/?game=unib",
@@ -42,6 +50,8 @@ export default async function seed() {
       imgSrc:
         "https://qczsiistziidnaavyrgw.supabase.co/storage/v1/object/sign/players/mago-san.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJwbGF5ZXJzL21hZ28tc2FuLnBuZyIsImlhdCI6MTcxMDU3MTc0MCwiZXhwIjoxNzQyMTA3NzQwfQ.gJHiKEQq8Zi9lHzbPknqIkYgp_AJMkbsTAbwWdqEfWA&t=2024-03-16T06%3A49%3A00.087Z",
       id: 5,
+      description:
+        "I'm Mago san Kenryo  Hayashi is a Japanese Fighting Games player currently representing GyoGun.",
     },
     {
       link: "https://replaytheater.app/?game=unib",
@@ -50,6 +60,8 @@ export default async function seed() {
       imgSrc:
         "https://qczsiistziidnaavyrgw.supabase.co/storage/v1/object/sign/players/mago-san.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJwbGF5ZXJzL21hZ28tc2FuLnBuZyIsImlhdCI6MTcxMDU3MTc0MCwiZXhwIjoxNzQyMTA3NzQwfQ.gJHiKEQq8Zi9lHzbPknqIkYgp_AJMkbsTAbwWdqEfWA&t=2024-03-16T06%3A49%3A00.087Z",
       id: 6,
+      description:
+        "I'm Mago san Kenryo  Hayashi is a Japanese Fighting Games player currently representing GyoGun.",
     },
   ]);
 }
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -13,9 +13,9 @@ import MaxWidthWrapper from "./MaxWidthWrapper.astro";
       {/* Links */}
       <div class="hidden items-center space-x-4 sm:flex">
         <>
-          <a href="/biscuits"> About </a>
-          <a href="/biscuits"> About </a>
-          <a href="/biscuits"> Submit &rarr; </a>
+          <a class="text-neutral-200" href="/biscuits"> About </a>
+          <a class="text-neutral-200" href="/biscuits"> About </a>
+          <a class="text-neutral-200" href="/biscuits"> Submit &rarr; </a>
         </>
       </div>
     </div>

diff --git a/src/components/ResourceCard.tsx b/src/components/ResourceCard.tsx
@@ -6,6 +6,7 @@ interface ResourceCardProps {
   link: string;
   category: string;
   imgSrc: string;
+  description: string;
 }
 
 const ResourceCard = ({
@@ -14,30 +15,24 @@ const ResourceCard = ({
   link,
   category,
   imgSrc,
+  description,
 }: ResourceCardProps) => {
   return (
-    <div className="max-w-sm bg-zinc-800 rounded overflow-hidden shadow-lg">
-      <img className="w-full" src={imgSrc} alt="Sunset in the mountains" />
+    <article className="max-w-sm h-96 bg-zinc-800 rounded overflow-hidden shadow-lg">
+      <figure>
+        <img className="w-full" src={imgSrc} alt="Sunset in the mountains" />
+      </figure>
+
       <div className="px-6 py-4">
         <div className="font-bold text-xl mb-2">The Coldest Sunset</div>
-        <p className="text-gray-700 text-base">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
-          quia, nulla! Maiores et perferendis eaque, exercitationem praesentium
-          nihil.
-        </p>
+        <p className="text-gray-700 text-base">{description}</p>
       </div>
       <div className="px-6 pt-4 pb-2">
         <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-          #photography
-        </span>
-        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-          #travel
-        </span>
-        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-          #winter
+          {category}
         </span>
       </div>
-    </div>
+    </article>
   );
 };
 

diff --git a/src/components/ResourceContainer.tsx b/src/components/ResourceContainer.tsx
@@ -7,6 +7,7 @@ interface ResourceProps {
   title: string;
   id: number;
   imgSrc: string;
+  description: string;
 }
 
 interface ResourceContainerProps {
@@ -54,8 +55,8 @@ const ResourceContainer = ({ resources }: ResourceContainerProps) => {
       <div className="border-2 max-w-screen-2xl mx-auto flex gap-2">
         {/* Filter buttons */}
         <button
-          className={`group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-lg bg-zinc-900 ${
-            selectedCategory == "All" ? "bg-white text-zinc-950" : ""
+          className={`group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-lg  ${
+            selectedCategory == "All" ? "bg-white text-zinc-900" : "bg-zinc-900"
           } px-6 font-medium text-neutral-200`}
           onClick={() => handleCategoryChange("All")}
         >
@@ -66,8 +67,10 @@ const ResourceContainer = ({ resources }: ResourceContainerProps) => {
         {Array.from(new Set(resources.map((res) => res.category))).map(
           (category) => (
             <button
-              className={`group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-lg bg-zinc-900 ${
-                category == selectedCategory ? "bg-white text-zinc-950" : ""
+              className={`group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-lg ${
+                category == selectedCategory
+                  ? "bg-white text-zinc-900"
+                  : "bg-zinc-900 "
               } px-6 font-medium text-neutral-200`}
               key={category}
               onClick={() => handleCategoryChange(category)}
@@ -84,13 +87,7 @@ const ResourceContainer = ({ resources }: ResourceContainerProps) => {
         // Conditional rendering based on isLoading state
         <p>Loading...</p>
       ) : (
-        <section>
-          {/* {filteredResources.map((res) => (
-            <article key={res.id}>
-              {" "}
-              <h2 className="text-white">{res.title}</h2>
-            </article>
-          ))} */}
+        <section className="border-2 min-h-[800px] border-red-500 max-w-screen-2xl mx-auto grid justify-items-center  grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
           {filteredResources.map((res) => (
             <ResourceCard
               key={res.id}
@@ -99,6 +96,7 @@ const ResourceContainer = ({ resources }: ResourceContainerProps) => {
               link={res.link}
               category={res.category}
               imgSrc={res.imgSrc}
+              description={res.description}
             />
           ))}
         </section>