From ca3ae0db6e8e3f2cf99423797c60f5c2cc66a780 Mon Sep 17 00:00:00 2001 From: Biswa Kalyan Bhuyan Date: Thu, 29 May 2025 20:57:31 +0530 Subject: feat: added the product page and enhanced the UI - added the product page where the product details is shown - enhanced the nav bar to handle the rendering - added the loading screen to the page - fixed the rendering method to the navigation-menu --- frontend/src/components/header.tsx | 667 +++++++++++++++---------------------- 1 file changed, 274 insertions(+), 393 deletions(-) (limited to 'frontend/src/components/header.tsx') diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx index b792767..566ea71 100644 --- a/frontend/src/components/header.tsx +++ b/frontend/src/components/header.tsx @@ -42,8 +42,6 @@ import { export function Header() { const [cartItems] = useState(3); const [wishlistItems] = useState(5); - const [isMounted, setIsMounted] = useState(false); - const [sheetError, setSheetError] = useState(false); const sheetRef = useRef(null); const { setTheme, theme } = useTheme(); @@ -69,49 +67,19 @@ export function Header() { ], }, { - title: "Kids", + title: "Unisex", items: [ - { name: "Boys", href: "/kids/boys" }, - { name: "Girls", href: "/kids/girls" }, - { name: "Baby", href: "/kids/baby" }, - { name: "Shoes", href: "/kids/shoes" }, + { name: "Hoodies & Sweatshirts", href: "/unisex/hoodies" }, + { name: "T-Shirts", href: "/unisex/tshirts" }, + { name: "Jeans & Pants", href: "/unisex/pants" }, + { name: "Outerwear", href: "/unisex/outerwear" }, + { name: "Accessories", href: "/unisex/accessories" }, ], }, ]; - // Preload both logo variants to ensure smooth loading + // Preload logos for smooth loading useEffect(() => { - setIsMounted(true); - - // Add global error handler for scroll-related errors - const handleError = (event: ErrorEvent) => { - if (event.error?.message?.includes('parameter 1 is not of type \'Node\'') || - event.error?.message?.includes('handleScroll') || - event.error?.message?.includes('RemoveScrollSideCar') || - event.error?.message?.includes('shouldCancelEvent') || - event.error?.message?.includes('shouldPrevent')) { - console.warn('Scroll handling error caught and suppressed:', event.error); - event.preventDefault(); - setSheetError(true); - return false; - } - }; - - // Also add an unhandled rejection handler for async scroll errors - const handleUnhandledRejection = (event: PromiseRejectionEvent) => { - if (event.reason?.message?.includes('handleScroll') || - event.reason?.message?.includes('RemoveScrollSideCar') || - event.reason?.message?.includes('parameter 1 is not of type \'Node\'')) { - console.warn('Scroll promise rejection caught and suppressed:', event.reason); - event.preventDefault(); - setSheetError(true); - return false; - } - }; - - window.addEventListener('error', handleError); - window.addEventListener('unhandledrejection', handleUnhandledRejection); - const preloadLogos = () => { if (typeof window !== 'undefined') { const lightLogo = new window.Image(); @@ -122,117 +90,10 @@ export function Header() { }; preloadLogos(); - - return () => { - window.removeEventListener('error', handleError); - window.removeEventListener('unhandledrejection', handleUnhandledRejection); - }; }, []); - // Add scroll error prevention - useEffect(() => { - const sheetElement = sheetRef.current; - if (sheetElement) { - const handleScroll = (event: Event) => { - try { - // Allow default scroll behavior but catch any errors - } catch (error) { - console.warn('Sheet scroll error caught:', error); - event.preventDefault(); - } - }; - - sheetElement.addEventListener('scroll', handleScroll, { passive: false }); - - return () => { - sheetElement.removeEventListener('scroll', handleScroll); - }; - } - }, [isMounted]); - - // Prevent hydration issues with Sheet component - if (!isMounted) { - return ( -
- {/* Top banner */} -
-

- FREE SHIPPING ON ORDERS OVER $100 • NEW ARRIVALS EVERY WEEK -

-
- - {/* Announcement bar */} -
-

- 🔥 WINTER SALE - Up to 50% off on selected items -

-
- - {/* Main header */} -
-
-
- {/* Mobile menu placeholder */} - - - {/* Logo */} -
- - blcklst - blcklst - -
- - {/* Simplified action buttons for SSR */} -
- - - -
-
-
-
-
- ); - } - return ( -
+
{/* Top banner */}

@@ -252,229 +113,235 @@ export function Header() {

{/* Mobile menu */} - {!sheetError ? ( - - - - - { - // Prevent auto focus to avoid scroll handling issues - event.preventDefault(); - }} - onCloseAutoFocus={(event) => { - // Prevent auto focus to avoid scroll handling issues - event.preventDefault(); - }} - onEscapeKeyDown={(event) => { - // Handle escape key gracefully - try { - // Default behavior - } catch (error) { - console.warn('Escape key handling error:', error); - event.preventDefault(); - setSheetError(true); - } - }} - onPointerDownOutside={(event) => { - // Handle pointer events gracefully - try { - // Default behavior - } catch (error) { - console.warn('Pointer down outside error:', error); - event.preventDefault(); - setSheetError(true); - } - }} - onInteractOutside={(event) => { - // Additional interaction handler - try { - // Default behavior - } catch (error) { - console.warn('Interact outside error:', error); - event.preventDefault(); - setSheetError(true); - } - }} - onFocusOutside={(event) => { - // Additional focus handler - try { - // Default behavior - } catch (error) { - console.warn('Focus outside error:', error); - event.preventDefault(); - setSheetError(true); - } - }} + + + + + +
+ {/* Header Section */} + + + Menu + + - {/* Navigation Section */} -
- -
+ + + +
- {/* Footer Section */} -
-
- {/* Search Button */} - - - {/* Account Button */} - -
- - {/* Quick Actions */} -
- - - - - {/* Theme Toggle in Mobile Menu */} - - - + Size Guide + + + + + + Help & FAQ + + + +
+ +
+ + {/* Footer Section */} +
+
+ {/* Search Button */} + + + {/* Account Button */} + +
+ + {/* Quick Actions */} +
+ + + + + {/* Theme Toggle in Mobile Menu */} + + +
- - - ) : ( - - )} +
+ + {/* Logo */}
- + blcklst {/* Desktop Navigation */} - - - {categories.map((category) => ( - - - {category.title} - - -
- {category.items.map((item) => ( - - -
{item.name}
- - - ))} -
- +
+ + + {categories.map((category) => ( + + + {category.title} + + +
+ {category.items.map((item) => ( + + +
+ {item.name} +
+

+ Discover our latest {item.name.toLowerCase()} collection +

+ + + ))} +
+ + + ))} + + + + Sale + + - ))} - - - - Sale - - - - - + + +
{/* Search Bar */}
@@ -547,13 +428,13 @@ export function Header() { {/* Theme toggle */} -
+
@@ -563,7 +444,7 @@ export function Header() { @@ -595,7 +476,7 @@ export function Header() { -- cgit v1.2.3-59-g8ed1b