toy card "View Detail" button text not switch to select language
This commit is contained in:
parent
f522dd88a1
commit
9d8c9856e0
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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',
|
||||||
|
|
|
||||||
|
|
@ -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': '電子郵件地址',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue