tknuth/hotschpotsh
0
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Shop integration

Browse Source
This commit is contained in:
Timo Knuth
2026-01-14 17:47:58 +01:00
parent be7f7b7bf7
commit 21b78f8d17
52 changed files with 5288 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
Pottery-website/components/Header.tsx
View File

@@ -2,8 +2,10 @@ import React, { useState, useEffect } from 'react';
import { NAV_ITEMS } from '../constants';
import { motion, AnimatePresence } from 'framer-motion';
import { Link } from 'react-router-dom';
import { useStore } from '../src/context/StoreContext';
const Header: React.FC = () => {
const { cart, setCartOpen } = useStore();
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
@@ -18,8 +20,8 @@ const Header: React.FC = () => {
return (
<header
className={`fixed top-0 w-full z-50 transition-all duration-500 ${scrolled
? 'bg-white/80 dark:bg-black/80 backdrop-blur-xl py-2 border-b border-stone-200/50 dark:border-stone-800/50'
: 'bg-transparent py-6'
? 'bg-white/80 dark:bg-black/80 backdrop-blur-xl py-2 border-b border-stone-200/50 dark:border-stone-800/50'
: 'bg-transparent py-6'
}`}
>
<div className="max-w-[1920px] mx-auto px-6 md:px-12">
@@ -38,7 +40,7 @@ const Header: React.FC = () => {
{/* Logo */}
<div className="flex-shrink-0 relative group cursor-pointer">
<Link className="font-display text-4xl md:text-5xl font-light tracking-widest uppercase text-text-main dark:text-white" to="/">
HOTCHPOTSH
HOTSCHPOTSH
</Link>
{/* Subtle glow effect on hover */}
<div className="absolute -inset-4 bg-white/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-full" />
@@ -64,10 +66,18 @@ const Header: React.FC = () => {
<button className="hover:scale-110 transition-transform duration-300 hidden sm:block p-2">
<span className="material-symbols-outlined text-xl font-light">search</span>
</button>
<a className="hover:scale-110 transition-transform duration-300 relative group p-2" href="#">
<button
onClick={() => setCartOpen(true)}
className="hover:scale-110 transition-transform duration-300 relative group p-2"
type="button"
>
<span className="material-symbols-outlined text-xl font-light">shopping_bag</span>
<span className="absolute top-0 right-0 bg-black dark:bg-white text-white dark:text-black text-[9px] w-4 h-4 flex items-center justify-center rounded-full opacity-0 scale-50 group-hover:opacity-100 group-hover:scale-100 transition-all duration-300">2</span>
</a>
{cart.length > 0 && (
<span className="absolute top-0 right-0 bg-black dark:bg-white text-white dark:text-black text-[9px] w-4 h-4 flex items-center justify-center rounded-full opacity-100 scale-100 transition-all duration-300">
{cart.reduce((total, item) => total + item.quantity, 0)}
</span>
)}
</button>
</div>
</div>
</div>