fix buttons through the ui (#119)

* Fix buttons using a component

* Get verify email under control

* Restyle messages

* Add consistent rings to everything

* Add even more buttons

* Fix build

* Prettify

Author: odarbelaeze

package-lock.json

@@ -5,12 +5,15 @@
   "type": "module",
   "dependencies": {
     "@hookform/resolvers": "^3.4.0",
+    "@radix-ui/react-slot": "^1.1.1",
     "@tanstack/react-query": "^5.60.5",
     "@types/d3": "^7.4.0",
     "@types/lodash": "^4.17.4",
     "@types/md5": "^2.2.0",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "d3": "^7.8.5",
     "firebase": "^10.12.0",
     "js-base64": "^3.7.5",
@@ -24,6 +27,7 @@
     "react-hook-form": "^7.51.4",
     "react-router-dom": "^6.23.1",
     "react-use": "^17.4.0",
+    "tailwind-merge": "^3.0.1",
     "yup": "^1.0.2"
   },
   "scripts": {

package.json

@@ -1,34 +1,29 @@
+import Button from "../ui/Button";
 import { FC } from "react";
 
 type Heading = {
   text: string;
-  level: number;
   id: string;
 };
 
 const headingData: Heading[] = [
   {
-    level: 2,
     text: "Roots",
     id: "info-on-roots",
   },
   {
-    level: 2,
     text: "Trunk",
     id: "info-on-trunk",
   },
   {
-    level: 2,
     text: "Branches",
     id: "info-on-branches",
   },
   {
-    level: 2,
     text: "Leaves",
     id: "info-on-leaves",
   },
   {
-    level: 2,
     text: "SAP Algorithm",
     id: "info-on-sap-algorithm",
   },
@@ -38,28 +33,13 @@ const TableOfContents: FC = () => {
   return (
     <div className="prose prose-stone">
       <ul>
-        {headingData.map((heading) => {
-          const id = heading.id;
-          const indentation = {
-            3: " pl-2",
-            4: " pl-4",
-          };
-          const level = heading.level as keyof typeof indentation;
-          const paddingClass = indentation[level] ?? "";
-          return (
-            <li key={id}>
-              <a
-                href={`#${id}`}
-                className={
-                  "text-sky-600 underline-offset-2 hover:text-sky-800" +
-                  paddingClass
-                }
-              >
-                {heading.text}
-              </a>
-            </li>
-          );
-        })}
+        {headingData.map((heading) => (
+          <li key={heading.id}>
+            <Button variant="link" size="link" asChild>
+              <a href={`#${heading.id}`}>{heading.text}</a>
+            </Button>
+          </li>
+        ))}
       </ul>
     </div>
   );