215 lines
12 KiB
TypeScript
215 lines
12 KiB
TypeScript
import Link from "next/link";
|
||
import Image from "next/image";
|
||
import ProfileSidebar from "@/app/profile/components/ProfileSidebar";
|
||
import { MoveHorizontal, Users } from "lucide-react";
|
||
import { getImageUrl, formatMinCost } from "@/lib/utils";
|
||
import { Button } from "@/components/ui/button";
|
||
|
||
interface Yacht {
|
||
id: string;
|
||
name: string;
|
||
image: string;
|
||
length: number;
|
||
capacity: number;
|
||
minCost: number;
|
||
status: "active" | "moderation" | "archive";
|
||
}
|
||
|
||
// Моковые данные для демонстрации
|
||
const mockYachts: Yacht[] = [
|
||
{
|
||
id: "1",
|
||
name: "KALLISTE",
|
||
image: "/images/yachts/yacht1.jpg",
|
||
length: 14,
|
||
capacity: 10,
|
||
minCost: 26400,
|
||
status: "active",
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "Señorita",
|
||
image: "/images/yachts/yacht2.jpg",
|
||
length: 14,
|
||
capacity: 10,
|
||
minCost: 37620,
|
||
status: "active",
|
||
},
|
||
];
|
||
|
||
export default function YachtsPage() {
|
||
const yachts = mockYachts;
|
||
|
||
return (
|
||
<main className="bg-[#f4f4f4]">
|
||
<div className="container max-w-6xl mx-auto px-4 py-6">
|
||
{/* Breadcrumbs */}
|
||
<div className="hidden lg:flex mb-4 text-sm text-[#999999] items-center gap-[16px]">
|
||
<Link href="/">
|
||
<span className="cursor-pointer hover:text-[#333333] transition-colors">
|
||
Аренда яхты
|
||
</span>
|
||
</Link>
|
||
<span>></span>
|
||
<Link href="/profile">
|
||
<span className="cursor-pointer hover:text-[#333333] transition-colors">
|
||
Личный кабинет
|
||
</span>
|
||
</Link>
|
||
<span>></span>
|
||
<span className="text-[#333333]">Мои яхты</span>
|
||
</div>
|
||
|
||
<div className="flex gap-6">
|
||
{/* Sidebar */}
|
||
<ProfileSidebar />
|
||
|
||
{/* Main Content */}
|
||
<div className="flex-1 bg-white rounded-[16px] p-8">
|
||
{/* Header with Add Button */}
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h2 className="text-2xl font-bold text-[#333333]">Мои яхты</h2>
|
||
<Link href="/profile/yachts/add">
|
||
<Button variant="gradient" size="default">
|
||
Добавить
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Yachts List */}
|
||
<div className="space-y-8">
|
||
{yachts.length === 0 ? (
|
||
<div className="text-center py-12 text-[#999999]">
|
||
Нет яхт в этой категории
|
||
</div>
|
||
) : (
|
||
yachts.map((yacht, index) => (
|
||
<div
|
||
key={yacht.id}
|
||
className={`overflow-hidden bg-white ${
|
||
index !== yachts.length - 1
|
||
? "pb-8 border-b border-gray-200"
|
||
: ""
|
||
}`}
|
||
>
|
||
<div>
|
||
<div className="flex flex-col lg:flex-row">
|
||
{/* Image Section */}
|
||
<div className="relative rounded-[12px] overflow-hidden w-90 h-90 flex-shrink-0">
|
||
<Image
|
||
src={getImageUrl(
|
||
yacht.image
|
||
)}
|
||
alt={yacht.name}
|
||
fill
|
||
className="object-cover"
|
||
unoptimized
|
||
/>
|
||
{/* Yacht Details Overlay */}
|
||
<div className="absolute bottom-2 left-2 flex gap-2">
|
||
<div className="bg-black/50 text-white px-3 py-1.5 rounded-lg flex items-center gap-3 text-sm">
|
||
<div className="flex items-center gap-1">
|
||
<MoveHorizontal
|
||
size={16}
|
||
className="text-white"
|
||
/>
|
||
<span>
|
||
{
|
||
yacht.length
|
||
}{" "}
|
||
метров
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-black/50 text-white px-3 py-1.5 rounded-lg flex items-center gap-3 text-sm">
|
||
<div className="flex items-center gap-1">
|
||
<Users
|
||
size={16}
|
||
className="text-white"
|
||
/>
|
||
<span>
|
||
{
|
||
yacht.capacity
|
||
}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Details Section */}
|
||
<div className="flex-1 px-6">
|
||
<div className="space-y-3">
|
||
<div className="flex items-start justify-between">
|
||
<div className="space-y-3 w-full">
|
||
<h3 className="text-xl font-bold text-[#333333]">
|
||
{yacht.name}
|
||
</h3>
|
||
<div className="text-[#333333] w-full flex justify-between">
|
||
<div>
|
||
Длина:
|
||
</div>
|
||
<div>
|
||
{
|
||
yacht.length
|
||
}{" "}
|
||
метров
|
||
</div>
|
||
</div>
|
||
<div className="text-[#333333] w-full flex justify-between">
|
||
<div>
|
||
Вместимость:
|
||
</div>
|
||
<div>
|
||
{
|
||
yacht.capacity
|
||
}{" "}
|
||
человек
|
||
</div>
|
||
</div>
|
||
<div className="text-[#333333] w-full flex justify-between">
|
||
<div>
|
||
Стоимость:
|
||
</div>
|
||
<div className="font-bold">
|
||
{formatMinCost(
|
||
yacht.minCost
|
||
)}{" "}
|
||
/ час
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="pt-3 border-t border-[#DFDFDF]">
|
||
<div className="flex items-center justify-between">
|
||
<Link
|
||
href={`/catalog/${yacht.id}`}
|
||
className="text-sm text-[#2D908D] hover:underline"
|
||
>
|
||
Посмотреть
|
||
объявление
|
||
</Link>
|
||
<Link
|
||
href={`/profile/yachts/${yacht.id}/edit`}
|
||
className="text-sm text-[#2D908D] hover:underline"
|
||
>
|
||
Редактировать
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
);
|
||
}
|