86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { HeroSection } from '@/sections/HeroSection';
|
|
import { catalogService, type CategoryResponse } from '@/services/api/catalogService';
|
|
import {
|
|
SIDEBAR_WIDTH,
|
|
getCategoryMenuItems,
|
|
// CategorySidebar — current mega sidebar kept in file, not deleted:
|
|
// import { CategorySidebar } from '@/components/CategorySidebar';
|
|
} from '@/components/CategorySidebar';
|
|
|
|
interface HomeHeroRowProps {
|
|
heroConfig?: any;
|
|
showHero: boolean;
|
|
initialCategories?: CategoryResponse[];
|
|
}
|
|
|
|
/**
|
|
* TechShop first viewport: All Categories rail (280px) + hero carousel.
|
|
* Only mounted when `hero_slider` is Visible in the dashboard.
|
|
*/
|
|
export const HomeHeroRow: React.FC<HomeHeroRowProps> = ({
|
|
heroConfig,
|
|
showHero = true,
|
|
initialCategories,
|
|
}) => {
|
|
const [categories, setCategories] = useState<CategoryResponse[]>(
|
|
initialCategories || []
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (initialCategories?.length) {
|
|
setCategories(initialCategories);
|
|
return;
|
|
}
|
|
let cancelled = false;
|
|
catalogService.getCategories().then((res) => {
|
|
if (!cancelled && res?.length) setCategories(res);
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [initialCategories]);
|
|
|
|
const menu = useMemo(() => getCategoryMenuItems(categories), [categories]);
|
|
|
|
if (!showHero) return null;
|
|
|
|
return (
|
|
<section className="pt-0 pb-6 bg-white font-sans">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1400px] overflow-visible">
|
|
<div className="flex items-stretch gap-0 xl:gap-8 lg:gap-10 min-w-0 overflow-visible relative z-30">
|
|
{/*
|
|
Previous mega CategorySidebar rail — kept, not deleted:
|
|
<CategorySidebar initialCategories={initialCategories} />
|
|
*/}
|
|
<aside
|
|
className="hidden xl:flex w-[280px] shrink-0 flex-col bg-white border border-primary border-t-0 rounded-b-lg overflow-hidden shadow-[0_4px_14px_rgba(25,118,243,0.08)]"
|
|
style={{ width: SIDEBAR_WIDTH }}
|
|
aria-label="Shop categories"
|
|
>
|
|
<ul className="flex flex-col flex-1 bg-white">
|
|
{menu.map((item, idx) => (
|
|
<li key={item.id}>
|
|
<Link
|
|
href={item.href}
|
|
className={`flex items-center px-5 py-[13px] text-[13px] font-medium text-[#333] hover:text-primary hover:bg-[#f7f9fc] transition-colors ${
|
|
idx < menu.length - 1 ? 'border-b border-[#ececec]' : ''
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</aside>
|
|
<div className="flex-1 min-w-0 relative z-0">
|
|
<HeroSection config={heroConfig} enabled />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|