move header to component

aimenet-web/src/components/am-header.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import {Separator} from "@/components/ui/separator.tsx";
+
+export function AMHeader(props: { title: string, children?: Readonly<React.ReactNode> }) {
+    return (
+        <>
+            <div className="flex items-center gap-1">
+                <h2 className="text-4xl font-bold select-none flex-grow">{props.title}</h2>
+                {props.children}
+            </div>
+            <Separator/>
+        </>
+    );
+}

aimenet-web/src/pages/card-in-screen.tsx

@@ -6,12 +6,12 @@ import {ChevronRight, Circle, CircleCheckBig, Home, Plus, ServerOff, Wallet} fro
 import {AimeCard, AimeServer, db} from "@/lib/database";
 import {getServerInfo, serverCardIn} from "@/lib/aime-net";
 
-import {AMFooter} from "@/components/am-footer.tsx";
 import {Button} from "@/components/ui/button";
 import {useToast} from "@/components/ui/use-toast";
-import {Separator} from "@/components/ui/separator";
 import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";
 
+import {AMHeader} from "@/components/am-header.tsx";
+import {AMFooter} from "@/components/am-footer.tsx";
 import {AimeCardEntry} from "@/components/aime-card";
 import {LoadingIndicator} from "@/components/loading-indicator";
 import {CardCreationDialog} from "@/components/card-creation-form";
@@ -124,14 +124,12 @@ function ServerCardInPage() {
     return (
         <>
             <main className="flex flex-col gap-5 container min-h-screen py-10">
-                <div className="flex items-center gap-1">
-                    <h2 className="text-4xl font-bold select-none flex-grow">{server?.name ?? "Server"}</h2>
+                <AMHeader title={server?.name ?? "Server"}>
                     <Button variant="ghost" onClick={() => navigate('/')}>
                         <Home className="h-4 w-4 sm:mr-2"/>
                         <span className="hidden sm:block">Servers</span>
                     </Button>
-                </div>
-                <Separator/>
+                </AMHeader>
 
                 {!server && (<LoadingIndicator/>)}
                 {(server && connectionError) && (<Alert variant="destructive">

aimenet-web/src/pages/card-manager.tsx

@@ -4,9 +4,7 @@ import {Plus, Server, Trash} from "lucide-react";
 
 import {AimeCard, db} from "@/lib/database";
 
-import {AMFooter} from "@/components/am-footer.tsx";
 import {Button} from "@/components/ui/button";
-import {Separator} from "@/components/ui/separator";
 import {
     ContextMenu,
     ContextMenuContent,
@@ -14,6 +12,8 @@ import {
     ContextMenuTrigger
 } from "@/components/ui/context-menu";
 
+import {AMHeader} from "@/components/am-header.tsx";
+import {AMFooter} from "@/components/am-footer.tsx";
 import {AimeCardEntry} from "@/components/aime-card";
 import {LoadingIndicator} from "@/components/loading-indicator";
 import {CardCreationDialog} from "@/components/card-creation-form";
@@ -62,14 +62,12 @@ function CardManagerPage() {
 
     return (
         <main className="flex flex-col gap-5 container min-h-screen py-10">
-            <div className="flex items-center gap-1">
-                <h2 className="text-4xl font-bold select-none flex-grow">Cards</h2>
+            <AMHeader title="Cards">
                 <Button variant="ghost" size={"default"} onClick={() => navigate('/')}>
                     <Server className="h-4 w-4 sm:mr-2"/>
                     <span className="hidden sm:block">Manage Servers</span>
                 </Button>
-            </div>
-            <Separator/>
+            </AMHeader>
 
             <div className="flex flex-col gap-4 w-full flex-grow">
                 {cards ? <CardList cards={cards}/> : <LoadingIndicator/>}

aimenet-web/src/pages/server-listing.tsx

@@ -17,10 +17,8 @@ import {
 
 import {AimeServer, db} from "@/lib/database";
 
-import {AMFooter} from "@/components/am-footer.tsx";
 import {Input} from "@/components/ui/input";
 import {Button} from "@/components/ui/button";
-import {Separator} from "@/components/ui/separator";
 import {LoadingIndicator} from "@/components/loading-indicator";
 import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert";
 import {Form, FormControl, FormField, FormItem, FormMessage} from "@/components/ui/form";
@@ -31,6 +29,9 @@ import {
     ContextMenuSeparator,
     ContextMenuTrigger
 } from "@/components/ui/context-menu";
+
+import {AMFooter} from "@/components/am-footer.tsx";
+import {AMHeader} from "@/components/am-header.tsx";
 import {AMCard, AMCardDetail} from "@/components/am-card.tsx";
 
 const serverAdditionSchema = z.object({
@@ -192,14 +193,12 @@ function ServerListing() {
 
     return (
         <main className="flex flex-col gap-5 container min-h-screen py-10">
-            <div className="flex items-center gap-1">
-                <h2 className="text-4xl font-bold select-none flex-grow">AimeNet</h2>
+            <AMHeader title="Servers">
                 <Button variant="ghost" size={"default"} onClick={() => navigate('/cards')}>
                     <WalletCards className="h-4 w-4 sm:mr-2"/>
                     <span className="hidden sm:block">Manage Cards</span>
                 </Button>
-            </div>
-            <Separator/>
+            </AMHeader>
 
             <div className="flex flex-col gap-4 w-full flex-grow">
                 <ServerList servers={servers}/>