Refactor petition cards layout

Updated petition cards to use the Card component for better styling and maintainability. Enhanced responsiveness with a new flex layout for images and content, and improved visual presentation with updated spacing and typography.

Took 3 minutes

Author: mikepsinn

app/petitions/page.tsx

@@ -4,6 +4,7 @@ import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { PlusIcon } from "lucide-react"
 import { LoginPromptButton } from "@/components/LoginPromptButton"
+import { Card, CardContent } from "@/components/ui/card"
 
 export default async function PetitionsPage() {
   const session = await getServerSession()
@@ -20,13 +21,13 @@ export default async function PetitionsPage() {
   })
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="flex justify-between items-center mb-8">
-        <h1 className="text-3xl font-bold">Active Petitions</h1>
+    <div className="container space-y-8">
+      <div className="flex justify-between items-center">
+        <h1 className="text-3xl font-bold tracking-tight">Active Petitions</h1>
         {session?.user ? (
           <Link href="/petitions/create">
             <Button>
-              <PlusIcon className="w-4 h-4 mr-2" />
+              <PlusIcon className="h-4 w-4 mr-2" />
               Create Petition
             </Button>
           </Link>
@@ -38,26 +39,33 @@ export default async function PetitionsPage() {
         )}
       </div>
 
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <div className="space-y-6">
         {petitions.map((petition) => (
           <Link 
             key={petition.id} 
             href={`/petitions/${petition.id}`}
-            className="block p-6 bg-white rounded-lg shadow hover:shadow-md transition-shadow"
           >
-            {petition.imageUrl && (
-              <img 
-                src={petition.imageUrl} 
-                alt={petition.title}
-                className="w-full h-48 object-cover rounded-md mb-4"
-              />
-            )}
-            <h2 className="text-xl font-semibold mb-2">{petition.title}</h2>
-            <p className="text-gray-600 mb-4">{petition.summary}</p>
-            <div className="flex justify-between items-center text-sm text-gray-500">
-              <span>{petition._count.signatures} signatures</span>
-              <span>Created by {petition.creator.name}</span>
-            </div>
+            <Card className="hover:bg-muted/50 transition-colors">
+              <div className="flex flex-col md:flex-row">
+                {petition.imageUrl && (
+                  <div className="md:w-1/3">
+                    <img 
+                      src={petition.imageUrl} 
+                      alt={petition.title}
+                      className="w-full h-48 md:h-full object-cover rounded-t-lg md:rounded-l-lg md:rounded-tr-none"
+                    />
+                  </div>
+                )}
+                <CardContent className={`flex-1 ${petition.imageUrl ? "pt-4 md:pt-6" : "pt-6"}`}>
+                  <h2 className="text-2xl font-semibold mb-3">{petition.title}</h2>
+                  <p className="text-muted-foreground mb-4 line-clamp-2">{petition.summary}</p>
+                  <div className="flex justify-between items-center text-sm text-muted-foreground">
+                    <span>{petition._count.signatures} signatures</span>
+                    <span>Created by {petition.creator.name}</span>
+                  </div>
+                </CardContent>
+              </div>
+            </Card>
           </Link>
         ))}
       </div>