Finished initial price slider
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 2m6s

This commit is contained in:
christian 2024-05-25 22:07:10 +02:00
parent a3586f3059
commit 8b98ff75cf
4 changed files with 179 additions and 45 deletions

34
package-lock.json generated
View File

@ -11,6 +11,7 @@
"@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-navigation-menu": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-select": "^2.0.0", "@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-toast": "^1.1.5",
"@t3-oss/env-nextjs": "^0.10.1", "@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": { "node_modules/@radix-ui/react-slot": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",

View File

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

View File

@ -1,56 +1,126 @@
"use client";
import { 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 { Input } from "~/components/ui/input";
import { Slider } from "~/components/ui/slider";
import { ChangeEvent, useState } from "react";
export default function Filtermenu() { 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 ( return (
<div className="container flex justify-center gap-4 py-4"> <div className="container flex justify-center gap-2">
{/* TODO: {/* TODO:
Checkboxes instead of menuitems. Check boxes are added as badges under the search bar */} 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 */} {/* 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> </div>
); );
} }

View File

@ -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 };