From 8b98ff75cfdb467b99fe01e23ce3f5f8f3669dd0 Mon Sep 17 00:00:00 2001 From: christian Date: Sat, 25 May 2024 22:07:10 +0200 Subject: [PATCH] Finished initial price slider --- package-lock.json | 34 ++++++ package.json | 1 + src/app/_components/FilterMenu.tsx | 160 +++++++++++++++++++++-------- src/components/ui/slider.tsx | 29 ++++++ 4 files changed, 179 insertions(+), 45 deletions(-) create mode 100644 src/components/ui/slider.tsx diff --git a/package-lock.json b/package-lock.json index f8372cd..8edc41a 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 0310119..35ab83b 100644 --- a/package.json +++ b/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", diff --git a/src/app/_components/FilterMenu.tsx b/src/app/_components/FilterMenu.tsx index 97ce672..dc4afec 100644 --- a/src/app/_components/FilterMenu.tsx +++ b/src/app/_components/FilterMenu.tsx @@ -1,56 +1,126 @@ +"use client"; import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "~/components/ui/dropdown-menu"; + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuList, + NavigationMenuTrigger, +} from "~/components/ui/navigation-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(0); + const [maxPrice, setMaxPrice] = useState(9999); + const [sliderValues, setSliderValues] = useState<[number, number]>([0, 9999]); + + const handleMinPriceChange = (e: ChangeEvent): void => { + const value = Math.min(Number(e.target.value), maxPrice - 1); + setMinPrice(value); + setSliderValues([value, sliderValues[1]]); + }; + + const handleMaxPriceChange = (e: ChangeEvent) => { + 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 ( -
+
{/* TODO: Checkboxes instead of menuitems. Check boxes are added as badges under the search bar */} - - Type - - Sparkling - White - Red - Sweet - Fortified - - + {/* Price filter */} + + + + Price + + + + + + + + + + + + Type + +

Anything goes?

+ + + + {/* Producer filter */} - - Producer - - {/* For each producer have DropdownMenuItem. */} - - - Store Henning - - - {/* Country filter */} - - Country - - {/* For each Country have DropdownMenuItem. */} - France - - - {/* Region filter */} - - Region - - {/* For each Region have DropdownMenuItem. Check for country filter */} - - - Bourgogne - - + + + + Producer + + +
    +
  • checkboxes for producer filter
    • +
+ + + + + {/* Country Filter */} + + + + Producer + +
    +
  • ccountry filter
    • +
+ + + + + {/* Region Filter */} + + + + Region + + +
    +
  • checkboxes for producer filter
    • +
+ + + +
); } diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx new file mode 100644 index 0000000..6be42fa --- /dev/null +++ b/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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + + + +)); +Slider.displayName = SliderPrimitive.Root.displayName; + +export { Slider };