From 1c20c90c2f690c1ba39f08053b4a7812fb8a0793 Mon Sep 17 00:00:00 2001
From: mikigoalie <mikigoalie@seznam.cz>
Date: Tue, 30 Jan 2024 16:54:39 +0100
Subject: [PATCH] feat: toc example clickable links

---
 lib/TableOfContents/TableOfContents.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/lib/TableOfContents/TableOfContents.tsx b/lib/TableOfContents/TableOfContents.tsx
index 80d651c2..e1d074aa 100644
--- a/lib/TableOfContents/TableOfContents.tsx
+++ b/lib/TableOfContents/TableOfContents.tsx
@@ -1,4 +1,5 @@
 import cx from 'clsx';
+import { useState } from 'react';
 import { Box, Text, Group, rem } from '@mantine/core';
 import { IconListSearch } from '@tabler/icons-react';
 import classes from './TableOfContents.module.css';
@@ -14,14 +15,16 @@ const links = [
   { label: 'With form', link: '#4', order: 2 },
 ];
 
-const active = '#overlays';
-
 export function TableOfContents() {
+  const [active, setActive] = useState('#overlays');
   const items = links.map((item) => (
     <Box<'a'>
       component="a"
       href={item.link}
-      onClick={(event) => event.preventDefault()}
+      onClick={(event) => {
+        event.preventDefault();
+        setActive(item.link)
+      }}
       key={item.label}
       className={cx(classes.link, { [classes.linkActive]: active === item.link })}
       style={{ paddingLeft: `calc(${item.order} * var(--mantine-spacing-md))` }}