My personal site.
theclashfruit.me
???
+25
-4
+25
-4
components/Header.tsx
+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
);