47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import {
|
|
Star, Wind, Anchor, Utensils, BedDouble, Sun,
|
|
Waves, Bike, Coffee, Music, MapPin, Camera, Heart, Compass,
|
|
Fish, Mountain, Dumbbell, Leaf, Shield, Umbrella, Flame,
|
|
type LucideIcon,
|
|
} from "lucide-react";
|
|
|
|
const ICON_MAP: Record<string, LucideIcon> = {
|
|
Wind, Anchor, Utensils, BedDouble, Sun, Star, Waves, Bike,
|
|
Coffee, Music, MapPin, Camera, Heart, Compass, Fish, Mountain,
|
|
Dumbbell, Leaf, Shield, Umbrella, Flame,
|
|
};
|
|
|
|
interface Feature {
|
|
icon: string | null;
|
|
label: string;
|
|
sub: string;
|
|
}
|
|
|
|
interface FeaturesStripProps {
|
|
features: Feature[];
|
|
}
|
|
|
|
export default function FeaturesStrip({ features }: FeaturesStripProps) {
|
|
return (
|
|
<section className="bg-dark text-white py-8">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-2 md:grid-cols-5 divide-x divide-white/8">
|
|
{features.map(({ icon, label, sub }, i) => {
|
|
const IconComponent = ICON_MAP[icon as string] || Star;
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={`flex flex-col items-center justify-center gap-2 py-6 px-4 group ${i >= 2 ? "hidden md:flex" : ""}`}
|
|
>
|
|
<IconComponent className="w-5 h-5 text-accent group-hover:scale-110 transition-transform duration-300" />
|
|
<span className="text-[13px] font-semibold text-center">{label}</span>
|
|
<span className="text-[11px] text-white/40 text-center">{sub}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|