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

src/components/form/guest-picker.tsx

@@ -2,14 +2,14 @@
 
 import React, { useState } from "react";
 import {
-    Select,
+    Popover,
-    SelectContent,
+    PopoverContent,
-    SelectTrigger,
+    PopoverTrigger,
-    SelectValue,
+} from "@/components/ui/popover";
-} from "@/components/ui/select";
 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">
+                <PopoverTrigger asChild>
-                    <div className="flex items-center">
+                    <Button
-                        <Icon
+                        variant="outline"
-                            name="people"
+                        className="h-[64px] px-4 w-full justify-between"
-                            className="mr-3"
+                    >
-                        />
+                        <div className="flex items-center">
-                        <SelectValue placeholder={getDisplayText()} />
+                            <Icon
-                    </div>
+                                name="people"
-                </SelectTrigger>
+                                className="mr-3"
-                <SelectContent className="rounded-[20px] p-6 pb-4">
+                            />
+                            <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>
+                </PopoverContent>
-            </Select>
+            </Popover>
         </div>
     );
 };

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>
     );