53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
/**
|
|
* @component TrustBadges
|
|
* @purpose Trust badges bar matching TechShop reference UI with dynamic API-driven data.
|
|
* @dependencies storefrontService, lucide-react
|
|
*/
|
|
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { Truck, RotateCcw, Headphones, ShieldCheck, LucideIcon } from 'lucide-react';
|
|
import { storefrontService, TrustBadge } from '@/services/api/storefrontService';
|
|
|
|
export function TrustBadges() {
|
|
const [badges, setBadges] = useState<TrustBadge[]>([]);
|
|
|
|
useEffect(() => {
|
|
storefrontService.getTrustBadges().then(setBadges);
|
|
}, []);
|
|
|
|
const getIcon = (iconName: string): LucideIcon => {
|
|
switch (iconName) {
|
|
case 'truck': return Truck;
|
|
case 'refresh': return RotateCcw;
|
|
case 'headset': return Headphones;
|
|
case 'shield': default: return ShieldCheck;
|
|
}
|
|
};
|
|
|
|
if (!badges || badges.length === 0) return null;
|
|
|
|
return (
|
|
<div className="w-full max-w-7xl mx-auto px-4 my-10">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{badges.map((badge) => {
|
|
const IconComponent = getIcon(badge.icon);
|
|
return (
|
|
<div
|
|
key={badge.id}
|
|
className="bg-[#eef4fc] rounded-2xl p-5 flex items-center gap-4 border border-blue-100 shadow-2xs hover:shadow-xs transition-shadow"
|
|
>
|
|
<div className="w-12 h-12 rounded-xl bg-white flex items-center justify-center shrink-0 shadow-2xs">
|
|
<IconComponent className="w-6 h-6 text-[#1877f2]" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-black text-gray-900 text-sm">{badge.title}</h4>
|
|
<p className="text-xs text-gray-500 font-medium mt-0.5">{badge.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|