Add admin navbar with logout button

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@types/react-star-ratings": "^2.3.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

src/app/(admin)/atc24$rw/admin/components/NavBar.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { RiCloseLine } from "react-icons/ri";
+import { Hint } from "@/components/Hint";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
+export const NavBar = () => {
+  const router = useRouter();
+
+  const signOut = () => {
+    sessionStorage.removeItem("token");
+    return router.push("/atc24$rw");
+  };
+
+  return (
+    <nav className="flex items-center justify-between px-8 pt-8">
+      <div className="flex items-center">
+        <h1 className="text-primary-lm text-3xl flex font-rounded">
+          Panel de
+          <span className="flex ml-2">
+            <Image
+              src="/icons/logoActualizatucarroM.svg"
+              width={60}
+              height={60}
+              alt="Logo"
+            />
+            dministrador
+          </span>
+        </h1>
+      </div>
+      <Hint label="Cerrar sesión" align="start" side="left" onClick={() => signOut()}>
+        <RiCloseLine size={40} />
+      </Hint>
+    </nav>
+  );
+};

src/app/(admin)/atc24$rw/admin/layout.tsx

@@ -2,6 +2,7 @@
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { ModalProvider } from "./components/ModalProvider";
+import { NavBar } from "./components/NavBar";
 
 interface DashboardLayoutProps {
   children: React.ReactNode;
@@ -19,6 +20,7 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
 
   return (
     <>
+      <NavBar />
       {children}
       <ModalProvider />
     </>

src/app/(admin)/atc24$rw/layout.tsx

@@ -1,3 +1,4 @@
+import '../../../app/globals.css';
 interface LayoutProps {
   children: React.ReactNode;
 }

src/app/(landing)/layout.tsx

@@ -0,0 +1,14 @@
+import { NavBar } from "../(nav-bar)";
+
+export default function LandingLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <NavBar />
+      {children}
+    </>
+  );
+}

src/app/layout.tsx

@@ -2,7 +2,6 @@
 import { Toaster } from "@/components/ui/sonner";
 import { Inter } from 'next/font/google'
 import './globals.css'
-import { NavBar } from './(nav-bar)'
 import { ThemeProvider } from 'next-themes'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -19,7 +18,6 @@ export default function RootLayout({
         style={{ maxWidth: '1920px', margin: '0 auto' }}
       >
         <ThemeProvider attribute="class">
-          <NavBar />
           {children}
           <Toaster position="bottom-right"/>
         </ThemeProvider>

src/components/Hint.tsx

@@ -0,0 +1,33 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface HintProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  label: string;
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+export const Hint = ({
+  children,
+  label,
+  align,
+  side,
+  onClick
+}: HintProps) => {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger onClick={onClick}>{children}</TooltipTrigger>
+        <TooltipContent align={align} side={side}>
+          <p>{label}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};

src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

tailwind.config.ts

@@ -10,6 +10,9 @@ const config = {
   ],
   prefix: "",
   theme: {
+    fontFamily: {
+      "rounded": ["Arial Rounded MT Bold"]
+    },
     container: {
       center: true,
       padding: "2rem",