70 lines
2.2 KiB
JavaScript
70 lines
2.2 KiB
JavaScript
import { CountUp } from './CountUp.jsx';
|
||
import { ArrowPathIcon, HomeIcon } from '@heroicons/react/24/outline';
|
||
import { motion, useReducedMotion } from 'framer-motion';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import logo from '../assets/logolang.png';
|
||
import { Button } from './Button.jsx';
|
||
|
||
export function Header({ count, title = 'Kenteken Generator', onRestart, onHome }) {
|
||
const navigate = useNavigate();
|
||
const reduceMotion = useReducedMotion();
|
||
return (
|
||
<motion.header
|
||
className="header"
|
||
initial={reduceMotion ? { opacity: 1 } : { y: -20, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ duration: reduceMotion ? 0 : 0.28 }}
|
||
>
|
||
<div className="header-inner">
|
||
<div
|
||
className="flex flex-col items-center cursor-pointer"
|
||
onClick={() => navigate('/generate')}
|
||
>
|
||
<motion.img
|
||
src={logo}
|
||
alt="CarKiddo"
|
||
className="h-10 w-auto"
|
||
whileHover={reduceMotion ? undefined : { rotate: 2, y: -1 }}
|
||
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
|
||
/>
|
||
<motion.div
|
||
className="header-title mt-1"
|
||
initial={reduceMotion ? false : { opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.3 }}
|
||
>
|
||
{title}
|
||
</motion.div>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<div className="subtle flex items-center gap-1 text-sm">
|
||
🚗 <CountUp value={count} /> kinderauto’s
|
||
</div>
|
||
{onHome && (
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
className="px-3 py-1.5 text-xs flex items-center gap-1"
|
||
onClick={onHome}
|
||
>
|
||
<HomeIcon className="w-4 h-4" />
|
||
Home
|
||
</Button>
|
||
)}
|
||
{onRestart && (
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
className="px-3 py-1.5 text-xs flex items-center gap-1"
|
||
onClick={onRestart}
|
||
>
|
||
<ArrowPathIcon className="w-4 h-4" />
|
||
Opnieuw
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</motion.header>
|
||
);
|
||
}
|