153 lines
8.3 KiB
JavaScript
153 lines
8.3 KiB
JavaScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import React, { useContext } from "react";
|
|
import logoBlack from "../../../public/images/logo.png";
|
|
import AppContext from "@ctx/AppContext";
|
|
|
|
const ResultSearchBar = ({
|
|
searchResultProductData,
|
|
searchResultCategoryData,
|
|
}) => {
|
|
const CTX = useContext(AppContext);
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
<div className="mt-2 mb-4">
|
|
<div className="flex">
|
|
<div>
|
|
<svg
|
|
width="17"
|
|
height="17"
|
|
viewBox="0 0 225 277"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="ml-2"
|
|
>
|
|
<path
|
|
d="M68.3533 92.4443L68.3283 92.4568L68.2908 92.4818L68.3533 92.4443ZM192.778 90.1068C191.909 89.2678 190.944 88.5337 189.903 87.9193C188.43 87.0521 186.795 86.4962 185.099 86.286C183.402 86.0758 181.681 86.2158 180.04 86.6973C178.4 87.1788 176.876 87.9916 175.563 89.0854C174.249 90.1793 173.174 91.5309 172.403 93.0568C168.098 101.543 162.16 109.096 154.928 115.282C156.037 109.051 156.597 102.735 156.603 96.4068C156.627 77.1586 151.55 58.2477 141.889 41.5997C132.228 24.9516 118.327 11.161 101.603 1.63183C99.7603 0.584693 97.6814 0.0233984 95.5618 0.000715882C93.4423 -0.0219666 91.3518 0.494708 89.4869 1.50217C87.622 2.50963 86.0439 3.97479 84.9009 5.7599C83.758 7.54501 83.0878 9.59145 82.9533 11.7068C82.2534 23.5581 79.155 35.1439 73.8458 45.7624C68.5365 56.381 61.1269 65.8112 52.0658 73.4818L49.1908 75.8193C39.7109 82.1974 31.3202 90.0606 24.3408 99.1068C13.4942 112.771 5.98064 128.774 2.39598 145.847C-1.18868 162.921 -0.745824 180.595 3.68944 197.467C8.1247 214.339 16.4303 229.946 27.9476 243.05C39.4649 256.153 53.877 266.393 70.0408 272.957C71.9385 273.729 73.997 274.023 76.0351 273.813C78.0732 273.603 80.0285 272.895 81.7287 271.752C83.4289 270.609 84.822 269.065 85.7854 267.256C86.7487 265.448 87.2528 263.431 87.2533 261.382C87.2429 260.058 87.0321 258.743 86.6283 257.482C83.8316 246.97 83.026 236.028 84.2533 225.219C96.0842 247.527 115.073 265.207 138.166 275.419C140.983 276.679 144.168 276.848 147.103 275.894C165.347 270.005 181.781 259.549 194.846 245.519C207.91 231.49 217.171 214.353 221.748 195.737C226.324 177.121 226.065 157.644 220.995 139.156C215.925 120.668 206.211 103.784 192.778 90.1068ZM143.966 250.494C133.069 244.973 123.457 237.22 115.754 227.74C108.05 218.26 102.428 207.265 99.2533 195.469C98.2826 191.497 97.5314 187.474 97.0033 183.419C96.6476 180.837 95.4936 178.431 93.7028 176.537C91.912 174.643 89.574 173.356 87.0158 172.857C86.2292 172.704 85.4295 172.629 84.6283 172.632C82.432 172.63 80.2739 173.206 78.3714 174.303C76.4688 175.401 74.8889 176.98 73.7908 178.882C63.4214 196.772 58.2079 217.185 58.7283 237.857C49.6052 230.766 41.9805 221.934 36.296 211.874C30.6115 201.814 26.9803 190.726 25.6129 179.252C24.2456 167.779 25.1692 156.148 28.3304 145.034C31.4915 133.92 36.8272 123.543 44.0283 114.507C49.496 107.405 56.0919 101.248 63.5533 96.2818C63.8798 96.0724 64.1929 95.8428 64.4908 95.5943C64.4908 95.5943 68.1908 92.5318 68.3158 92.4693C86.1308 77.4074 98.8028 57.1627 104.566 34.5568C118.184 47.1489 127.263 63.8851 130.393 82.1664C133.524 100.448 130.531 119.251 121.878 135.657C120.733 137.847 120.263 140.327 120.527 142.783C120.79 145.24 121.776 147.564 123.36 149.461C124.944 151.358 127.054 152.742 129.425 153.44C131.795 154.138 134.319 154.118 136.678 153.382C155.825 147.377 172.672 135.651 184.953 119.782C192.337 130.685 197.165 143.114 199.077 156.142C200.989 169.17 199.935 182.462 195.995 195.027C192.055 207.591 185.331 219.105 176.322 228.709C167.313 238.313 156.253 245.76 143.966 250.494Z"
|
|
fill="#570000"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="mb-0 text-sm font-bold">جستجو های پرطرفدار</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className=" overflow-x-auto flex whitespace-nowrap hide-scrollBar ">
|
|
<Link
|
|
href={`/categories/fac3ee2d-19dd-4229-a412-28a1d09cc948/شامپو-بدن`}
|
|
>
|
|
<div
|
|
className="border-2 border-gray-300 py-1 px-3 rounded-full mt-1 mb-2 mx-[2px] cursor-pointer"
|
|
onClick={() => CTX.setCloseNavbar(false)}
|
|
>
|
|
<p className="mb-0 text-[12px]">شامپو بدن</p>
|
|
</div>
|
|
</Link>
|
|
<Link
|
|
href={`categories/bdf6b13c-4be5-4a93-bcdb-612440bdbd6e/کرم-مرطوب-کننده-دست-و-پا`}
|
|
>
|
|
<div
|
|
className="border-2 border-gray-300 py-1 px-3 rounded-full mt-1 mb-2 mx-[2px] cursor-pointer"
|
|
onClick={() => CTX.setCloseNavbar(false)}
|
|
>
|
|
<p className="mb-0 text-[12px]">کرم مرطوب کننده دست و پا</p>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link
|
|
href={`categories/4d3c984d-a867-495c-a0b5-302316f39fb1/شوینده-ظروف`}
|
|
>
|
|
<div
|
|
className="border-2 border-gray-300 py-1 px-3 rounded-full mt-1 mb-2 mx-[2px] cursor-pointer"
|
|
onClick={() => CTX.setCloseNavbar(false)}
|
|
>
|
|
<p className="mb-0 text-[12px]">شوینده ظروف</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
{searchResultCategoryData?.length > 0 &&
|
|
searchResultProductData?.length > 0 ? (
|
|
<>
|
|
{searchResultCategoryData?.map((e, index) => (
|
|
<Link
|
|
key={index}
|
|
href={`/categories/${e.id}/${e.name.split(" ").join("-")}`}
|
|
>
|
|
<div
|
|
className="flex "
|
|
onClick={() => CTX.setCloseNavbar(false)}
|
|
>
|
|
<div className="w-[20px] h-[40px] rounded-2xl bg-gray-200 ml-2 mt-3">
|
|
{" "}
|
|
</div>
|
|
<div className="my-2">
|
|
<p className="mb-0 text-sm ">{e.name}</p>
|
|
<small className="text-[12px] text-gray-500">
|
|
دسته بندی
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
|
|
<div className="w-10 h-1 bg-primary-200 rounded-full opacity-35 my-3"></div>
|
|
|
|
{searchResultProductData?.map((e, index) => (
|
|
<Link
|
|
key={index}
|
|
href={`/products/${e.id}/${e.persianName.split(" ").join("-")}`}
|
|
>
|
|
<div
|
|
className="flex relative "
|
|
onClick={() => CTX.setCloseNavbar(false)}
|
|
>
|
|
<div className="h-fit relative">
|
|
<div className="w-[50px] h-[50px] rounded-2xl bg-gray-200 ml-2 mt-3 overflow-hidden relative ">
|
|
{!!e.mainImage ? (
|
|
<Image
|
|
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${e.mainImage}`}
|
|
width={200}
|
|
height={200}
|
|
className="xs:!w-[60px] lg:!w-[60px] mx-auto object-cover "
|
|
alt={`${e.persianName} - ${e.englishName}`}
|
|
/>
|
|
) : (
|
|
<div className="">
|
|
<Image
|
|
src={logoBlack}
|
|
className="xs:!w-[30px] lg:!w-[30px] mx-auto opacity-25 mt-5"
|
|
alt="وسمه"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="my-2 w-full relative text-right">
|
|
<p className="mb-0 text-sm ">{e.persianName}</p>
|
|
<small className="text-[12px] text-gray-500 !text-right">
|
|
محصول{" "}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</>
|
|
) : (
|
|
<div className="flex justify-center py-5">
|
|
<div className="bg-white shadow mt-5 w-fit rounded-full text-sm p-4">
|
|
چیزی یافت نشد
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ResultSearchBar;
|