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

refactor: update booking flow UI labels and enhance date picker input component

Browse Source
This commit is contained in:
230417
2026-05-04 10:18:53 +01:00
parent 05714a8d7b
commit b3082997b1
1 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/pages/Booking.tsx
View File

@@ -192,7 +192,6 @@ export default function Booking() {
<div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
<div className="space-y-2 text-center md:text-left">
<h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">1. Selecione o <span className="text-indigo-600">Serviço</span></h3>
<p className="text-slate-500 font-medium italic">O primeiro passo para o seu agendamento.</p>
</div>
<div className="grid md:grid-cols-2 gap-6">
{shop.services.map((s) => (
@@ -231,8 +230,7 @@ export default function Booking() {
{step === 2 && (
<div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
<div className="space-y-2 text-center md:text-left">
<h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">2. Escolha o <span className="text-indigo-600">Mestre</span></h3>
<p className="text-slate-500 font-medium italic">Selecione o artista que cuidará do seu visual.</p>
<h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">2. Escolha o <span className="text-indigo-600">Barbeiro</span></h3>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
{shop.barbers.map((b) => (
@@ -272,23 +270,25 @@ export default function Booking() {
{step === 3 && (
<div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
<div className="space-y-2 text-center md:text-left">
<h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">3. Escolha o <span className="text-indigo-600">Horário</span></h3>
<p className="text-slate-500 font-medium italic">Seu tempo é valioso. Escolha a data perfeita.</p>
<h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">3. Escolha a <span className="text-indigo-600">Data</span></h3>
</div>
<div className="max-w-md mx-auto relative">
<div className="absolute left-6 top-1/2 -translate-y-1/2 text-indigo-600 pointer-events-none z-10">
<Calendar size={20} />
<div className="flex items-center h-16 bg-slate-50 border-none rounded-2xl px-6 focus-within:ring-2 focus-within:ring-indigo-500/20 transition-all shadow-inner relative overflow-hidden">
<Calendar size={20} className="text-indigo-600 mr-4 shrink-0 pointer-events-none" />
<span className={`text-base sm:text-lg font-black uppercase tracking-widest pointer-events-none ${date ? 'text-slate-900' : 'text-slate-400'}`}>
{date ? new Date(date).toLocaleDateString('pt-PT', { day: 'numeric', month: 'long', year: 'numeric' }) : 'SELECIONAR DATA'}
</span>
<input
type="date"
value={date}
onChange={(e) => {
setDate(e.target.value);
if (e.target.value) setStep(4);
}}
min={new Date().toISOString().split('T')[0]}
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer m-0 p-0"
/>
</div>
<Input
type="date"
value={date}
onChange={(e) => {
setDate(e.target.value);
if (e.target.value) setStep(4);
}}
min={new Date().toISOString().split('T')[0]}
className="h-16 pl-14 pr-6 bg-slate-50 border-none rounded-2xl text-lg font-black uppercase tracking-widest text-slate-900 focus:ring-2 focus:ring-indigo-500/20 transition-all shadow-inner"
/>
</div>
</div>
)}
@@ -296,8 +296,7 @@ export default function Booking() {
{step === 4 && (
<div className="space-y-10 animate-in fade-in slide-in-from-bottom-4 duration-500">
<div className="space-y-2 text-center md:text-left">
<h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">4. Escolha o <span className="text-indigo-600">Horário Privilegiado</span></h3>
<p className="text-slate-500 font-medium italic">A pontualidade é a cortesia dos reis.</p>
<h3 className="text-xl sm:text-3xl font-black text-slate-900 tracking-tighter uppercase italic">4. Escolha o <span className="text-indigo-600">Horário</span></h3>
</div>
<div className="flex flex-col md:flex-row gap-6">