Scribd
Upload
4 views2 pages

Dashboard Product

The document defines a React component called DashboardLayout for a web application using Next.js. It includes a sidebar with navigation links for Dashboard, Products, Orders, and Customers, styled with Tailwind CSS. The component also renders its children within a main content area, providing a layout structure for the dashboard interface.

Uploaded by

Kenfack Ronyl
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views2 pages

Dashboard Product

The document defines a React component called DashboardLayout for a web application using Next.js. It includes a sidebar with navigation links for Dashboard, Products, Orders, and Customers, styled with Tailwind CSS. The component also renders its children within a main content area, providing a layout structure for the dashboard interface.

Uploaded by

Kenfack Ronyl
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

// components/DashboardLayout.

js

import Link from 'next/link';

export default function DashboardLayout({ children }) {

return (

<div className="flex min-h-screen">

{/* Sidebar */}

<aside className="w-64 bg-gray-800 text-white p-4">

<h1 className="text-2xl font-bold mb-8">SalesSync</h1>

<nav>

<ul className="space-y-2">

<li>

<Link href="/dashboard" className="block px-4 py-2 hover:bg-gray-700


rounded">Dashboard</Link>

</li>

<li>

<Link href="/dashboard/products" className="block px-4 py-2 bg-gray-700


rounded">Products</Link>

</li>

<li>

<Link href="/dashboard/orders" className="block px-4 py-2 hover:bg-gray-700


rounded">Orders</Link>

</li>

<li>

<Link href="/dashboard/customers" className="block px-4 py-2 hover:bg-gray-700


rounded">Customers</Link>

</li>

</ul>

</nav>
</aside>

{/* Main Content */}

<div className="flex-1 bg-gray-50">

{children}

</div>

</div>

);

You might also like