ABSTRACT sidebar buttons

frontend/src/components/buttons/BlueButton.tsx

@@ -5,7 +5,7 @@ type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
 const BlueButton: React.FC<Props> = ({ className = "", ...props }) => {
   return (
     <button
-      className={`bg-primary text-text p-2 rounded-lg hover:bg-primary-pressed transition-colors duration-100 h-10 ${className}`}
+      className={`bg-primary text-text rounded-lg hover:bg-primary-pressed transition-colors duration-100 h-10 ${className}`}
       {...props}
     />
   );

frontend/src/components/buttons/MenuButton.tsx

@@ -1,11 +1,12 @@
 import React from "react";
+import clsx from "clsx";
 
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 const MenuButton: React.FC<Props> = ({ className = "", ...props }) => {
     return (
         <button
-            className={`text-gray-800 text-base px-3 py-2 rounded-lg hover:bg-gray-100 hover:text-black transition-colors duration-200 ${className}`}
+            className={clsx("p-2 rounded-lg hover:bg-gray-300 hover:text-black transition-colors duration-200", className)}
             {...props}
         />
     );

frontend/src/components/buttons/SidebarButton.tsx

@@ -0,0 +1,23 @@
+import MenuButton from "./MenuButton.tsx";
+import { Link } from "react-router-dom";
+
+type props = {
+    url: string;
+    logo: React.ReactNode;
+    label: String;
+}
+
+const SidebarButton = ({url, logo, label}: props) => {
+    return (
+        <Link
+            className={"w-full"}
+            to={url}
+        >
+            <MenuButton className={"flex items-center gap-2 w-full"}>
+                {logo}{label}
+            </MenuButton>
+        </Link>
+    )
+}
+
+export default SidebarButton;