first commit

src/widgets/navbar/ui/SearchResult.tsx

@@ -0,0 +1,66 @@
+import formatPrice from '@/shared/lib/formatPrice';
+import { categories, ProductDetail } from '@/widgets/categories/lib/data';
+import { PackageOpen } from 'lucide-react';
+import Image from 'next/image';
+import { Fragment, useEffect, useState } from 'react';
+
+type SearchResultProps = {
+  query: string;
+};
+
+export const SearchResult = ({ query }: SearchResultProps) => {
+  const [searchProduct, setSearchProduct] = useState<ProductDetail[]>([]);
+
+  useEffect(() => {
+    setSearchProduct(
+      categories.flatMap((cat) =>
+        cat.products.filter((pro) =>
+          pro.name.toLowerCase().includes(query.toLowerCase()),
+        ),
+      ),
+    );
+  }, [query]);
+
+  if (searchProduct.length === 0) {
+    return (
+      <div className="flex flex-col justify-center items-center min-h-[300px] max-h-[600px] gap-2">
+        <PackageOpen className="size-22 text-muted-foreground" />
+        <p className="text-lg text-muted-foreground text-center">
+          Hech narsa topilmadi
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <p className="text-sm font-semibold text-foreground">
+        {query.length > 0 ? 'Qidiruv natijalari' : 'Tavsiya etiladi'}
+      </p>
+
+      {searchProduct.slice(0, 5).map((product, index) => (
+        <Fragment key={index}>
+          <div className="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-100 cursor-pointer transition">
+            <Image
+              width={500}
+              height={500}
+              src={product.image}
+              alt={product.name}
+              className="w-10 h-10 rounded-md object-cover"
+            />
+
+            <div className="flex-1">
+              <p className="text-sm font-medium text-slate-800">
+                {product.name}
+              </p>
+              <p className="text-xs text-slate-500">{product.rating}</p>
+              <p className="text-xs text-slate-600">
+                {formatPrice(product.price)}
+              </p>
+            </div>
+          </div>
+        </Fragment>
+      ))}
+    </div>
+  );
+};