feat(ui): update listings page

uniconnect-app/app/app/listings/page.tsx

+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { PlusCircle } from 'lucide-react';
+
 export default function ListingsPage() {
-  return <div>ListingsPage</div>;
+  const listings = [
+    { id: 1, title: 'Calculus Textbook', price: 40, status: 'Active' },
+    { id: 2, title: 'Desk Lamp', price: 15, status: 'Sold' },
+    { id: 3, title: 'RHUL Sweatshirt', price: 25, status: 'Active' },
+  ];
+
+  return (
+    <div className='container mx-auto px-4 py-8'>
+      <div className='flex justify-between items-center mb-8'>
+        <h1 className='text-4xl font-bold'>Your Listings</h1>
+        <Button>
+          <PlusCircle className='mr-2 h-4 w-4' /> Add New Listing
+        </Button>
+      </div>
+      <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-3'>
+        {listings.map((listing) => (
+          <Card key={listing.id}>
+            <CardHeader>
+              <CardTitle>{listing.title}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className='font-bold'>£{listing.price}</p>
+              <Badge
+                variant={listing.status === 'Active' ? 'default' : 'secondary'}
+              >
+                {listing.status}
+              </Badge>
+            </CardContent>
+            <CardFooter className='flex justify-between'>
+              <Button variant='outline'>Edit</Button>
+              <Button variant='destructive'>Delete</Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
 }