initial setting

com.twin.app.shoptime/src/components/TabLayout/TabLayout.jsx

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import { useDispatch } from "react-redux";
+import { addPanels } from "../../features/panels/panelsSlice";
+
+import * as Config from "../../utils/Config";
+import { $L } from "../../utils/helperMethods";
+
+export default function TabLayout(props) {
+  const dispatch = useDispatch();
+
+  const menuItems = useMemo(
+    () => [
+      { label: $L("MY PAGE"), panel: Config.panel_names.MY_PAGE_PANEL },
+      { label: $L("CATEGORY"), panel: Config.panel_names.CATEGORY_PANEL },
+      { label: $L("SEARCH"), panel: Config.panel_names.SEARCH_PANEL },
+      { label: $L("HOME"), panel: Config.panel_names.HOME_PANEL },
+      { label: $L("ON SALE"), panel: Config.panel_names.ON_SALE_PANEL },
+      {
+        label: $L("TRENDING NOW"),
+        panel: Config.panel_names.TRENDING_NOW_PANEL,
+      },
+      { label: $L("HOT PICKS"), panel: Config.panel_names.HOT_PICKS_PANEL },
+      { label: $L("CART"), panel: Config.panel_names.CART_PANEL },
+      {
+        label: $L("FEATURED BRANDS"),
+        panel: Config.panel_names.FEATURED_BRANDS_PANEL,
+      },
+    ],
+    []
+  );
+
+  const handleNavigation = (panel) => {
+    dispatch(addPanels({ name: panel, panelInfo: {} }));
+  };
+
+  return (
+    <div>
+      {menuItems.map((item, index) => (
+        <button key={index} onClick={() => handleNavigation(item.panel)}>
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}