view products

src/app/[name]/(Main)/page.tsx

@@ -2,9 +2,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import SearchBox from "@/components/input/SearchBox";
 import TextAlignIcon from "@/components/icons/TextAlignIcon";
+import ListIcon from "@/components/icons/ListIcon";
+import GridIcon from "@/components/icons/GridIcon";
 import VerticalScrollView from "@/components/listview/VerticalScrollView";
 import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
-import MenuItem from "@/components/listview/MenuItem";
+import MenuItem, { type MenuItemViewMode } from "@/components/listview/MenuItem";
 import { useQueryState } from "next-usequerystate";
 import clsx from "clsx";
 import { motion } from "framer-motion";
@@ -15,6 +17,7 @@ import MenuFilterDrawer from "@/app/[name]/(Main)/components/MenuFilterDrawer";
 import MenuSkeleton from "@/app/[name]/(Main)/components/MenuSkeleton";
 import { useGetCategories, useGetProducts } from "./hooks/useMenuData";
 import type { Product, Category } from "./types/Types";
+import { RowHorizontal, RowVertical } from "iconsax-react";
 
 const sortings = ["PopularityDescending", "RateDescending", "PriceAscending", "PriceDescending"] as const;
 
@@ -36,6 +39,17 @@ const MenuIndex = () => {
   const wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
   const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
   const [isInitialMount, setIsInitialMount] = useState(true);
+  const [viewMode, setViewMode] = useState<MenuItemViewMode>("list");
+
+  useEffect(() => {
+    const stored = localStorage.getItem("menuViewMode");
+    if (stored === "grid" || stored === "list") setViewMode(stored);
+  }, []);
+
+  const setViewModeAndPersist = useCallback((mode: MenuItemViewMode) => {
+    setViewMode(mode);
+    if (typeof window !== "undefined") localStorage.setItem("menuViewMode", mode);
+  }, []);
 
   useEffect(() => {
     if (isInitialMount) {
@@ -160,6 +174,32 @@ const MenuIndex = () => {
             {selectedCategory === '0' ? '' : categories.find(c => c.id === selectedCategory)?.title || ''}
           </span>
           <div className="inline-flex gap-2 justify-end items-center">
+            <div className="inline-flex rounded-xl h-8 bg-container p-1">
+              <button
+                onClick={() => setViewModeAndPersist("list")}
+                className={clsx(
+                  "rounded-lg h-6 w-8 inline-flex items-center justify-center transition-colors",
+                  viewMode === "list"
+                    ? "bg-background text-foreground"
+                    : "text-foreground/60 hover:text-foreground"
+                )}
+                title="نمایش یک ستونه"
+              >
+                <RowVertical color="black" className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => setViewModeAndPersist("grid")}
+                className={clsx(
+                  "rounded-lg h-6 w-8 inline-flex items-center justify-center transition-colors",
+                  viewMode === "grid"
+                    ? "bg-background text-foreground"
+                    : "text-foreground/60 hover:text-foreground"
+                )}
+                title="نمایش دو ستونه"
+              >
+                <RowHorizontal color="black" className="w-4 h-4" />
+              </button>
+            </div>
             <button
               onClick={toggleFilterSortModal}
               className="rounded-xl h-8 bg-container ps-4 pe-2 py-1.5 inline-flex items-center gap-2"
@@ -191,10 +231,18 @@ const MenuIndex = () => {
             <div className="text-center text-foreground/60 py-8">
               {productsData ? 'کالایی یافت نشد' : 'در حال بارگذاری...'}
             </div>
+          ) : viewMode === "grid" ? (
+            <div className="grid grid-cols-2 gap-3">
+              {filteredReceiptItems.map((product) => (
+                <MenuItemRenderer key={product.id} variant="grid">
+                  <MenuItem product={product} viewMode="grid" />
+                </MenuItemRenderer>
+              ))}
+            </div>
           ) : (
             filteredReceiptItems.map((product) => (
-              <MenuItemRenderer key={product.id}>
-                <MenuItem product={product} />
+              <MenuItemRenderer key={product.id} variant="list">
+                <MenuItem product={product} viewMode="list" />
               </MenuItemRenderer>
             ))
           )}