Finished initial price slider

package-lock.json

@@ -11,6 +11,7 @@
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-navigation-menu": "^1.1.4",
         "@radix-ui/react-select": "^2.0.0",
+        "@radix-ui/react-slider": "^1.1.2",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-toast": "^1.1.5",
         "@t3-oss/env-nextjs": "^0.10.1",
@@ -2254,6 +2255,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",
+      "integrity": "sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@t3-oss/env-nextjs": "^0.10.1",

src/app/_components/FilterMenu.tsx

@@ -1,56 +1,126 @@
+"use client";
 import {
-  DropdownMenu,
+  NavigationMenu,
-  DropdownMenuContent,
+  NavigationMenuContent,
-  DropdownMenuItem,
+  NavigationMenuItem,
-  DropdownMenuLabel,
+  NavigationMenuList,
-  DropdownMenuSeparator,
+  NavigationMenuTrigger,
-  DropdownMenuTrigger,
+} from "~/components/ui/navigation-menu";
-} from "~/components/ui/dropdown-menu";
+
 import { Input } from "~/components/ui/input";
+import { Slider } from "~/components/ui/slider";
+import { ChangeEvent, useState } from "react";
 
 export default function Filtermenu() {
+  const [minPrice, setMinPrice] = useState<number>(0);
+  const [maxPrice, setMaxPrice] = useState<number>(9999);
+  const [sliderValues, setSliderValues] = useState<[number, number]>([0, 9999]);
+
+  const handleMinPriceChange = (e: ChangeEvent<HTMLInputElement>): void => {
+    const value = Math.min(Number(e.target.value), maxPrice - 1);
+    setMinPrice(value);
+    setSliderValues([value, sliderValues[1]]);
+  };
+
+  const handleMaxPriceChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = Math.max(Number(e.target.value), minPrice + 1);
+    setMaxPrice(value);
+    setSliderValues([sliderValues[0], value]);
+  };
+
+  const handleSliderChange = (values: [number, number]) => {
+    setSliderValues(values);
+    setMinPrice(values[0]);
+    setMaxPrice(values[1]);
+  };
+
   return (
-    <div className="container flex justify-center gap-4 py-4">
+    <div className="container flex justify-center gap-2">
       {/* TODO:
         Checkboxes instead of menuitems. Check boxes are added as badges under the search bar */}
-      <DropdownMenu>
+      {/* Price filter */}
-        <DropdownMenuTrigger>Type</DropdownMenuTrigger>
+      <NavigationMenu>
-        <DropdownMenuContent>
+        <NavigationMenuList>
-          <DropdownMenuItem>Sparkling</DropdownMenuItem>
+          <NavigationMenuItem>
-          <DropdownMenuItem>White</DropdownMenuItem>
+            <NavigationMenuTrigger>Price</NavigationMenuTrigger>
-          <DropdownMenuItem>Red</DropdownMenuItem>
+            <NavigationMenuContent className="min-w- flex overflow-auto p-2">
-          <DropdownMenuItem>Sweet</DropdownMenuItem>
+              <Input
-          <DropdownMenuItem>Fortified</DropdownMenuItem>
+                value={minPrice}
-        </DropdownMenuContent>
+                onChange={handleMinPriceChange}
-      </DropdownMenu>
+                className="min-w-20"
+                type="number"
+                defaultValue={0}
+              />
+              <Slider
+                value={sliderValues}
+                onValueChange={handleSliderChange}
+                className="min-w-36"
+                min={0}
+                max={9999}
+                defaultValue={[0, 9999]}
+              />
+              <Input
+                value={maxPrice}
+                onChange={handleMaxPriceChange}
+                className="min-w-20"
+                type="number"
+                defaultValue={9999}
+              />
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Type</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <p>Anything goes?</p>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
       {/* Producer filter */}
-      <DropdownMenu>
+      <NavigationMenu>
-        <DropdownMenuTrigger>Producer</DropdownMenuTrigger>
+        <NavigationMenuList>
-        <DropdownMenuContent>
+          <NavigationMenuItem>
-          {/* For each producer have DropdownMenuItem. */}
+            <NavigationMenuTrigger>Producer</NavigationMenuTrigger>
-          <Input name="searchString" placeholder="search for producer" />
+            <NavigationMenuContent className="w-fit p-2">
-          <DropdownMenuSeparator />
+              <Input placeholder="producer filter" />
-          <DropdownMenuItem>Store Henning</DropdownMenuItem>
+              <ul>
-        </DropdownMenuContent>
+                <li>checkboxes for producer filter</li>
-      </DropdownMenu>
+              </ul>
-      {/* Country filter */}
+            </NavigationMenuContent>
-      <DropdownMenu>
+          </NavigationMenuItem>
-        <DropdownMenuTrigger>Country</DropdownMenuTrigger>
+        </NavigationMenuList>
-        <DropdownMenuContent>
+      </NavigationMenu>
-          {/* For each Country have DropdownMenuItem. */}
+      {/* Country Filter */}
-          <DropdownMenuItem>France</DropdownMenuItem>
+      <NavigationMenu>
-        </DropdownMenuContent>
+        <NavigationMenuList>
-      </DropdownMenu>
+          <NavigationMenuItem>
-      {/* Region filter */}
+            <NavigationMenuTrigger>Producer</NavigationMenuTrigger>
-      <DropdownMenu>
+            <NavigationMenuContent className="w-fit p-2">
-        <DropdownMenuTrigger>Region</DropdownMenuTrigger>
+              <ul>
-        <DropdownMenuContent>
+                <li>ccountry filter</li>
-          {/* For each Region have DropdownMenuItem. Check for country filter */}
+              </ul>
-          <Input name="searchString" placeholder="search for region" />
+            </NavigationMenuContent>
-          <DropdownMenuSeparator />
+          </NavigationMenuItem>
-          <DropdownMenuItem>Bourgogne</DropdownMenuItem>
+        </NavigationMenuList>
-        </DropdownMenuContent>
+      </NavigationMenu>
-      </DropdownMenu>
+      {/* Region Filter */}
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Region</NavigationMenuTrigger>
+            <NavigationMenuContent className="w-fit p-2">
+              <Input placeholder="producer filter" />
+              <ul>
+                <li>checkboxes for producer filter</li>
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
     </div>
   );
 }

src/components/ui/slider.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "~/lib/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };