Files
ayrisapart/components/Amenities.tsx
2026-04-19 17:23:31 +03:00

47 lines
1.7 KiB
TypeScript

'use client'
import {
ShieldCheck,
Bell,
Car,
BedDouble,
CookingPot,
AirVent,
Bed,
Flame,
Wifi,
Video
} from 'lucide-react'
export default function Amenities({ dict }: { dict: any }) {
const ams = [
{ icon: <Video className="w-5 h-5" />, label: dict.amenities.cctv },
{ icon: <Bell className="w-5 h-5" />, label: dict.amenities.fire_alarm },
{ icon: <Car className="w-5 h-5" />, label: dict.amenities.parking },
{ icon: <BedDouble className="w-5 h-5" />, label: dict.amenities.double_bed },
{ icon: <CookingPot className="w-5 h-5" />, label: dict.amenities.kitchen },
{ icon: <AirVent className="w-5 h-5" />, label: dict.amenities.ac },
{ icon: <Bed className="w-5 h-5" />, label: dict.amenities.single_bed },
{ icon: <Flame className="w-5 h-5" />, label: dict.amenities.fire_ext },
{ icon: <Wifi className="w-5 h-5" />, label: dict.amenities.wifi },
]
return (
<div className="py-12 border-t border-[#1A1A1A]/10">
<h3 className="text-2xl font-serif text-[#1A1A1A] mb-10">{dict.amenities.title}</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-8 gap-x-12">
{ams.map((item, idx) => (
<div key={idx} className="flex items-center space-x-4 group">
<div className="bg-[#C88C4B]/10 p-3 rounded-full text-[#C88C4B] group-hover:bg-[#C88C4B] group-hover:text-white transition-all duration-300">
{item.icon}
</div>
<span className="text-lg text-[#1A1A1A]/60 font-medium group-hover:text-[#1A1A1A] transition-colors">
{item.label}
</span>
</div>
))}
</div>
</div>
)
}