My personal site. theclashfruit.me
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

???

+25 -4
+25 -4
components/Header.tsx
··· 1 - import { Leaf, LogIn } from 'lucide-react'; 1 + 'use client'; 2 + 3 + import { Leaf, PawPrint } from 'lucide-react'; 4 + import { useState } from 'react'; 2 5 3 6 import styles from '@/styles/components/Header.module.scss'; 4 - import Link from 'next/link'; 5 7 6 8 export default function Header() { 9 + const [clicks, setClicks] = useState(0); 10 + const [Current, setCurrent] = useState(() => Leaf); 11 + 12 + const [target, setTarget] = useState(() => Math.round(Math.random() * 100)); 13 + 7 14 return ( 8 15 <header className={styles.header}> 9 16 <div className={styles.nav}> 10 - <Leaf size={32} /> 17 + <Current 18 + size={32} 19 + onClick={() => { 20 + setClicks(clicks + 1); 21 + 22 + if (clicks === 1) setCurrent(() => Leaf); 23 + 24 + if (clicks === target) { 25 + setCurrent(() => PawPrint); 26 + 27 + setClicks(0); 28 + setTarget(Math.round(Math.random() * 100)); 29 + } 30 + }} 31 + /> 11 32 </div> 12 - 33 + 13 34 <h1>TheClashFruit</h1> 14 35 </header> 15 36 );