add: orders page

2025-07-09 00:00:36 +03:30
parent 789de27b47
commit 82cdaffe6d
9 changed files with 312 additions and 0 deletions
@@ -0,0 +1,189 @@
+'use client';
+
+import { useCallback, useMemo, useState } from "react";
+import SearchBox from "@/components/input/SearchBox";
+import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
+import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
+import Image from "next/image";
+import EqualizerIcon from "@/components/icons/EqualizerIcon";
+import TextAlignIcon from "@/components/icons/TextAlignIcon";
+import VerticalScrollView from "@/components/listview/VerticalScrollView";
+import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
+import React from "react";
+import MenuItem from "@/components/listview/MenuItem";
+
+const categories = new Array(13).fill({ title: "خوراک", icon: "" });
+
+const foods = [
+  {
+    id: 1,
+    category: 0,
+    price: "69.000",
+    name: "کباب چوبی ژیوان )سیخ چوبی(",
+    contains: "فیله گوساله / سس سفید / قارچ و سیب زمینی/ پنیر پارمزان"
+  },
+  {
+    id: 2,
+    category: 1,
+    price: "49.000",
+    name: "برگر گوشت گوساله",
+    contains: "گوشت گوساله / پنیر چدار / کاهو / گوجه"
+  },
+  {
+    id: 3,
+    category: 2,
+    price: "29.000",
+    name: "ساندویچ مرغ",
+    contains: "مرغ / کاهو / گوجه / سس مایونز"
+  },
+  {
+    id: 4,
+    category: 0,
+    price: "89.000",
+    name: "کباب ماهی",
+    contains: "ماهی / سس لیمو / قارچ و سیب زمینی"
+  },
+  {
+    id: 5,
+    category: 1,
+    price: "39.000",
+    name: "سالاد فصل",
+    contains: "کاهو / گوجه / خیار / پنیر فتا"
+  },
+  {
+    id: 6,
+    category: 3,
+    price: "59.000",
+    name: "پاستا گوشت",
+    contains: "گوشت گوساله / پاستا / سس گوجه"
+  },
+  {
+    id: 7,
+    category: 2,
+    price: "49.000",
+    name: "ساندویچ تن ماهی",
+    contains: "تن ماهی / کاهو / گوجه / سس مایونز"
+  },
+  {
+    id: 8,
+    category: 0,
+    price: "79.000",
+    name: "کباب گوشت گوسفندی",
+    contains: "گوشت گوسفندی / سس سفید / قارچ و سیب زمینی"
+  },
+  {
+    id: 9,
+    category: 1,
+    price: "29.000",
+    name: "برگر مرغ",
+    contains: "مرغ / پنیر چدار / کاهو / گوجه"
+  },
+  {
+    id: 10,
+    category: 3,
+    price: "69.000",
+    name: "سالاد میگو",
+    contains: "میگو / کاهو / گوجه / خیار"
+  },
+  {
+    id: 11,
+    category: 2,
+    price: "39.000",
+    name: "ساندویچ شاورما",
+    contains: "مرغ / کاهو / گوجه / سس تارتار"
+  },
+  {
+    id: 12,
+    category: 0,
+    price: "99.000",
+    name: "کباب گوشت بوقلمون",
+    contains: "گوشت بوقلمون / سس سفید / قارچ و سیب زمینی"
+  },
+  {
+    id: 13,
+    category: 1,
+    price: "59.000",
+    name: "برگر ماهی",
+    contains: "ماهی / پنیر چدار / کاهو / گوجه"
+  },
+  {
+    id: 14,
+    category: 3,
+    price: "49.000",
+    name: "سالاد مرغ",
+    contains: "مرغ / کاهو / گوجه / خیار"
+  }
+];
+
+const MenuIndex = () => {
+  const [search, setSearch] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState(0);
+
+  const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  }, []);
+
+  const updateCategory = useCallback((id: number) => {
+    setSelectedCategory(id);
+  }, []);
+
+  const filteredReceiptItems = useMemo(() => {
+    const lowerSearch = search.toLowerCase();
+    return foods.filter(
+      (item) =>
+        item.category === selectedCategory &&
+        item.name.toLowerCase().includes(lowerSearch)
+    );
+  }, [selectedCategory, search]);
+
+  return (
+    <div className="flex flex-col gap-4 pt-4 items-center">
+      <SearchBox value={search} onChange={updateSearch} />
+      <HorizontalScrollView className="w-full noscrollbar py-4!">
+        {categories.map((item, index) => (
+          <CategoryItemRenderer
+            key={index}
+            className={`${index === selectedCategory ? "bg-white!" : ""}`}
+            onClick={() => updateCategory(index)}
+          >
+            <Image
+              priority
+              src="/assets/images/food-image.png"
+              width={32}
+              height={32}
+              alt="category image"
+            />
+            <span className="text-xs text-black">{item.title}</span>
+          </CategoryItemRenderer>
+        ))}
+      </HorizontalScrollView>
+
+      <section className="w-full">
+        <div className="flex justify-between items-center">
+          <span className="text-base font-semibold">
+            {categories[selectedCategory]?.title}
+          </span>
+          <div className="inline-flex gap-2 justify-around items-center">
+            <button className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
+              <EqualizerIcon />
+              <span className="text-xs leading-5">فیلتر بر اساس</span>
+            </button>
+            <button className="rounded-lg h-8 bg-white p-1.5">
+              <TextAlignIcon />
+            </button>
+          </div>
+        </div>
+
+        <VerticalScrollView className="mt-5! overflow-y-auto h-full">
+          {filteredReceiptItems.map((food) => (
+            <MenuItemRenderer key={food.id}>
+              <MenuItem food={food} />
+            </MenuItemRenderer>
+          ))}
+        </VerticalScrollView>
+      </section>
+    </div>
+  );
+};
+
+export default MenuIndex;