dashboard/rentals page is blank
This commit is contained in:
parent
2bc4fcc77f
commit
88576a15a2
|
|
@ -0,0 +1,91 @@
|
|||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { ShoppingBag, ToyBrick } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Image from "next/image";
|
||||
import type { Toy } from "@/types";
|
||||
import { mockToys } from "@/lib/mockData";
|
||||
import { getI18n } from "@/locales/server";
|
||||
|
||||
const rentedToys: (Toy & { rentalEndDate?: string, dataAiHint?: string })[] = [
|
||||
{ ...mockToys[1], rentalEndDate: "2024-08-15", dataAiHint: mockToys[1]?.category.toLowerCase() },
|
||||
{ ...mockToys[4], rentalEndDate: "2024-09-01", dataAiHint: mockToys[4]?.category.toLowerCase() },
|
||||
];
|
||||
|
||||
export default async function MyRentalsPage() {
|
||||
const t = await getI18n();
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold font-headline text-primary">{t('dashboard.rentals.title')}</h1>
|
||||
<p className="text-muted-foreground">{t('dashboard.rentals.description')}</p>
|
||||
</div>
|
||||
|
||||
{rentedToys.length === 0 ? (
|
||||
<Card className="text-center py-12 shadow-md">
|
||||
<CardHeader>
|
||||
<ShoppingBag className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
|
||||
<CardTitle>{t('dashboard.rentals.no_rentals_title')}</CardTitle>
|
||||
<CardDescription>{t('dashboard.rentals.no_rentals_description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Link href="/" passHref>
|
||||
<Button size="lg">
|
||||
<ToyBrick className="mr-2 h-5 w-5" />
|
||||
{t('dashboard.rentals.browse_toys_button')}
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{rentedToys.map(toy => (
|
||||
<RentalItemCard key={toy.id} toy={toy} t={t} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface RentalItemCardProps {
|
||||
toy: Toy & { rentalEndDate?: string, dataAiHint?: string };
|
||||
t: (key: string, params?: Record<string, string | number>) => string;
|
||||
}
|
||||
|
||||
function RentalItemCard({ toy, t }: RentalItemCardProps) {
|
||||
const placeholderHint = toy.dataAiHint || toy.category.toLowerCase() || "toy";
|
||||
return (
|
||||
<Card className="overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<div className="flex flex-col md:flex-row">
|
||||
<div className="md:w-1/3 lg:w-1/4 relative aspect-video md:aspect-auto">
|
||||
<Image
|
||||
src={toy.images[0] || 'https://placehold.co/300x200.png'}
|
||||
alt={toy.name}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
data-ai-hint={placeholderHint}
|
||||
className="md:rounded-l-lg md:rounded-tr-none rounded-t-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 p-6">
|
||||
<CardTitle className="text-2xl font-headline mb-1">{toy.name}</CardTitle>
|
||||
<p className="text-sm text-muted-foreground mb-2">{t('dashboard.rentals.rented_from', { ownerName: toy.ownerName })}</p>
|
||||
{toy.rentalEndDate && (
|
||||
<p className="text-sm font-semibold text-primary mb-3">
|
||||
{t('dashboard.rentals.rental_ends', { date: new Date(toy.rentalEndDate).toLocaleDateString() })}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-muted-foreground text-sm line-clamp-2 mb-4">{toy.description}</p>
|
||||
<div className="flex space-x-2">
|
||||
<Link href={`/toys/${toy.id}`} passHref>
|
||||
<Button variant="outline" size="sm">{t('dashboard.rentals.view_toy_details_button')}</Button>
|
||||
</Link>
|
||||
<Button variant="default" size="sm">{t('dashboard.rentals.contact_owner_button')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -120,4 +120,13 @@ export default {
|
|||
'add_toy_form.list_button': 'List My Toy',
|
||||
'add_toy_form.saving_button': 'Saving Changes...',
|
||||
'add_toy_form.listing_button': 'Listing Toy...',
|
||||
'dashboard.rentals.title': 'My Rentals',
|
||||
'dashboard.rentals.description': 'Toys you are currently renting from others.',
|
||||
'dashboard.rentals.no_rentals_title': 'No Active Rentals',
|
||||
'dashboard.rentals.no_rentals_description': "You haven't rented any toys yet. Explore available toys and find your next adventure!",
|
||||
'dashboard.rentals.browse_toys_button': 'Browse Toys',
|
||||
'dashboard.rentals.rented_from': 'Rented from: {ownerName}',
|
||||
'dashboard.rentals.rental_ends': 'Rental ends: {date}',
|
||||
'dashboard.rentals.view_toy_details_button': 'View Toy Details',
|
||||
'dashboard.rentals.contact_owner_button': 'Contact Owner',
|
||||
} as const;
|
||||
|
|
|
|||
|
|
@ -120,4 +120,13 @@ export default {
|
|||
'add_toy_form.list_button': '列出我的玩具',
|
||||
'add_toy_form.saving_button': '儲存變更中...',
|
||||
'add_toy_form.listing_button': '列出玩具中...',
|
||||
'dashboard.rentals.title': '我的租借',
|
||||
'dashboard.rentals.description': '您目前正在向他人租借的玩具。',
|
||||
'dashboard.rentals.no_rentals_title': '沒有進行中的租借',
|
||||
'dashboard.rentals.no_rentals_description': '您尚未租借任何玩具。探索可用玩具，尋找您的下一次冒險！',
|
||||
'dashboard.rentals.browse_toys_button': '瀏覽玩具',
|
||||
'dashboard.rentals.rented_from': '租借自：{ownerName}',
|
||||
'dashboard.rentals.rental_ends': '租借結束於：{date}',
|
||||
'dashboard.rentals.view_toy_details_button': '查看玩具詳情',
|
||||
'dashboard.rentals.contact_owner_button': '聯絡擁有者',
|
||||
} as const;
|
||||
|
|
|
|||
Loading…
Reference in New Issue