From 9083c29a266d0b3486c6964d63071b1834525569 Mon Sep 17 00:00:00 2001
From: Sergey Bolshakov <spooky5ya@yandex.ru>
Date: Mon, 27 Oct 2025 01:44:25 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D0=BF=D0=BE=20=D0=B3=D0=BB=D0=B0=D0=B2=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B9=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5?=
 =?UTF-8?q?,=20=D0=B8=D1=82=D0=B5=D1=80=D0=B0=D1=86=D0=B8=D1=8F=206?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/form/guest-picker.tsx | 50 +++++++++++++++++-----------
 src/components/ui/counter.tsx        | 10 +++---
 2 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/components/form/guest-picker.tsx b/src/components/form/guest-picker.tsx
index b800967..35e8228 100644
--- a/src/components/form/guest-picker.tsx
+++ b/src/components/form/guest-picker.tsx
@@ -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>
     );
 };
diff --git a/src/components/ui/counter.tsx b/src/components/ui/counter.tsx
index fe3abad..6ad7089 100644
--- a/src/components/ui/counter.tsx
+++ b/src/components/ui/counter.tsx
@@ -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>
     );