handle images

prahahackers24 · Jun 1, 2024 · 49caf75 · 49caf75
1 parent a7c3662
commit 49caf75
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/packages/nextjs/components/Campaigns.tsx b/packages/nextjs/components/Campaigns.tsx
@@ -51,7 +51,7 @@ useEffect(() => {
 
 
   return (
-    <div className="grid  grid-cols-4 mx-auto mt-8 items-center">
+    <div className="grid  grid-cols-3 mx-auto mt-8 items-center">
          {campaigns.map((campaign) => (
         <Card
           key={campaign.campaignId}

diff --git a/packages/nextjs/components/Card.tsx b/packages/nextjs/components/Card.tsx
@@ -36,25 +36,33 @@ export const Card: React.FC<CardProps> = ({ imgSrc, title, description, isLive,
     },
    }
 
-  return (
+   return (
     <div className="card bg-base-100 shadow-xl m-2 p-0">
-      <figure>
-              {/* @ts-ignore */}
-        <img src={imageAndTitleMapping[campaignId].imgSrc} alt="Shoes" />
+      <figure className="w-full h-48 overflow-hidden">
+        {/* @ts-ignore */}
+        <img src={imageAndTitleMapping[campaignId].imgSrc} alt="Shoes" className="w-full h-full object-cover" />
       </figure>
       <div className="card-body p-4">
-      {/* @ts-ignore */}
-        <h2 className="card-title text-md">{ imageAndTitleMapping[campaignId].title.length > 32 ? imageAndTitleMapping[campaignId].title.slice(0,32) + '...' :imageAndTitleMapping[campaignId].title }</h2>
+        {/* @ts-ignore */}
+        <h2 className="card-title text-md">
+             {/* @ts-ignore */}
+          {imageAndTitleMapping[campaignId].title.length > 21
+
+            ? 
+
+            imageAndTitleMapping[campaignId].title.slice(0, 21) + '...'
+            : imageAndTitleMapping[campaignId].title}
+        </h2>
         <p className="text-sm">{description}</p>
-        
+
         <div className="flex flex-row text-sm opacity-50">
-        <p>{'Owner: '}</p>
-        <Address  address={campaignOwner} size={"sm"}/>
+          <p>{'Owner: '}</p>
+          <Address address={campaignOwner} size={"sm"} />
         </div>
-        
+
         <div className="card-actions justify-center">
           <Link href={`/campaign/${campaignId}`}>
-          <button className="btn btn-primary">Donate Now!</button>
+            <button className="btn btn-primary">Donate Now!</button>
           </Link>
         </div>
       </div>