106 lines
3.0 KiB
TypeScript
106 lines
3.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|