feat(ui): update wishlist page

uniconnect-app/app/app/wishlist/page.tsx

+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Trash2 } from 'lucide-react';
+
 export default function WishlistPage() {
-  return <div>WishlistPage</div>;
+  const wishlistItems = [
+    { id: 1, name: 'Advanced Mathematics Textbook', price: 55 },
+    { id: 2, name: 'Laptop Stand', price: 25 },
+    { id: 3, name: 'Wireless Earbuds', price: 40 },
+  ];
+
+  return (
+    <div className='container mx-auto px-4 py-8'>
+      <h1 className='text-4xl font-bold mb-8'>Your Wishlist</h1>
+      <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-3'>
+        {wishlistItems.map((item) => (
+          <Card key={item.id}>
+            <CardHeader>
+              <CardTitle>{item.name}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className='font-bold'>£{item.price}</p>
+            </CardContent>
+            <CardFooter className='flex justify-between'>
+              <Button>Add to Cart</Button>
+              <Button variant='outline' size='icon'>
+                <Trash2 className='h-4 w-4' />
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
 }