83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import { Cuisine, Location, PRICE } from "@prisma/client";
|
|
import Link from "next/link";
|
|
|
|
export default async function SearchSideBar({
|
|
locations,
|
|
cuisines,
|
|
searchParams
|
|
}: {
|
|
locations: Location[];
|
|
cuisines: Cuisine[];
|
|
searchParams: {city?: string, location?: string, cuisine?: string, price: PRICE}
|
|
}) {
|
|
console.log("cuisines: ", cuisines);
|
|
console.log("locations: ", locations);
|
|
|
|
const priceStyle = "border w-full text-reg font-light p-2 text-center"
|
|
const prices = [
|
|
{label: "$", price: PRICE.CHEAP, className: `${priceStyle} rounded-l`},
|
|
{label: "$$", price: PRICE.REGULAR, className: `${priceStyle} `},
|
|
{label: "$$$", price: PRICE.EXPENSIVE, className: `${priceStyle} rounded-r`}
|
|
];
|
|
|
|
return (
|
|
<div className="w-1/5">
|
|
<div className="border-b pb-4 flex flex-col">
|
|
<h1 className="mb-2">Region</h1>
|
|
{locations.map((location, index) => (
|
|
<Link
|
|
href={{
|
|
pathname: "/search",
|
|
query: {
|
|
...searchParams,
|
|
city: location.name,
|
|
},
|
|
}}
|
|
key={index}
|
|
className="font-light text-reg"
|
|
>
|
|
{location.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="border-b pb-4 mt-3 flex flex-col">
|
|
<h1 className="mb-2">Cuisine</h1>
|
|
{cuisines.map((cuisine, index) => (
|
|
<Link
|
|
href={{
|
|
pathname: "/search",
|
|
query: {
|
|
...searchParams,
|
|
cuisine: cuisine.name,
|
|
},
|
|
}}
|
|
key={index}
|
|
className="font-light text-reg"
|
|
>
|
|
{cuisine.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="mt-3 pb-4">
|
|
<h1 className="mb-2">Price</h1>
|
|
<div className="flex">
|
|
{
|
|
prices.map(({price, label, className}) => (
|
|
<Link
|
|
href={{
|
|
pathname: "/search",
|
|
query: {
|
|
...searchParams,
|
|
price: price,
|
|
},
|
|
}} className={className}>
|
|
{label}
|
|
</Link>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|