Initial commit: Holiday Travel App with resort comparison, trip management, and multi-provider search

components/DealCard.tsx

@@ -0,0 +1,29 @@
+'use client';
+import { ExternalLink, Plane, Calendar, DollarSign, Link as LinkIcon } from "lucide-react";
+import type { Deal } from "@/lib/types";
+
+export default function DealCard({ deal }: { deal: Deal }) {
+  return (
+    <div className="card p-4 flex flex-col gap-3">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h3 className="text-base md:text-lg font-semibold">{deal.title}</h3>
+          <div className="mt-1 flex flex-wrap gap-2">
+            <span className="badge">{deal.source}</span>
+            {deal.destination && <span className="badge"><Plane className="w-3 h-3 mr-1" /> {deal.origin} → {deal.destination}</span>}
+            {deal.nights != null && <span className="badge"><Calendar className="w-3 h-3 mr-1" /> {deal.nights} nights</span>}
+            {deal.price != null && <span className="badge"><DollarSign className="w-3 h-3 mr-1" />{deal.price} {deal.currency || ""}</span>}
+          </div>
+        </div>
+        <a className="btn" href={deal.link} target="_blank" rel="noreferrer">
+          Open <ExternalLink className="w-4 h-4 ml-2" />
+        </a>
+      </div>
+      <div className="text-sm opacity-80 flex gap-4">
+        {deal.startDate && <span>Depart: {deal.startDate}</span>}
+        {deal.endDate && <span>Return: {deal.endDate}</span>}
+        <span className="ml-auto flex items-center gap-1"><LinkIcon className="w-3 h-3" /> {new URL(deal.link, "http://x").host}</span>
+      </div>
+    </div>
+  );
+}