177 lines
9.3 KiB
TypeScript
177 lines
9.3 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { MapPin, Phone, Mail, Clock, PawPrint, ChevronRight } from 'lucide-react';
|
|
import Header from '@/components/layout/Header';
|
|
import Footer from '@/components/layout/Footer';
|
|
|
|
interface Shelter {
|
|
id: string;
|
|
name: string;
|
|
district: string;
|
|
address: string;
|
|
phone: string;
|
|
email: string;
|
|
description: string | null;
|
|
website: string | null;
|
|
openHours: Record<string, string | null>;
|
|
_count: { animals: number };
|
|
}
|
|
|
|
const DAY_LABELS: Record<string, string> = {
|
|
mon: 'Seg', tue: 'Ter', wed: 'Qua',
|
|
thu: 'Qui', fri: 'Sex', sat: 'Sáb', sun: 'Dom',
|
|
};
|
|
|
|
export default function SheltersPage() {
|
|
const [shelters, setShelters] = useState<Shelter[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/shelters')
|
|
.then((r) => r.json())
|
|
.then((data) => setShelters(Array.isArray(data) ? data : []))
|
|
.catch(console.error)
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Header />
|
|
<main style={{ flex: 1 }}>
|
|
{/* Hero */}
|
|
<section style={{ padding: 'var(--space-9) 0 var(--space-7)', background: 'var(--cream)', borderBottom: '1px solid var(--parchment)' }}>
|
|
<div className="container">
|
|
<p className="eyebrow" style={{ marginBottom: '10px' }}>Portugal</p>
|
|
<h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'clamp(36px, 6vw, 60px)', color: 'var(--soil)', letterSpacing: '-0.03em', lineHeight: 1.05, marginBottom: 'var(--space-4)' }}>
|
|
Canis <em style={{ fontStyle: 'italic', color: 'var(--terra)' }}>parceiros.</em>
|
|
</h1>
|
|
<p style={{ fontFamily: 'var(--font-body)', fontSize: '18px', color: 'var(--soil-mid)', maxWidth: '520px', lineHeight: 1.65 }}>
|
|
Organizações verificadas em todo o país que trabalham diariamente para encontrar lares a animais abandonados.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Listagem */}
|
|
<section style={{ padding: 'var(--space-8) 0', background: 'var(--cream)' }}>
|
|
<div className="container">
|
|
{loading ? (
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 'var(--space-5)' }}>
|
|
{[1,2,3,4].map(i => (
|
|
<div key={i} className="skeleton-card">
|
|
<div className="skeleton skeleton-image" style={{ height: '120px' }} />
|
|
<div className="skeleton skeleton-title" />
|
|
<div className="skeleton skeleton-sub" />
|
|
<div className="skeleton skeleton-location" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : shelters.length === 0 ? (
|
|
<div style={{ textAlign: 'center', padding: 'var(--space-9) 0' }}>
|
|
<PawPrint size={48} style={{ margin: '0 auto 16px', opacity: 0.2, color: 'var(--soil)' }} />
|
|
<p style={{ fontFamily: 'var(--font-body)', fontSize: '18px', color: 'var(--soil-mid)' }}>
|
|
Nenhum canil disponível de momento.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))', gap: 'var(--space-5)' }}>
|
|
{shelters.map((shelter) => (
|
|
<article
|
|
key={shelter.id}
|
|
style={{
|
|
background: 'var(--linen)',
|
|
border: '1px solid var(--parchment)',
|
|
borderRadius: 'var(--radius-lg)',
|
|
overflow: 'hidden',
|
|
boxShadow: 'var(--shadow-warm-sm)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
transition: 'transform 220ms var(--ease-spring), box-shadow 220ms ease',
|
|
animation: 'cardReveal 500ms cubic-bezier(0.22, 1, 0.36, 1) both',
|
|
}}
|
|
onMouseEnter={e => {
|
|
const el = e.currentTarget as HTMLElement;
|
|
el.style.transform = 'translateY(-4px)';
|
|
el.style.boxShadow = 'var(--shadow-warm-lg)';
|
|
}}
|
|
onMouseLeave={e => {
|
|
const el = e.currentTarget as HTMLElement;
|
|
el.style.transform = 'translateY(0)';
|
|
el.style.boxShadow = 'var(--shadow-warm-sm)';
|
|
}}
|
|
>
|
|
{/* Header colorido */}
|
|
<div style={{ background: 'var(--terra-glow)', borderBottom: '1px solid var(--parchment)', padding: '20px 20px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
|
<div style={{ width: '40px', height: '40px', borderRadius: '12px', background: 'var(--terra)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
|
<PawPrint size={18} style={{ color: 'white' }} />
|
|
</div>
|
|
<div>
|
|
<h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '16px', color: 'var(--soil)', lineHeight: 1.2 }}>{shelter.name}</h2>
|
|
<p style={{ fontFamily: 'var(--font-accent)', fontSize: '10px', color: 'var(--soil-faint)', letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: '2px' }}>{shelter.district}</p>
|
|
</div>
|
|
</div>
|
|
<div style={{ textAlign: 'right' }}>
|
|
<div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '22px', color: 'var(--terra)', lineHeight: 1 }}>{shelter._count.animals}</div>
|
|
<div style={{ fontFamily: 'var(--font-accent)', fontSize: '9px', color: 'var(--soil-faint)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>disponíveis</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div style={{ padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: '10px', flex: 1 }}>
|
|
{shelter.description && (
|
|
<p style={{ fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: '14px', color: 'var(--soil-mid)', lineHeight: 1.6 }}>
|
|
{shelter.description.length > 120 ? `${shelter.description.slice(0, 120)}…` : shelter.description}
|
|
</p>
|
|
)}
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
<MapPin size={13} style={{ color: 'var(--terra)', flexShrink: 0 }} />
|
|
<span style={{ fontFamily: 'var(--font-body)', fontStyle: 'italic', fontSize: '13px', color: 'var(--soil-mid)' }}>{shelter.address}</span>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
<Phone size={13} style={{ color: 'var(--soil-faint)', flexShrink: 0 }} />
|
|
<a href={`tel:${shelter.phone}`} style={{ fontFamily: 'var(--font-body)', fontSize: '13px', color: 'var(--soil-mid)', textDecoration: 'none' }}>{shelter.phone}</a>
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
|
<Mail size={13} style={{ color: 'var(--soil-faint)', flexShrink: 0 }} />
|
|
<a href={`mailto:${shelter.email}`} style={{ fontFamily: 'var(--font-body)', fontSize: '13px', color: 'var(--terra)', textDecoration: 'none' }}>{shelter.email}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ flex: 1 }} />
|
|
|
|
<hr style={{ border: 'none', borderTop: '1px solid var(--parchment)', margin: '4px 0' }} />
|
|
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
|
<Link
|
|
href={`/main/animals?district=${encodeURIComponent(shelter.district)}`}
|
|
className="btn btn-secondary"
|
|
style={{ flex: 1, justifyContent: 'center', padding: '10px 12px', fontSize: '11px', minHeight: '40px' }}
|
|
>
|
|
Ver animais
|
|
</Link>
|
|
<Link
|
|
href={`/main/donate?shelterId=${shelter.id}`}
|
|
className="btn btn-primary"
|
|
style={{ flex: 1, justifyContent: 'center', padding: '10px 12px', fontSize: '11px', minHeight: '40px', gap: '4px' }}
|
|
>
|
|
Doar
|
|
<ChevronRight size={12} />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|