Страницы профиля
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