Доработки по главной странице, итерация 5
This commit is contained in:
parent
ee89eb9b83
commit
40985fb7a3
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 906 KiB |
|
|
@ -3,20 +3,11 @@
|
|||
import Image from "next/image";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { useState } from "react";
|
||||
import { DatePicker } from "@/components/ui/date-picker";
|
||||
import Icon from "@/components/ui/icon";
|
||||
import { GuestPicker } from "@/components/form/guest-picker";
|
||||
|
||||
export default function Hero() {
|
||||
const [guests, setGuests] = useState("");
|
||||
|
||||
return (
|
||||
<section className="relative h-[600px] rounded-[24px] mx-[16px] overflow-hidden flex text-white">
|
||||
<Image
|
||||
|
|
@ -71,52 +62,7 @@ export default function Hero() {
|
|||
|
||||
{/* Количество гостей */}
|
||||
<div className="flex-1">
|
||||
<Select
|
||||
value={guests}
|
||||
onValueChange={setGuests}
|
||||
>
|
||||
<SelectTrigger className="w-full h-[64px] px-4">
|
||||
<div className="flex items-center">
|
||||
<Icon
|
||||
name="people"
|
||||
className="w-5 h-5 text-brand mr-3"
|
||||
/>
|
||||
<SelectValue placeholder="Сколько гостей?" />
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1">
|
||||
1 гость
|
||||
</SelectItem>
|
||||
<SelectItem value="2">
|
||||
2 гостя
|
||||
</SelectItem>
|
||||
<SelectItem value="3">
|
||||
3 гостя
|
||||
</SelectItem>
|
||||
<SelectItem value="4">
|
||||
4 гостя
|
||||
</SelectItem>
|
||||
<SelectItem value="5">
|
||||
5 гостей
|
||||
</SelectItem>
|
||||
<SelectItem value="6">
|
||||
6 гостей
|
||||
</SelectItem>
|
||||
<SelectItem value="7">
|
||||
7 гостей
|
||||
</SelectItem>
|
||||
<SelectItem value="8">
|
||||
8 гостей
|
||||
</SelectItem>
|
||||
<SelectItem value="9">
|
||||
9 гостей
|
||||
</SelectItem>
|
||||
<SelectItem value="10">
|
||||
10+ гостей
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<GuestPicker />
|
||||
</div>
|
||||
|
||||
{/* Кнопка поиска */}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { Card } from "@/components/ui/card";
|
||||
|
||||
// Массив с данными о карточках
|
||||
const sportCards = [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/sport/sport1.jpg",
|
||||
alt: "Вейксерф",
|
||||
title: "Вейксерф",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/sport/sport2.jpg",
|
||||
alt: "Вейкборд",
|
||||
title: "Вейкборд",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/sport/sport3.jpg",
|
||||
alt: "Гидроциклы",
|
||||
title: "Гидроциклы",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/sport/sport4.png",
|
||||
alt: "Дайвинг",
|
||||
title: "Дайвинг",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/sport/sport5.jpg",
|
||||
alt: "Сапы",
|
||||
title: "Сапы",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/sport/sport6.png",
|
||||
alt: "Каяки",
|
||||
title: "Каяки",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Sport() {
|
||||
return (
|
||||
<section className="bg-background mt-8 md:mt-12">
|
||||
<div className="container max-w-6xl mx-auto px-4">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl md:text-4xl font-bold mb-4 text-black">
|
||||
Активный отдых и спорт
|
||||
</h1>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Идеальное сочетание драйва, свободы и природы.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Попробуйте вейксерф, вейкборд, гидрофоил, дайвинг, сапы
|
||||
и каяки — каждый из них подарит уникальные впечатления и
|
||||
сделает вашу морскую прогулку по-настоящему
|
||||
незабываемой.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Три маленьких карточки на всю ширину */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
{sportCards.map((card) => (
|
||||
<div key={card.id} className="space-y-4">
|
||||
<Card className="overflow-hidden">
|
||||
<div className="relative group">
|
||||
<Image
|
||||
src={card.image}
|
||||
alt={card.alt}
|
||||
width={400}
|
||||
height={200}
|
||||
className="w-full h-[200px] object-cover"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="px-2">
|
||||
<h3 className="text-l font-semibold text-black">
|
||||
{card.title}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -133,3 +133,7 @@
|
|||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="time"]::-webkit-calendar-picker-indicator {
|
||||
background: none;
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import Advantages from "@/app/components/Advantages";
|
|||
import VideoSection from "@/app/components/VideoSection";
|
||||
import Articles from "@/app/components/Articles";
|
||||
import Reviews from "@/app/components/Reviews";
|
||||
import Sport from "@/app/components/Sport";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
|
|
@ -13,6 +14,7 @@ export default function Home() {
|
|||
<Reviews />
|
||||
<YachtGrid />
|
||||
<Services />
|
||||
<Sport />
|
||||
<Advantages />
|
||||
<VideoSection />
|
||||
<Articles />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Icon from "../ui/icon";
|
||||
import { Counter } from "../ui/counter";
|
||||
|
||||
interface GuestPickerProps {
|
||||
onApply?: (adults: number, children: number) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const GuestPicker: React.FC<GuestPickerProps> = ({ onApply }) => {
|
||||
const [adults, setAdults] = useState<number>(1);
|
||||
const [children, setChildren] = useState<number>(0);
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||||
|
||||
const handleApply = () => {
|
||||
onApply?.(adults, children);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const getDisplayText = () => {
|
||||
const total = adults + children;
|
||||
if (total === 0) return "Сколько гостей?";
|
||||
if (children === 0)
|
||||
return `${adults} ${adults === 1 ? "взрослый" : "взрослых"}`;
|
||||
return `${adults} ${
|
||||
adults === 1 ? "взрослый" : "взрослых"
|
||||
}, ${children} ${children === 1 ? "ребенок" : "детей"}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Select
|
||||
open={isOpen}
|
||||
onOpenChange={setIsOpen}
|
||||
>
|
||||
<SelectTrigger className="h-[64px] px-4">
|
||||
<div className="flex items-center">
|
||||
<Icon
|
||||
name="people"
|
||||
className="mr-3"
|
||||
/>
|
||||
<SelectValue placeholder={getDisplayText()} />
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-[20px] p-6 pb-4">
|
||||
<div className="mb-4">
|
||||
<Counter
|
||||
label="Взрослые"
|
||||
value={adults}
|
||||
onChange={setAdults}
|
||||
min={1}
|
||||
max={10}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<Counter
|
||||
label="Дети"
|
||||
value={children}
|
||||
onChange={setChildren}
|
||||
min={0}
|
||||
max={10}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleApply}
|
||||
variant="gradient"
|
||||
className="font-bold text-white h-[44px] w-full px-8"
|
||||
>
|
||||
Применить
|
||||
</Button>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,216 +1,230 @@
|
|||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as React from "react";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
} from "lucide-react"
|
||||
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
|
||||
import { ru } from "date-fns/locale"
|
||||
ChevronDownIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
} from "lucide-react";
|
||||
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
|
||||
import { ru } from "date-fns/locale";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button, buttonVariants } from "@/components/ui/button"
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
|
||||
function Calendar({
|
||||
className,
|
||||
classNames,
|
||||
showOutsideDays = true,
|
||||
captionLayout = "label",
|
||||
buttonVariant = "ghost",
|
||||
formatters,
|
||||
components,
|
||||
...props
|
||||
className,
|
||||
classNames,
|
||||
showOutsideDays = true,
|
||||
captionLayout = "label",
|
||||
buttonVariant = "ghost",
|
||||
formatters,
|
||||
components,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayPicker> & {
|
||||
buttonVariant?: React.ComponentProps<typeof Button>["variant"]
|
||||
buttonVariant?: React.ComponentProps<typeof Button>["variant"];
|
||||
}) {
|
||||
const defaultClassNames = getDefaultClassNames()
|
||||
const defaultClassNames = getDefaultClassNames();
|
||||
|
||||
return (
|
||||
<DayPicker
|
||||
locale={ru}
|
||||
showOutsideDays={showOutsideDays}
|
||||
className={cn(
|
||||
"bg-background group/calendar p-4 [--cell-size:2.5rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
||||
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||
className
|
||||
)}
|
||||
captionLayout={captionLayout}
|
||||
formatters={{
|
||||
formatMonthDropdown: (date) =>
|
||||
date.toLocaleString("ru", { month: "short" }),
|
||||
...formatters,
|
||||
|
||||
}}
|
||||
classNames={{
|
||||
root: cn("w-fit", defaultClassNames.root),
|
||||
months: cn(
|
||||
"relative flex flex-col gap-6 md:flex-row",
|
||||
defaultClassNames.months
|
||||
),
|
||||
month: cn("flex w-full flex-col gap-6", defaultClassNames.month),
|
||||
nav: cn(
|
||||
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
||||
defaultClassNames.nav
|
||||
),
|
||||
button_previous: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
|
||||
defaultClassNames.button_previous
|
||||
),
|
||||
button_next: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
|
||||
defaultClassNames.button_next
|
||||
),
|
||||
month_caption: cn(
|
||||
"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
|
||||
defaultClassNames.month_caption
|
||||
),
|
||||
dropdowns: cn(
|
||||
"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
|
||||
defaultClassNames.dropdowns
|
||||
),
|
||||
dropdown_root: cn(
|
||||
"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
|
||||
defaultClassNames.dropdown_root
|
||||
),
|
||||
dropdown: cn(
|
||||
"bg-popover absolute inset-0 opacity-0",
|
||||
defaultClassNames.dropdown
|
||||
),
|
||||
caption_label: cn(
|
||||
"select-none font-medium",
|
||||
captionLayout === "label"
|
||||
? "text-sm"
|
||||
: "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
|
||||
defaultClassNames.caption_label
|
||||
),
|
||||
table: "w-full border-collapse",
|
||||
weekdays: cn("flex", defaultClassNames.weekdays),
|
||||
weekday: cn(
|
||||
"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal p-2",
|
||||
defaultClassNames.weekday
|
||||
),
|
||||
week: cn("mt-3 flex w-full", defaultClassNames.week),
|
||||
week_number_header: cn(
|
||||
"w-[--cell-size] select-none",
|
||||
defaultClassNames.week_number_header
|
||||
),
|
||||
week_number: cn(
|
||||
"text-muted-foreground select-none text-[0.8rem]",
|
||||
defaultClassNames.week_number
|
||||
),
|
||||
day: cn(
|
||||
"group/day relative aspect-square h-full w-full select-none p-1 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
|
||||
defaultClassNames.day
|
||||
),
|
||||
range_start: cn(
|
||||
"bg-accent rounded-l-md",
|
||||
defaultClassNames.range_start
|
||||
),
|
||||
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
||||
range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
|
||||
today: cn(
|
||||
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
|
||||
defaultClassNames.today
|
||||
),
|
||||
outside: cn(
|
||||
"text-muted-foreground aria-selected:text-muted-foreground",
|
||||
defaultClassNames.outside
|
||||
),
|
||||
disabled: cn(
|
||||
"text-muted-foreground opacity-50",
|
||||
defaultClassNames.disabled
|
||||
),
|
||||
hidden: cn("invisible", defaultClassNames.hidden),
|
||||
...classNames,
|
||||
}}
|
||||
components={{
|
||||
Root: ({ className, rootRef, ...props }) => {
|
||||
return (
|
||||
<div
|
||||
data-slot="calendar"
|
||||
ref={rootRef}
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
},
|
||||
Chevron: ({ className, orientation, ...props }) => {
|
||||
if (orientation === "left") {
|
||||
return (
|
||||
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
|
||||
)
|
||||
}
|
||||
return (
|
||||
<DayPicker
|
||||
locale={ru}
|
||||
showOutsideDays={showOutsideDays}
|
||||
className={cn(
|
||||
"bg-background group/calendar p-4 [--cell-size:2.5rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
||||
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||
className
|
||||
)}
|
||||
captionLayout={captionLayout}
|
||||
formatters={{
|
||||
formatMonthDropdown: (date) =>
|
||||
date.toLocaleString("ru", { month: "short" }),
|
||||
...formatters,
|
||||
}}
|
||||
classNames={{
|
||||
root: cn("w-fit", defaultClassNames.root),
|
||||
months: cn(
|
||||
"relative flex flex-col gap-6 md:flex-row",
|
||||
defaultClassNames.months
|
||||
),
|
||||
month: cn(
|
||||
"flex w-full flex-col gap-6",
|
||||
defaultClassNames.month
|
||||
),
|
||||
nav: cn(
|
||||
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
||||
defaultClassNames.nav
|
||||
),
|
||||
button_previous: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
|
||||
defaultClassNames.button_previous
|
||||
),
|
||||
button_next: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
|
||||
defaultClassNames.button_next
|
||||
),
|
||||
month_caption: cn(
|
||||
"flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
|
||||
defaultClassNames.month_caption
|
||||
),
|
||||
dropdowns: cn(
|
||||
"flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
|
||||
defaultClassNames.dropdowns
|
||||
),
|
||||
dropdown_root: cn(
|
||||
"has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
|
||||
defaultClassNames.dropdown_root
|
||||
),
|
||||
dropdown: cn(
|
||||
"bg-popover absolute inset-0 opacity-0",
|
||||
defaultClassNames.dropdown
|
||||
),
|
||||
caption_label: cn(
|
||||
"select-none font-medium",
|
||||
captionLayout === "label"
|
||||
? "text-sm"
|
||||
: "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
|
||||
defaultClassNames.caption_label
|
||||
),
|
||||
table: "w-full border-collapse",
|
||||
weekdays: cn("flex", defaultClassNames.weekdays),
|
||||
weekday: cn(
|
||||
"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal p-2",
|
||||
defaultClassNames.weekday
|
||||
),
|
||||
week: cn("mt-3 flex w-full", defaultClassNames.week),
|
||||
week_number_header: cn(
|
||||
"w-[--cell-size] select-none",
|
||||
defaultClassNames.week_number_header
|
||||
),
|
||||
week_number: cn(
|
||||
"text-muted-foreground select-none text-[0.8rem]",
|
||||
defaultClassNames.week_number
|
||||
),
|
||||
day: cn(
|
||||
"group/day relative aspect-square h-full w-full select-none p-1 text-center",
|
||||
defaultClassNames.day
|
||||
),
|
||||
range_start: cn(
|
||||
"bg-accent rounded-l-md",
|
||||
defaultClassNames.range_start
|
||||
),
|
||||
range_middle: cn(
|
||||
"rounded-none",
|
||||
defaultClassNames.range_middle
|
||||
),
|
||||
range_end: cn(
|
||||
"bg-accent rounded-r-md",
|
||||
defaultClassNames.range_end
|
||||
),
|
||||
today: cn(
|
||||
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
|
||||
defaultClassNames.today
|
||||
),
|
||||
outside: cn(
|
||||
"text-muted-foreground aria-selected:text-muted-foreground",
|
||||
defaultClassNames.outside
|
||||
),
|
||||
disabled: cn(
|
||||
"text-muted-foreground opacity-50",
|
||||
defaultClassNames.disabled
|
||||
),
|
||||
hidden: cn("invisible", defaultClassNames.hidden),
|
||||
...classNames,
|
||||
}}
|
||||
components={{
|
||||
Root: ({ className, rootRef, ...props }) => {
|
||||
return (
|
||||
<div
|
||||
data-slot="calendar"
|
||||
ref={rootRef}
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
Chevron: ({ className, orientation, ...props }) => {
|
||||
if (orientation === "left") {
|
||||
return (
|
||||
<ChevronLeftIcon
|
||||
className={cn("size-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (orientation === "right") {
|
||||
return (
|
||||
<ChevronRightIcon
|
||||
className={cn("size-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
if (orientation === "right") {
|
||||
return (
|
||||
<ChevronRightIcon
|
||||
className={cn("size-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ChevronDownIcon className={cn("size-4", className)} {...props} />
|
||||
)
|
||||
},
|
||||
DayButton: CalendarDayButton,
|
||||
WeekNumber: ({ children, ...props }) => {
|
||||
return (
|
||||
<td {...props}>
|
||||
<div className="flex size-[--cell-size] items-center justify-center text-center">
|
||||
{children}
|
||||
</div>
|
||||
</td>
|
||||
)
|
||||
},
|
||||
...components,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
return (
|
||||
<ChevronDownIcon
|
||||
className={cn("size-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
DayButton: CalendarDayButton,
|
||||
WeekNumber: ({ children, ...props }) => {
|
||||
return (
|
||||
<td {...props}>
|
||||
<div className="flex size-[--cell-size] items-center justify-center text-center">
|
||||
{children}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
},
|
||||
...components,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CalendarDayButton({
|
||||
className,
|
||||
day,
|
||||
modifiers,
|
||||
...props
|
||||
className,
|
||||
day,
|
||||
modifiers,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayButton>) {
|
||||
const defaultClassNames = getDefaultClassNames()
|
||||
const defaultClassNames = getDefaultClassNames();
|
||||
|
||||
const ref = React.useRef<HTMLButtonElement>(null)
|
||||
React.useEffect(() => {
|
||||
if (modifiers.focused) ref.current?.focus()
|
||||
}, [modifiers.focused])
|
||||
const ref = React.useRef<HTMLButtonElement>(null);
|
||||
React.useEffect(() => {
|
||||
if (modifiers.focused) ref.current?.focus();
|
||||
}, [modifiers.focused]);
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
data-day={day.date.toLocaleDateString()}
|
||||
data-selected-single={
|
||||
modifiers.selected &&
|
||||
!modifiers.range_start &&
|
||||
!modifiers.range_end &&
|
||||
!modifiers.range_middle
|
||||
}
|
||||
data-range-start={modifiers.range_start}
|
||||
data-range-end={modifiers.range_end}
|
||||
data-range-middle={modifiers.range_middle}
|
||||
className={cn(
|
||||
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
|
||||
defaultClassNames.day,
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
data-day={day.date.toLocaleDateString()}
|
||||
data-selected-single={
|
||||
modifiers.selected &&
|
||||
!modifiers.range_start &&
|
||||
!modifiers.range_end &&
|
||||
!modifiers.range_middle
|
||||
}
|
||||
data-range-start={modifiers.range_start}
|
||||
data-range-end={modifiers.range_end}
|
||||
data-range-middle={modifiers.range_middle}
|
||||
className={cn(
|
||||
"data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:hover:bg-[#008299] data-[selected-single=true]:hover:text-primary-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
|
||||
defaultClassNames.day,
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Calendar, CalendarDayButton }
|
||||
export { Calendar, CalendarDayButton };
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { Plus, Minus } from "lucide-react";
|
||||
|
||||
interface CounterProps {
|
||||
label: string;
|
||||
value: number;
|
||||
onChange: (value: number) => void;
|
||||
min?: number;
|
||||
max?: number;
|
||||
}
|
||||
|
||||
export const Counter: React.FC<CounterProps> = ({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
min = 0,
|
||||
max = 10,
|
||||
}) => {
|
||||
const handleIncrement = () => {
|
||||
if (value < max) {
|
||||
onChange(value + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDecrement = () => {
|
||||
if (value > min) {
|
||||
onChange(value - 1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative flex w-full items-center justify-between items-center border border-gray-200 rounded-full px-8 py-4 bg-white">
|
||||
<label className="absolute left-[32px] top-0 transform -translate-y-1/2 text-xs text-gray-500 transition-all duration-200 bg-white px-1">
|
||||
{label}
|
||||
</label>
|
||||
<button
|
||||
onClick={handleDecrement}
|
||||
disabled={value <= min}
|
||||
className={`w-8 h-8 rounded-[8px] border flex items-center justify-center ${
|
||||
value <= min
|
||||
? "border-gray-300 text-gray-300 cursor-not-allowed"
|
||||
: "border-gray-400 text-gray-600 hover:border-gray-500"
|
||||
}`}
|
||||
>
|
||||
<Minus className="w-4 h-4" />
|
||||
</button>
|
||||
<span className="mx-4 text-gray-800 font-medium min-w-[20px] text-center">
|
||||
{value}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleIncrement}
|
||||
disabled={value >= max}
|
||||
className={`w-8 h-8 rounded-[8px] border flex items-center justify-center ${
|
||||
value >= max
|
||||
? "border-gray-300 text-gray-300 cursor-not-allowed"
|
||||
: "border-teal-500 text-[#008299] hover:border-[#008299]"
|
||||
}`}
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Counter;
|
||||
|
|
@ -18,14 +18,15 @@ export function DatePicker() {
|
|||
const [date, setDate] = React.useState<Date>();
|
||||
const [departureTime, setDepartureTime] = React.useState("12:00");
|
||||
const [arrivalTime, setArrivalTime] = React.useState("13:00");
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleApply = () => {
|
||||
// Логика применения выбранных даты и времени
|
||||
console.log("Применено:", { date, departureTime, arrivalTime });
|
||||
// Закрываем popover после применения
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
|
|
@ -34,13 +35,13 @@ export function DatePicker() {
|
|||
>
|
||||
<Icon name="calendar" className="w-4 h-4 text-brand mr-2" />
|
||||
{date ? (
|
||||
format(date, `dd.MM, ${departureTime} - ${arrivalTime}`)
|
||||
format(date, `d MMMM, ${departureTime} - ${arrivalTime}`, { locale: ru })
|
||||
) : (
|
||||
<span>Выберите дату и время</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[360px] p-0 bg-white rounded-[20px] shadow-lg">
|
||||
<PopoverContent className="p-0 bg-white rounded-[20px] shadow-lg">
|
||||
<div className="p-4 w-full">
|
||||
{/* Календарь */}
|
||||
<Calendar
|
||||
|
|
@ -65,19 +66,20 @@ export function DatePicker() {
|
|||
weekdays: "flex",
|
||||
weekday:
|
||||
"flex-1 text-gray-500 text-xs font-normal p-2 text-center",
|
||||
day_button: "font-bold",
|
||||
week: "mt-2 flex w-full",
|
||||
today: "bg-gray-100 text-gray-900",
|
||||
outside: "text-gray-300",
|
||||
disabled: "text-gray-400 cursor-not-allowed",
|
||||
day_selected: "!bg-red",
|
||||
selected:
|
||||
"rounded-full border-none outline-none !bg-[#008299] text-white",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Поля времени */}
|
||||
<div className="flex gap-3 mb-4">
|
||||
<div className="flex-1">
|
||||
<label className="block text-xs text-gray-500 mb-1">
|
||||
Выход
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="time"
|
||||
|
|
@ -85,15 +87,15 @@ export function DatePicker() {
|
|||
onChange={(e) =>
|
||||
setDepartureTime(e.target.value)
|
||||
}
|
||||
className="w-full h-10 px-3 border border-gray-300 rounded-md text-gray-700 font-medium focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
className="w-full h-12 px-3 border border-gray-300 rounded-full text-gray-700 font-medium text-center focus:outline-none focus:ring-2 focus:ring-[#008299] focus:border-transparent"
|
||||
/>
|
||||
<label className="absolute left-[24px] top-0 transform -translate-y-1/2 text-xs text-gray-500 pointer-events-none transition-all duration-200 bg-white px-1">
|
||||
Выход
|
||||
</label>
|
||||
<ChevronDownIcon className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500 pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-xs text-gray-500 mb-1">
|
||||
Заход
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="time"
|
||||
|
|
@ -101,8 +103,11 @@ export function DatePicker() {
|
|||
onChange={(e) =>
|
||||
setArrivalTime(e.target.value)
|
||||
}
|
||||
className="w-full h-10 px-3 border border-gray-300 rounded-md text-gray-700 font-medium focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
className="w-full h-12 px-3 border border-gray-300 rounded-full text-gray-700 font-medium text-center focus:outline-none focus:ring-2 focus:ring-[#008299] focus:border-transparent"
|
||||
/>
|
||||
<label className="absolute left-[24px] top-0 transform -translate-y-1/2 text-xs text-gray-500 pointer-events-none transition-all duration-200 bg-white px-1">
|
||||
Заход
|
||||
</label>
|
||||
<ChevronDownIcon className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500 pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { forwardRef, memo } from "react";
|
||||
import { IconProps } from "../../types/icon";
|
||||
|
||||
import { SVGProps } from "react";
|
||||
// Импорт SVG иконок как React компонентов
|
||||
import CalendarIcon from "../../../public/images/icons/calendar.svg";
|
||||
import MapIcon from "../../../public/images/icons/map.svg";
|
||||
|
|
@ -33,6 +33,31 @@ const icons = {
|
|||
tg: TgIcon,
|
||||
};
|
||||
|
||||
export type IconName =
|
||||
| "calendar"
|
||||
| "map"
|
||||
| "money"
|
||||
| "people"
|
||||
| "logo"
|
||||
| "restart"
|
||||
| "anchor"
|
||||
| "width"
|
||||
| "like"
|
||||
| "star"
|
||||
| "vk"
|
||||
| "dzen"
|
||||
| "tg";
|
||||
|
||||
export interface IconProps
|
||||
extends Omit<SVGProps<SVGSVGElement>, "name" | "preserveAspectRatio"> {
|
||||
name: IconName;
|
||||
className?: string;
|
||||
size?: number | string;
|
||||
color?: string;
|
||||
preserveAspectRatio?: boolean;
|
||||
maxSize?: number | string;
|
||||
}
|
||||
|
||||
// Компонент Icon оптимизированный для Next.js
|
||||
export const Icon = memo(
|
||||
forwardRef<SVGSVGElement, IconProps>(
|
||||
|
|
|
|||
|
|
@ -1,26 +1 @@
|
|||
import { SVGProps } from "react";
|
||||
|
||||
export type IconName =
|
||||
| "calendar"
|
||||
| "map"
|
||||
| "money"
|
||||
| "people"
|
||||
| "logo"
|
||||
| "restart"
|
||||
| "anchor"
|
||||
| "width"
|
||||
| "like"
|
||||
| "star"
|
||||
| "vk"
|
||||
| "dzen"
|
||||
| "tg";
|
||||
|
||||
export interface IconProps
|
||||
extends Omit<SVGProps<SVGSVGElement>, "name" | "preserveAspectRatio"> {
|
||||
name: IconName;
|
||||
className?: string;
|
||||
size?: number | string;
|
||||
color?: string;
|
||||
preserveAspectRatio?: boolean;
|
||||
maxSize?: number | string;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue