230417/smartagenda_pap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mudanças no shopcard

Browse Source
This commit is contained in:
230417
2026-03-03 15:36:56 +00:00
parent 1dd58aa092
commit 39248241a6
1 changed files with 24 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/components/ShopCard.tsx
View File

@@ -5,64 +5,58 @@ import { Card } from './ui/card';
import { Button } from './ui/button';
export const ShopCard = ({ shop }: { shop: BarberShop }) => {
// Distância simulada para o layout
const mockDistance = (Math.abs(shop.id.charCodeAt(0) * 11) % 900) + 100;
return (
<div className="bg-[#121212] rounded-2xl p-4 flex flex-col w-full border border-[#262626] hover:border-[#3a3a3a] transition-colors shadow-lg group">
<Card hover className="p-4 sm:p-5 flex flex-col w-full group">
<div className="flex gap-4">
{/* Avatar Circular com Badge de Rating */}
<div className="relative shrink-0 mt-1">
<div className="w-[72px] h-[72px] md:w-[84px] md:h-[84px] rounded-full border-2 border-[#1c1c1e] overflow-hidden bg-white flex items-center justify-center shadow-md">
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full border-2 border-slate-100 overflow-hidden bg-white flex items-center justify-center shadow-sm">
{shop.imageUrl ? (
<img src={shop.imageUrl} alt={shop.name} className="w-full h-full object-cover" />
) : (
<div className="text-[#121212] font-black text-center leading-none flex flex-col items-center justify-center h-full w-full bg-slate-100">
<Scissors size={24} className="text-slate-800 mb-1" />
<div className="text-slate-400 font-black text-center leading-none flex flex-col items-center justify-center h-full w-full bg-slate-50">
<Scissors size={24} className="text-slate-400 mb-1" />
</div>
)}
</div>
{/* Rating Badge - Posicionado em cima à direita como na imagem */}
<div className="absolute -top-1 -right-2 bg-[#1c1c1e] border border-[#2c2c2e] px-2 py-0.5 rounded-full flex items-center gap-[2px] shadow-lg">
<Star size={11} className="fill-amber-500 text-amber-500" />
<span className="text-[#f5f5f7] text-[11px] font-semibold tracking-wide">
{/* Rating Badge - Posicionado em cima à direita como na imagem base */}
<div className="absolute -top-1 -right-2 bg-slate-800 border border-slate-700 px-2 py-0.5 rounded-full flex items-center gap-[2px] shadow-sm z-10">
<Star size={11} className="fill-amber-400 text-amber-400" />
<span className="text-white text-[11px] font-semibold tracking-wide">
{shop.rating ? shop.rating.toFixed(1) : '0.0'}
</span>
</div>
</div>
{/* Informações da Barbearia */}
<div className="flex flex-col justify-center flex-1 py-1">
<h2 className="text-[#f5f5f7] text-[16px] md:text-[17px] font-semibold uppercase tracking-wide truncate mb-1.5 group-hover:text-amber-500 transition-colors">
<div className="flex flex-col flex-1 py-1">
<h2 className="text-slate-900 text-base md:text-lg font-bold uppercase tracking-wide truncate mb-1.5 group-hover:text-amber-600 transition-colors">
{shop.name}
</h2>
<p className="text-[#8e8e93] text-[13px] leading-snug line-clamp-2 pr-1 mb-3">
{shop.address || 'Endereço Indisponível'}
</p>
<div className="flex items-start gap-1.5 text-slate-500 mb-2">
<MapPin size={16} className="shrink-0 mt-0.5 text-amber-600" />
<p className="text-sm leading-snug line-clamp-2 pr-1">
{shop.address || 'Endereço Indisponível'}
</p>
</div>
<div className="flex items-center gap-1.5 mt-auto">
<MapPin size={15} className="text-[#ff3b30] fill-[#ff3b30]" />
<span className="text-[#e5e5ea] text-[14px] font-medium tracking-wide">
{mockDistance} m
</span>
<div className="flex items-center gap-2 text-xs text-slate-500 mt-auto font-medium">
<span>{(shop.services || []).length} serviços</span>
<span className="text-slate-300">•</span>
<span>{(shop.barbers || []).length} barbeiros</span>
</div>
</div>
</div>
{/* Botões de Ação na base */}
<div className="flex gap-2 pt-4 mt-4 border-t border-[#262626]">
<Button asChild variant="outline" size="sm" className="flex-1 bg-transparent border-[#3a3a3a] text-[#c7c7cc] hover:bg-[#1c1c1e] hover:text-[#f5f5f7] hover:border-[#4a4a4a]">
<div className="flex gap-2 pt-4 mt-4 border-t border-slate-100">
<Button asChild variant="outline" size="sm" className="flex-1">
<Link to={`/barbearia/${shop.id}`}>Ver detalhes</Link>
</Button>
<Button asChild size="sm" className="flex-1 bg-[#2563eb] hover:bg-[#1d4ed8] text-white border-0 shadow-md">
<Button asChild size="sm" className="flex-1 bg-amber-600 hover:bg-amber-700 border-0">
<Link to={`/agendar/${shop.id}`}>Agendar</Link>
</Button>
</div>
</div>
</Card>
);
};