Update carousels, card hover, and IranBay branding.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-04 13:21:51 +03:30
commit 42aff5aee9
162 changed files with 16828 additions and 0 deletions
@@ -0,0 +1,105 @@
+"use client";
+
+import type { MegaTab } from "@/data/home";
+import styles from "./MegaMenu.module.css";
+
+const imageClassMap: Record<string, string> = {
+  dress: styles.dress,
+  drum: styles.drum,
+  notebook: styles.notebook,
+  shoes: styles.shoes,
+};
+
+export default function MegaMenu({
+  tabs,
+  tab,
+  menuImages = [],
+  onTabHover,
+}: {
+  tabs: MegaTab[];
+  tab: MegaTab;
+  menuImages?: string[];
+  onTabHover: (id: string) => void;
+}) {
+  const tabIndex = Math.max(
+    0,
+    tabs.findIndex((item) => item.id === tab.id),
+  );
+  const uploaded =
+    menuImages[tabIndex]?.trim() ||
+    (tabIndex !== 3 ? menuImages[3]?.trim() : "") ||
+    "";
+  const imageSrc = uploaded || tab.featured.image;
+  const imageClass =
+    !uploaded && tab.featured.imageClass
+      ? imageClassMap[tab.featured.imageClass]
+      : undefined;
+
+  return (
+    <div className={styles.panel} id="categories-mega">
+      <div className={styles.inner}>
+        <div className={styles.tabs} role="tablist" aria-label="Category types">
+          {tabs.map((item) => {
+            const active = item.id === tab.id;
+            return (
+              <button
+                key={item.id}
+                type="button"
+                role="tab"
+                id={`mega-tab-${item.id}`}
+                aria-selected={active}
+                aria-controls="mega-tab-panel"
+                className={`${styles.tab} ${active ? styles.tabActive : ""}`}
+                onMouseEnter={() => onTabHover(item.id)}
+                onFocus={() => onTabHover(item.id)}
+                onClick={() => onTabHover(item.id)}
+              >
+                <img src={item.icon} alt="" width={15} height={15} />
+                <span>{item.label}</span>
+                {active ? (
+                  <img
+                    className={styles.tabChevron}
+                    src="/images/icons/chevron.svg"
+                    alt=""
+                    width={7}
+                    height={12}
+                  />
+                ) : (
+                  <span className={styles.tabChevronSlot} />
+                )}
+              </button>
+            );
+          })}
+        </div>
+
+        <div
+          className={styles.body}
+          role="tabpanel"
+          id="mega-tab-panel"
+          aria-labelledby={`mega-tab-${tab.id}`}
+        >
+          <div className={styles.groups}>
+            {tab.groups.map((group, index) => (
+              <div className={styles.group} key={`${group.title}-${index}`}>
+                <h3>{group.title}</h3>
+                {group.links.map((link, linkIndex) => (
+                  <a href={link.href} key={`${link.label}-${linkIndex}`}>
+                    {link.label}
+                  </a>
+                ))}
+              </div>
+            ))}
+          </div>
+
+          <div className={styles.featured}>
+            <img
+              className={`${styles.featuredImage} ${imageClass ?? ""}`}
+              src={imageSrc}
+              alt=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}