+
+ Итого:
+
{featuredYacht.totalPrice}
@@ -276,14 +281,7 @@ export default function YachtGrid() {
{/* Badge Overlay */}
diff --git a/src/app/globals.css b/src/app/globals.css
index 8dba675..d053b8f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -45,6 +45,7 @@
--color-brand: var(--brand);
--color-brand-hover: var(--brand-hover);
--color-brand-active: var(--brand-active);
+ --color-brand-gradient: var(--brand-gradient);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
@@ -87,6 +88,7 @@
--brand: oklch(0.5588 0.0992 215.93);
--brand-hover: oklch(0.4588 0.0992 215.93); /* #006B7A */
--brand-active: oklch(0.3588 0.0992 215.93);
+ --brand-gradient: linear-gradient(90deg, #0072A8 0%, #0598DE 100%);
}
.dark {
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index da885c1..480832f 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,57 +1,65 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
const buttonVariants = cva(
- "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
- {
- variants: {
- variant: {
- default:
- "bg-primary text-primary-foreground border hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground border hover:bg-destructive/90",
- outline:
- "border border-input bg-background border hover:bg-accent hover:text-accent-foreground",
- secondary:
- "bg-secondary text-secondary-foreground border hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- link: "text-primary underline-offset-4 hover:underline",
- },
- size: {
- default: "h-9 px-4 py-2",
- sm: "h-8 rounded-full px-3 text-xs",
- lg: "h-10 rounded-full px-8",
- icon: "h-9 w-9",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-)
+ "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground border hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground border hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background border hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground border hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ gradient: "text-white border-0 hover:opacity-90",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-full px-3 text-xs",
+ lg: "h-10 rounded-full px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+);
export interface ButtonProps
- extends React.ButtonHTMLAttributes
,
- VariantProps {
- asChild?: boolean
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
}
const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button"
- return (
-
- )
- }
-)
-Button.displayName = "Button"
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+
+ // Inline стили для градиента
+ const gradientStyle = variant === "gradient" ? {
+ background: "linear-gradient(90deg, #0072A8 0%, #0598DE 100%)",
+ } : {};
+
+ return (
+
+ );
+ }
+);
+Button.displayName = "Button";
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx
index 16f1d66..0f24a3e 100644
--- a/src/components/ui/date-picker.tsx
+++ b/src/components/ui/date-picker.tsx
@@ -2,6 +2,8 @@
import * as React from "react";
import { format } from "date-fns";
+import { ru } from "date-fns/locale";
+import { ChevronDownIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
@@ -14,6 +16,13 @@ import Icon from "./icon";
export function DatePicker() {
const [date, setDate] = React.useState();
+ const [departureTime, setDepartureTime] = React.useState("12:00");
+ const [arrivalTime, setArrivalTime] = React.useState("13:00");
+
+ const handleApply = () => {
+ // Логика применения выбранных даты и времени
+ console.log("Применено:", { date, departureTime, arrivalTime });
+ };
return (
@@ -21,21 +30,93 @@ export function DatePicker() {
-
-
+
+
+ {/* Календарь */}
+
+ date < new Date(new Date().setHours(0, 0, 0, 0))
+ }
+ classNames={{
+ root: "w-full",
+ month: "flex w-full flex-col gap-4",
+ button_previous:
+ "h-8 w-8 flex items-center justify-center hover:bg-gray-100 rounded-md",
+ button_next:
+ "h-8 w-8 flex items-center justify-center hover:bg-gray-100 rounded-md",
+ month_caption:
+ "flex h-8 w-full items-center justify-center px-8 text-gray-700 font-semibold",
+ table: "w-full border-collapse",
+ weekdays: "flex",
+ weekday:
+ "flex-1 text-gray-500 text-xs font-normal p-2 text-center",
+ week: "mt-2 flex w-full",
+ today: "bg-gray-100 text-gray-900",
+ outside: "text-gray-300",
+ disabled: "text-gray-400 cursor-not-allowed",
+ }}
+ />
+
+ {/* Поля времени */}
+
+
+
+
+
+ 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"
+ />
+
+
+
+
+
+
+
+ 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"
+ />
+
+
+
+