refactor: update UI components and page layouts
Some checks failed
Build and Push Docker Image / build-and-push (push) Has been cancelled

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Adriano Belisario
2026-05-03 18:18:31 +00:00
parent ee884ccdf2
commit 52f75f0b3d
8 changed files with 56 additions and 94 deletions

View File

@@ -70,14 +70,14 @@ export default function PublicWishlistPage() {
setClaimNote('');
fetchWishlist();
} catch (err: any) {
setClaimError(err.message || 'Failed to claim item');
setClaimError(err.message || 'Erro ao reservar item');
} finally {
setIsClaiming(false);
}
};
const handleUnclaim = async (itemId: string) => {
if (!confirm('Are you sure you want to unclaim this item?')) {
if (!confirm('Tem certeza que deseja cancelar a reserva deste item?')) {
return;
}
@@ -88,7 +88,7 @@ export default function PublicWishlistPage() {
await claimingApi.unclaim(itemId);
fetchWishlist();
} catch (err: any) {
setUnclaimError(err.message || 'Failed to unclaim item');
setUnclaimError(err.message || 'Erro ao cancelar reserva');
} finally {
setIsUnclaiming(false);
}
@@ -100,16 +100,16 @@ export default function PublicWishlistPage() {
const formatPrice = (price: number | null, currency: string) => {
if (!price) return null;
return new Intl.NumberFormat('en-US', {
return new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: currency || 'USD',
currency: currency || 'BRL',
}).format(price);
};
if (isLoading) {
return (
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
<p className="text-gray-600 dark:text-gray-400">Loading...</p>
<p className="text-gray-600 dark:text-gray-400">Carregando...</p>
</div>
);
}
@@ -118,8 +118,8 @@ export default function PublicWishlistPage() {
return (
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
<div className="text-center">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Wishlist Not Found</h1>
<p className="text-gray-600 dark:text-gray-400">{error || 'This wishlist does not exist or is not public.'}</p>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Lista não encontrada</h1>
<p className="text-gray-600 dark:text-gray-400">{error || 'Esta lista não existe ou não é pública.'}</p>
</div>
</div>
);
@@ -155,14 +155,14 @@ export default function PublicWishlistPage() {
d="M10 19l-7-7m0 0l7-7m-7 7h18"
/>
</svg>
Back to Home
Voltar ao início
</a>
{/* Preferences Section */}
{wishlist.preferences && (
<div className="mb-8 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
General Interests & Preferences
Interesses e Preferências
</h2>
<div
className="prose prose-indigo dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 [&_a]:text-indigo-600 [&_a]:dark:text-indigo-400 [&_a]:hover:underline"
@@ -189,11 +189,11 @@ export default function PublicWishlistPage() {
onChange={(e) => setShowClaimed(e.target.checked)}
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
/>
<span className="ml-2 text-sm text-gray-700 dark:text-gray-300">Show claimed items</span>
<span className="ml-2 text-sm text-gray-700 dark:text-gray-300">Mostrar itens reservados</span>
</label>
</div>
<div className="text-sm text-gray-600 dark:text-gray-400">
{filteredItems.length} of {items.length} items
{filteredItems.length} de {items.length} itens
</div>
</div>
@@ -201,7 +201,7 @@ export default function PublicWishlistPage() {
{filteredItems.length === 0 ? (
<div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow">
<p className="text-gray-500 dark:text-gray-400">
{showClaimed ? 'No items in this wishlist yet' : 'All items have been claimed!'}
{showClaimed ? 'Nenhum item nesta lista ainda' : 'Todos os itens já foram reservados!'}
</p>
</div>
) : (
@@ -272,30 +272,30 @@ export default function PublicWishlistPage() {
</div>
</div>
<p className="text-center text-lg font-semibold text-gray-900 dark:text-white mb-1">
Item Claimed!
Item reservado!
</p>
<p className="text-center text-sm text-gray-600 dark:text-gray-400 mb-2">
The status is now locked.
O status está confirmado.
</p>
{justClaimedNote && (
<p className="text-center text-xs text-gray-600 dark:text-gray-400 italic">
Your Note: &quot;{justClaimedNote}&quot;
Sua nota: &quot;{justClaimedNote}&quot;
</p>
)}
</div>
) : item.claimedAt ? (
<div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded p-3">
<p className="text-sm font-medium text-green-800 dark:text-green-200">
Claimed by {item.claimedByName}
Reservado por {item.claimedByName}
</p>
{item.claimedByNote && (
<p className="text-xs text-green-700 dark:text-green-300 mt-1">
Note: {item.claimedByNote}
Nota: {item.claimedByNote}
</p>
)}
{item.isPurchased && (
<p className="text-xs text-green-700 dark:text-green-300 mt-1 font-medium">
Purchased
Comprado
</p>
)}
{showClaimed && (
@@ -304,7 +304,7 @@ export default function PublicWishlistPage() {
disabled={isUnclaiming}
className="mt-3 w-full px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 font-medium disabled:opacity-50 transition-colors cursor-pointer text-sm"
>
{isUnclaiming ? 'Unclaiming...' : 'Unclaim Item'}
{isUnclaiming ? 'Cancelando...' : 'Cancelar reserva'}
</button>
)}
</div>
@@ -319,12 +319,12 @@ export default function PublicWishlistPage() {
<div>
<label htmlFor={`claim-note-${item.id}`} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Add a Note (Optional):
Deixe uma nota (opcional):
</label>
<textarea
id={`claim-note-${item.id}`}
rows={3}
placeholder="Let them know your plans! e.g., 'Buying this next week' or 'Found a great deal online' or 'Need to check the size first'"
placeholder="Ex: 'Vou comprar na semana que vem' ou 'Achei uma boa promoção'"
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:text-white resize-none"
value={claimNote}
onChange={(e) => setClaimNote(e.target.value)}
@@ -336,7 +336,7 @@ export default function PublicWishlistPage() {
disabled={isClaiming}
className="w-full px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 font-medium disabled:opacity-50 transition-colors cursor-pointer"
>
{isClaiming ? 'Claiming...' : 'Confirm Claim'}
{isClaiming ? 'Reservando...' : 'Confirmar reserva'}
</button>
</form>
</div>
@@ -345,7 +345,7 @@ export default function PublicWishlistPage() {
onClick={() => handleClaimItem(item.id)}
className="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 font-medium transition-colors cursor-pointer"
>
Claim This Item
Vou dar este presente
</button>
)}
</div>