MarkusandDevin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2b24334bfa
Adds the complete Next.js website including i18n routing, house and apartment pages, Beds24 v2 integration for live availability/pricing, Stripe checkout, contact forms, Docker setup and deployment docs. Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Apartment } from "@/src/config/apartments";
|
|
import { Users, ArrowRight, Wind } from "lucide-react";
|
|
|
|
interface ApartmentCardProps {
|
|
apartment: Apartment;
|
|
locale: string;
|
|
}
|
|
|
|
export function ApartmentCard({ apartment, locale }: ApartmentCardProps) {
|
|
const displayName = locale === "de" ? apartment.name : apartment.nameEn;
|
|
const displayFloor = locale === "de" ? apartment.floor : apartment.floorEn;
|
|
const hasAc = apartment.amenities.some((a) => a.toLowerCase().includes("klimaanlage"));
|
|
|
|
return (
|
|
<div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-brand-grey-soft hover:shadow-lg transition-shadow">
|
|
<div className="relative h-48">
|
|
<Image
|
|
src={apartment.images[0] || "/images/placeholder.jpg"}
|
|
alt={displayName}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div
|
|
className={`absolute top-3 right-3 flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1.5 rounded-full backdrop-blur-sm ${
|
|
hasAc ? "bg-brand-green/90 text-white" : "bg-white/90 text-brand-grey"
|
|
}`}
|
|
title={
|
|
hasAc
|
|
? locale === "de"
|
|
? "Klimaanlage vorhanden"
|
|
: "Air conditioning available"
|
|
: locale === "de"
|
|
? "Keine Klimaanlage"
|
|
: "No air conditioning"
|
|
}
|
|
>
|
|
<Wind className={`w-3.5 h-3.5 ${hasAc ? "" : "opacity-40"}`} />
|
|
{hasAc
|
|
? locale === "de"
|
|
? "Klimaanlage"
|
|
: "AC"
|
|
: locale === "de"
|
|
? "Keine Klimaanlage"
|
|
: "No AC"}
|
|
</div>
|
|
</div>
|
|
<div className="p-5">
|
|
<h3 className="text-xl font-bold mb-1 text-brand-grey-dark">
|
|
{displayName}
|
|
</h3>
|
|
<p className="text-brand-grey-light text-sm mb-4">{displayFloor}</p>
|
|
<div className="flex items-center gap-2 text-sm text-brand-grey mb-4">
|
|
<Users className="w-4 h-4 text-brand-green" />
|
|
<span>
|
|
{apartment.maxGuests} {locale === "de" ? "Gäste" : "guests"}
|
|
</span>
|
|
</div>
|
|
<Link
|
|
href={`/${locale}/apartments/${apartment.slug}`}
|
|
className="inline-flex items-center gap-2 text-brand-green-dark font-medium hover:text-brand-green transition-colors"
|
|
>
|
|
{locale === "de" ? "Details ansehen" : "View details"}
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|