Panel de Administración Next.js POS

1) layout.tsx

import ToastNotification from "@/components/ui/ToastNotification";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
        <div className="lg:min-h-screen container mx-auto mt-10 px-10 lg:px-0">
          <div className="bg-white shadow w-full  mx-auto p-10 my-10 lg:w-3/5" >
            {children}
          </div>
        </div>
        <ToastNotification />
    </>
  );
}

2) AdminNav.tsx

import Link from 'next/link'
import Logo from '@/components/ui/Logo'

export default function AdminNav() {
  return (
    <header className="px-10 py-5 bg-gray-700 flex justify-between">
        <div className="flex gap-5 text-white">
          <Logo />
        </div>

        <div className="flex gap-2 items-center">
            <Link
                href={'/admin/products'}
                className="rounded text-white font-bold p-2"
            >Productos</Link>

            <Link
                href={'/admin/sales'}
                className="rounded text-white font-bold p-2"
            >Ventas</Link>

            <Link
                href={'/'}
                className="rounded bg-green-400 font-bold py-2 px-10"
            >Tienda</Link>
        </div>
    </header>
  )
}