add card component

src/components/ResourceCard.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+interface ResourceCardProps {
+  id: number;
+  title: string;
+  link: string;
+  category: string;
+  imgSrc: string;
+}
+
+const ResourceCard = ({
+  id,
+  title,
+  link,
+  category,
+  imgSrc,
+}: 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" />
+      <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>
+      </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
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default ResourceCard;

src/components/ResourceContainer.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from "react";
+import ResourceCard from "./ResourceCard";
 
 interface ResourceProps {
   link: string;
   category: string;
   title: string;
   id: number;
+  imgSrc: string;
 }
 
 interface ResourceContainerProps {
@@ -82,14 +84,24 @@ const ResourceContainer = ({ resources }: ResourceContainerProps) => {
         // Conditional rendering based on isLoading state
         <p>Loading...</p>
       ) : (
-        <>
-          {filteredResources.map((res) => (
+        <section>
+          {/* {filteredResources.map((res) => (
             <article key={res.id}>
               {" "}
               <h2 className="text-white">{res.title}</h2>
             </article>
+          ))} */}
+          {filteredResources.map((res) => (
+            <ResourceCard
+              key={res.id}
+              id={res.id}
+              title={res.title}
+              link={res.link}
+              category={res.category}
+              imgSrc={res.imgSrc}
+            />
           ))}
-        </>
+        </section>
       )}
     </div>
   );

src/pages/biscuits.astro

@@ -0,0 +1,5 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Biscuits"> Biscuits hops on commentaryu </Layout>