Fix button and link executions

components/ui/Button.tsx

@@ -1,12 +1,18 @@
+import { ComponentProps } from "react";
+
+type ButtonProps = ComponentProps<"button"> & {
+  title: string;
+  mode?: "DARK" | "LIGHT";
+};
+
 export default function Button({
   title,
   mode = "LIGHT",
-}: {
-  title: string;
-  mode?: "DARK" | "LIGHT";
-}) {
+  ...props
+}: ButtonProps) {
   return (
     <button
+      {...props}
       className={`${mode == "LIGHT" ? "bg-slate-400 dark:bg-slate-800 border-slate-800 hover:bg-slate-500" : "bg-gray-400 dark:bg-slate-900 dark:border-slate-900 border-slate-400 hover:bg-slate-600"} border-4 border-double cursor-pointer font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out`}
     >
       {title}

components/ui/Form.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import RoundedContainer from "./RoundedContainer";
+import Button from "./Button";
 
 export default function Form({
   action,
@@ -17,7 +18,7 @@ export default function Form({
       <form action={action}>
         <RoundedContainer slim={false}>
           {children}
-          <button type="submit">{submitText}</button>
+          <Button title={submitText} type="submit"></Button>
         </RoundedContainer>
       </form>
     </div>

components/ui/NavLink.tsx

@@ -1,17 +1,21 @@
-export default function Hyperlink({
+import Link from "next/link";
+
+export default function NavLink({
   name,
   link,
+  external = false,
 }: {
   name: string;
   link: string;
+  external?: boolean;
 }) {
   return (
     <div className="bg-slate-400 dark:bg-slate-800 hover:bg-slate-600 font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out">
-      <a href={`https://${link}`} className="block">
+      <Link href={`${external ? "https:" : ""}${link}`} className="block">
         <h1 className="font-semibold text-slate-800dark:text-slate-400 text-lg">
           {name}
         </h1>
-      </a>
+      </Link>
     </div>
   );
 }

components/ui/Referencelink.tsx

@@ -1,17 +0,0 @@
-export default function Referencelink({
-  name,
-  link,
-}: {
-  name: string;
-  link: string;
-}) {
-  return (
-    <div className="bg-slate-400 dark:bg-slate-800 hover:bg-slate-600 font-medium py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out">
-      <a href={`${link}`} className="block">
-        <h1 className="font-semibold text-slate-800dark:text-slate-400 text-lg">
-          {name}
-        </h1>
-      </a>
-    </div>
-  );
-}