x
This commit is contained in:
Your Name committed
1 parent
f6c188bd93
commit
b78c9467bc
9 files changed
+656
-49
No files matched your search
@@ -4,17 +4,21 @@ import type { MegaMenuPayload, MenuColumn } from '../store/menuStore';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ArrowRight,
|
||||
Award,
|
||||
Box,
|
||||
ChevronRight,
|
||||
Gift,
|
||||
Leaf,
|
||||
Package,
|
||||
ShoppingBag,
|
||||
Sparkles,
|
||||
Star,
|
||||
type LucideIcon,
|
||||
Sparkles,
|
||||
Box,
|
||||
} from 'lucide-react';
|
||||
import { ICON_REGISTRY, type AvailableIcons } from '../utils/iconRegistry';
|
||||
|
||||
function DynamicIcon({ iconName, defaultIcon: DefaultIcon, className, strokeWidth }: { iconName?: string, defaultIcon: any, className?: string, strokeWidth?: number }) {
|
||||
const IconComponent = (iconName && ICON_REGISTRY[iconName as AvailableIcons])
|
||||
? ICON_REGISTRY[iconName as AvailableIcons]
|
||||
: DefaultIcon;
|
||||
|
||||
return <IconComponent className={className} strokeWidth={strokeWidth} />;
|
||||
}
|
||||
|
||||
|
||||
interface DesktopMegaMenuProps {
|
||||
items: MegaMenuPayload[];
|
||||
@@ -26,14 +30,7 @@ const getLocalizedText = (textObj: Record<string, string> | string | undefined,
|
||||
return textObj[lang] || textObj.en || textObj.th || Object.values(textObj)[0] || '';
|
||||
};
|
||||
|
||||
const MENU_ICONS: LucideIcon[] = [
|
||||
ShoppingBag,
|
||||
Sparkles,
|
||||
Leaf,
|
||||
Package,
|
||||
Gift,
|
||||
Award,
|
||||
];
|
||||
|
||||
|
||||
const MAX_TOP_LEVEL_LINKS = 5;
|
||||
const MAX_INLINE_CHILD_LINKS = 3;
|
||||
@@ -48,16 +45,16 @@ const getMoreLabel = (count: number, lang: string) => {
|
||||
};
|
||||
|
||||
// Image block shared between Root and Hover areas
|
||||
function MenuImage({ src, alt, placeholder }: { src?: string | null; alt: string; placeholder?: string }) {
|
||||
function MenuImage({ src, alt, placeholder, className, style }: { src?: string | null; alt: string; placeholder?: string; className?: string; style?: React.CSSProperties }) {
|
||||
if (!src) {
|
||||
if (!placeholder) return null;
|
||||
return (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<div className={`w-full h-full flex items-center justify-center ${className || ''}`} style={style}>
|
||||
<span className="text-pop-black/30 text-xs text-center px-3 leading-relaxed">{placeholder}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <img src={src} alt={alt} className="w-full h-full object-cover" loading="lazy" />;
|
||||
return <img src={src} alt={alt} className={`w-full h-full object-cover ${className || ''}`} style={style} loading="lazy" />;
|
||||
}
|
||||
|
||||
export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
|
||||
@@ -105,6 +102,8 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
|
||||
const showFeatured = featuredConfig?.enabled !== false;
|
||||
const configuredImage = featuredConfig?.imageUrl || null;
|
||||
const featuredImage = hoveredLinkImage ?? configuredImage ?? featuredLink?.imageUrl ?? item.rootImageUrl;
|
||||
const focalPoint = featuredConfig?.focalPoint;
|
||||
const objectPosition = focalPoint ? `${focalPoint.x} ${focalPoint.y}` : 'center';
|
||||
const featuredHeading = getLocalizedText(featuredConfig?.sectionTitle, lang) || 'Featured';
|
||||
const featuredBadge = getLocalizedText(featuredConfig?.badge, lang) || 'Recommended';
|
||||
const featuredTitle = getLocalizedText(featuredConfig?.title, lang)
|
||||
@@ -165,15 +164,16 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
|
||||
className={`pr-8 text-left ${idx > 0 ? 'border-l border-pop-black/10 pl-8' : ''}`}
|
||||
>
|
||||
<h4 className="mb-5 flex items-center gap-3 text-xs font-bold normal-case tracking-normal text-pop-black">
|
||||
{(() => {
|
||||
const HeadingIcon = MENU_ICONS[idx] ?? Sparkles;
|
||||
return <HeadingIcon className="h-4 w-4 text-pop-black/70" strokeWidth={1.5} />;
|
||||
})()}
|
||||
<DynamicIcon
|
||||
iconName={col.icon}
|
||||
defaultIcon={Sparkles}
|
||||
className="h-4 w-4 text-pop-black/70"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
{getLocalizedText(col.title, lang)}
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
{col.links.slice(0, MAX_TOP_LEVEL_LINKS).map((link, lIdx) => {
|
||||
const RowIcon = MENU_ICONS[(idx * 3 + lIdx + 1) % MENU_ICONS.length] ?? Box;
|
||||
const hasNestedLinks = !!link.links?.length;
|
||||
const visibleChildLinks = link.links?.slice(0, MAX_INLINE_CHILD_LINKS) ?? [];
|
||||
const hiddenChildCount = Math.max((link.links?.length ?? 0) - MAX_INLINE_CHILD_LINKS, 0);
|
||||
@@ -191,7 +191,12 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
|
||||
className="group flex items-center gap-4 rounded-md px-1 py-2.5 text-left transition-colors hover:bg-pop-black/5"
|
||||
>
|
||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-pop-black/10 bg-pop-bg text-pop-black/70 transition-colors group-hover:border-pop-black/30">
|
||||
<RowIcon className="h-5 w-5" strokeWidth={1.35} />
|
||||
<DynamicIcon
|
||||
iconName={link.icon}
|
||||
defaultIcon={Box}
|
||||
className="h-5 w-5"
|
||||
strokeWidth={1.35}
|
||||
/>
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block text-sm font-bold normal-case tracking-normal text-pop-black">
|
||||
@@ -261,6 +266,8 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
|
||||
src={featuredImage}
|
||||
alt={featuredTitle}
|
||||
placeholder={getLocalizedText(item.label, lang)}
|
||||
className="transition-transform duration-700 group-hover:scale-105"
|
||||
style={{ objectPosition }}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2 p-4">
|
||||
|
||||
Reference in new issue
Block a user