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

refactor: redesign barber item UI, update grid layout, and simplify specialty display in BarberList.

Browse Source
This commit is contained in:
230417
2026-03-17 15:26:38 +00:00
parent bdc4b56d49
commit ab8b244f59
1 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
web/src/components/BarberList.tsx
View File

@@ -1,44 +1,53 @@
import { Card } from './ui/card';
import { Barber } from '../types';
import { User, Scissors } from 'lucide-react';
export const BarberList = ({ barbers }: { barbers: Barber[] }) => (
<div className="grid md:grid-cols-3 gap-4">
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
{barbers.map((b) => (
<Card key={b.id} hover className="p-5 flex flex-col items-center text-center gap-4 group">
<div
key={b.id}
className="flex flex-col items-center text-center gap-3 group cursor-pointer"
>
{/* Foto circular */}
<div className="relative">
<div className="w-full aspect-square rounded-2xl overflow-hidden border-4 border-slate-50 bg-slate-100 flex items-center justify-center shadow-sm group-hover:border-indigo-100 transition-colors">
<div className="w-24 h-24 rounded-full overflow-hidden border-4 border-white bg-slate-200 flex items-center justify-center shadow-md group-hover:border-amber-400 transition-colors duration-300">
{b.imageUrl ? (
<img src={b.imageUrl} alt={b.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
<img
src={b.imageUrl}
alt={b.name}
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
/>
) : (
<User size={40} className="text-slate-300" />
<User size={36} className="text-slate-400" />
)}
</div>
<div className="absolute -bottom-1 -right-1 w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white border-2 border-white shadow-sm">
<Scissors size={14} />
{/* Badge tesoura */}
<div className="absolute -bottom-1 -right-1 w-7 h-7 bg-amber-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-sm">
<Scissors size={12} />
</div>
</div>
{/* Nome */}
<div>
<h3 className="font-bold text-slate-900 text-lg group-hover:text-indigo-700 transition-colors">{b.name}</h3>
<div className="mt-2 flex flex-wrap justify-center gap-1">
{b.specialties.map((spec, i) => (
<span key={i} className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-[10px] font-bold uppercase tracking-wider">
{spec}
</span>
))}
{b.specialties.length === 0 && (
<span className="text-xs text-slate-400 italic">Especialista em tudo</span>
)}
</div>
<p className="font-semibold text-sm text-slate-900 group-hover:text-amber-600 transition-colors leading-tight">
{b.name}
</p>
{b.specialties.length > 0 ? (
<p className="text-xs text-slate-400 mt-0.5 truncate max-w-[100px]">
{b.specialties[0]}
</p>
) : (
<p className="text-xs text-slate-400 mt-0.5 italic">Especialista</p>
)}
</div>
</Card>
</div>
))}
{barbers.length === 0 && (
<div className="col-span-full py-20 text-center">
<User size={48} className="mx-auto text-slate-200 mb-4" />
<User size={48} className="mx-auto text-slate-300 mb-4" />
<p className="text-slate-500 font-medium">Esta barbearia ainda não registou barbeiros.</p>
</div>
)}
</div>
);
);