Prepeared for template creation

frontend/src/components/Header.tsx

@@ -1,14 +1,21 @@
 import { Link } from "@tanstack/react-router";
-import { House } from "lucide-react";
+import { House, LayoutTemplate } from "lucide-react";
+
+const linkClass = { className: "flex items-center gap-2" };
+const iconProps = { size: 20 };
 
 export default function Header() {
     return (
-        <header className="py-3 px-4 flex gap-2 bg-panel text-black justify-between shadow">
-            <nav className="flex flex-row font-bold">
-                <Link to="/" className="flex items-center gap-2">
-                    <House size={20} />
+        <header className="py-3 px-4 flex gap-2 bg-panel text-black justify-between shadow mb-4">
+            <nav className="flex items-center gap-4 font-bold ">
+                <Link to="/" {...linkClass}>
+                    <House {...iconProps} />
                     Home
                 </Link>
+                <Link to="/templates" {...linkClass}>
+                    <LayoutTemplate {...iconProps} />
+                    Templates
+                </Link>
             </nav>
         </header>
     );

frontend/src/components/ui/button.tsx

@@ -32,19 +32,32 @@ const buttonVariants = cva(
     }
 );
 
+const withIcon = "flex items-center gap-2";
+
 function Button({
     className,
     variant,
     size,
     asChild = false,
+    icon,
     ...props
 }: React.ComponentProps<"button"> &
     VariantProps<typeof buttonVariants> & {
         asChild?: boolean;
+        icon?: React.ReactNode;
     }) {
     const Comp = asChild ? Slot : "button";
 
-    return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+    return (
+        <Comp
+            data-slot="button"
+            className={cn(buttonVariants({ variant, size, className }), icon ? withIcon : "")}
+            {...props}
+        >
+            {icon}
+            {props.children}
+        </Comp>
+    );
 }
 
 export { Button, buttonVariants };