iaiaiaia
/
travelmarine-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Доработки по главной странице, итерация 6

This commit is contained in:
Sergey Bolshakov 2025-10-27 01:44:25 +03:00
parent 40985fb7a3
commit 9083c29a26
2 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/form/guest-picker.tsx
View File

@ -2,14 +2,14 @@
import React, { useState } from "react";
import {
Select,
SelectContent,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import Icon from "../ui/icon";
import { Counter } from "../ui/counter";
import { ChevronUp, ChevronDown } from "lucide-react";
interface GuestPickerProps {
onApply?: (adults: number, children: number) => void;
@ -17,7 +17,7 @@ interface GuestPickerProps {
}
export const GuestPicker: React.FC<GuestPickerProps> = ({ onApply }) => {
const [adults, setAdults] = useState<number>(1);
const [adults, setAdults] = useState<number>(0);
const [children, setChildren] = useState<number>(0);
const [isOpen, setIsOpen] = useState<boolean>(false);
@ -38,26 +38,36 @@ export const GuestPicker: React.FC<GuestPickerProps> = ({ onApply }) => {
return (
<div>
<Select
<Popover
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">
<PopoverTrigger asChild>
<Button
variant="outline"
className="h-[64px] px-4 w-full justify-between"
>
<div className="flex items-center">
<Icon
name="people"
className="mr-3"
/>
<span>{getDisplayText()}</span>
</div>
{isOpen ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
</Button>
</PopoverTrigger>
<PopoverContent className="rounded-[20px] p-6 pb-4 w-56">
<div className="mb-4">
<Counter
label="Взрослые"
value={adults}
onChange={setAdults}
min={1}
min={0}
max={10}
/>
</div>
@ -77,8 +87,8 @@ export const GuestPicker: React.FC<GuestPickerProps> = ({ onApply }) => {
>
Применить
</Button>
</SelectContent>
</Select>
</PopoverContent>
</Popover>
</div>
);
};

10
src/components/ui/counter.tsx
View File

@ -31,14 +31,14 @@ export const Counter: React.FC<CounterProps> = ({
};
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">
<div className="relative flex w-full items-center justify-between items-center border border-gray-200 rounded-full px-8 py-3 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 ${
className={`w-7 h-7 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"
@ -52,13 +52,13 @@ export const Counter: React.FC<CounterProps> = ({
<button
onClick={handleIncrement}
disabled={value >= max}
className={`w-8 h-8 rounded-[8px] border flex items-center justify-center ${
className={`w-7 h-7 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]"
: "border-[#008299] text-[#008299] hover:border-[#008299]"
}`}
>
<Plus className="w-4 h-4" />
<Plus className="w-4 h-4 text-gray-600" />
</button>
</div>
);