Страницы профиля
This commit is contained in:
parent
63725ff710
commit
089f5064a3
|
|
@ -0,0 +1,214 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue