toy card "View Detail" button text not switch to select language

This commit is contained in:
Indigo Tang 2025-06-09 04:33:44 +00:00
parent f522dd88a1
commit 9d8c9856e0
6 changed files with 16 additions and 9 deletions

View File

@ -92,7 +92,7 @@ export default async function OwnerToysPage({ params }: OwnerToysPageProps) {
)} )}
{ownerToys.length > 0 ? ( {ownerToys.length > 0 ? (
<ToyList toys={ownerToys.map(toy => ({...toy, dataAiHint: toy.category.toLowerCase()}))} /> <ToyList toys={ownerToys.map(toy => ({...toy, dataAiHint: toy.category.toLowerCase()}))} t={t} />
) : ( ) : (
<Card className="text-center py-12 shadow-md"> <Card className="text-center py-12 shadow-md">
<CardHeader> <CardHeader>

View File

@ -1,3 +1,4 @@
import ToyList from '@/components/toys/ToyList'; import ToyList from '@/components/toys/ToyList';
import { mockToys } from '@/lib/mockData'; import { mockToys } from '@/lib/mockData';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@ -36,7 +37,7 @@ export default async function HomePage() {
<h2 className="text-3xl font-bold font-headline text-center mb-8 text-primary"> <h2 className="text-3xl font-bold font-headline text-center mb-8 text-primary">
{t('home.available_toys')} {t('home.available_toys')}
</h2> </h2>
<ToyList toys={mockToys.map(toy => ({...toy, dataAiHint: toy.category.toLowerCase()}))} /> <ToyList toys={mockToys.map(toy => ({...toy, dataAiHint: toy.category.toLowerCase()}))} t={t} />
</section> </section>
</div> </div>
); );

View File

@ -1,3 +1,4 @@
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import type { Toy } from '@/types'; import type { Toy } from '@/types';
@ -6,10 +7,11 @@ import { Button } from '@/components/ui/button';
import { DollarSign, MapPin, Tag } from 'lucide-react'; import { DollarSign, MapPin, Tag } from 'lucide-react';
interface ToyCardProps { interface ToyCardProps {
toy: Toy & { dataAiHint?: string }; // dataAiHint is for placeholder, not part of core Toy type toy: Toy & { dataAiHint?: string };
t: (key: string) => string; // Add t function prop
} }
export default function ToyCard({ toy }: ToyCardProps) { export default function ToyCard({ toy, t }: ToyCardProps) {
const primaryImage = toy.images && toy.images.length > 0 ? toy.images[0] : 'https://placehold.co/300x200.png'; const primaryImage = toy.images && toy.images.length > 0 ? toy.images[0] : 'https://placehold.co/300x200.png';
const placeholderHint = toy.dataAiHint || toy.category.toLowerCase() || "toy"; const placeholderHint = toy.dataAiHint || toy.category.toLowerCase() || "toy";
@ -43,7 +45,7 @@ export default function ToyCard({ toy }: ToyCardProps) {
{toy.pricePerDay !== undefined && ( {toy.pricePerDay !== undefined && (
<div className="flex items-center font-semibold text-foreground"> <div className="flex items-center font-semibold text-foreground">
<DollarSign className="h-4 w-4 mr-1 text-accent" /> <DollarSign className="h-4 w-4 mr-1 text-accent" />
<span>{toy.pricePerDay > 0 ? `${toy.pricePerDay}/day` : 'Free'}</span> <span>{toy.pricePerDay > 0 ? `$${toy.pricePerDay}${t('toy_details.price_per_day')}` : t('toy_details.price_free')}</span>
</div> </div>
)} )}
</div> </div>
@ -51,7 +53,7 @@ export default function ToyCard({ toy }: ToyCardProps) {
<CardFooter className="p-4 border-t"> <CardFooter className="p-4 border-t">
<Link href={`/toys/${toy.id}`} passHref className="w-full"> <Link href={`/toys/${toy.id}`} passHref className="w-full">
<Button variant="default" className="w-full transition-transform transform hover:scale-105"> <Button variant="default" className="w-full transition-transform transform hover:scale-105">
View Details {t('dashboard.rentals.view_toy_details_button')}
</Button> </Button>
</Link> </Link>
</CardFooter> </CardFooter>

View File

@ -1,19 +1,21 @@
import type { Toy } from '@/types'; import type { Toy } from '@/types';
import ToyCard from './ToyCard'; import ToyCard from './ToyCard';
interface ToyListProps { interface ToyListProps {
toys: (Toy & { dataAiHint?: string })[]; toys: (Toy & { dataAiHint?: string })[];
t: (key: string) => string; // Add t function prop
} }
export default function ToyList({ toys }: ToyListProps) { export default function ToyList({ toys, t }: ToyListProps) {
if (!toys || toys.length === 0) { if (!toys || toys.length === 0) {
return <p className="text-center text-muted-foreground py-8">No toys available at the moment. Check back soon!</p>; return <p className="text-center text-muted-foreground py-8">{t('home.no_toys_available')}</p>; // Assuming a key like this or create a new one
} }
return ( return (
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
{toys.map((toy) => ( {toys.map((toy) => (
<ToyCard key={toy.id} toy={toy} /> <ToyCard key={toy.id} toy={toy} t={t} />
))} ))}
</div> </div>
); );

View File

@ -15,6 +15,7 @@ export default {
'home.explore_toys': 'Explore Toys', 'home.explore_toys': 'Explore Toys',
'home.share_your_toy': 'Share Your Toy', 'home.share_your_toy': 'Share Your Toy',
'home.available_toys': 'Available Toys', 'home.available_toys': 'Available Toys',
'home.no_toys_available': 'No toys available at the moment. Check back soon!',
'login.welcome_back': 'Welcome Back!', 'login.welcome_back': 'Welcome Back!',
'login.description': 'Log in to your ToyShare account to continue.', 'login.description': 'Log in to your ToyShare account to continue.',
'login.email_label': 'Email Address', 'login.email_label': 'Email Address',

View File

@ -15,6 +15,7 @@ export default {
'home.explore_toys': '探索玩具', 'home.explore_toys': '探索玩具',
'home.share_your_toy': '分享您的玩具', 'home.share_your_toy': '分享您的玩具',
'home.available_toys': '現有玩具', 'home.available_toys': '現有玩具',
'home.no_toys_available': '目前沒有可用的玩具。請稍後再回來查看!',
'login.welcome_back': '歡迎回來!', 'login.welcome_back': '歡迎回來!',
'login.description': '登入您的 ToyShare 帳戶以繼續。', 'login.description': '登入您的 ToyShare 帳戶以繼續。',
'login.email_label': '電子郵件地址', 'login.email_label': '電子郵件地址',