103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import { useState } from 'react'
|
|
import { Link, Navigate } from 'react-router-dom'
|
|
import { Menu, LogOut, Home, User, Settings } from 'lucide-react'
|
|
import { create } from 'zustand'
|
|
import * as React from 'react'
|
|
|
|
interface AuthState {
|
|
user: object | null
|
|
isAuthenticated: boolean
|
|
login: (token: string) => void
|
|
logout: () => void
|
|
}
|
|
|
|
const useAuthStore = create<AuthState>((set) => ({
|
|
user: null,
|
|
isAuthenticated: false,
|
|
login: (token: string) => {
|
|
localStorage.setItem('token', token)
|
|
set({ isAuthenticated: true })
|
|
},
|
|
logout: () => {
|
|
localStorage.removeItem('token')
|
|
set({ user: null, isAuthenticated: false })
|
|
},
|
|
}))
|
|
|
|
const Dashboard: React.FC = (): JSX.Element => {
|
|
const [sidebarOpen, setSidebarOpen] = useState<boolean>(false)
|
|
const { isAuthenticated, logout } = useAuthStore()
|
|
|
|
if (!isAuthenticated) {
|
|
console.log(isAuthenticated)
|
|
return <Navigate to="/login" />
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-screen bg-gray-100">
|
|
{/* Sidebar */}
|
|
<aside
|
|
className={`bg-gray-800 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} transition duration-200 ease-in-out md:relative md:translate-x-0`}
|
|
>
|
|
<h1 className="text-2xl font-bold text-center">Dashboard</h1>
|
|
<nav>
|
|
<Link
|
|
to="/home"
|
|
className="flex items-center space-x-2 px-4 py-2 hover:bg-gray-700 rounded"
|
|
>
|
|
<Home size={20} />
|
|
<span>Home</span>
|
|
</Link>
|
|
<Link
|
|
to="/profile"
|
|
className="flex items-center space-x-2 px-4 py-2 hover:bg-gray-700 rounded"
|
|
>
|
|
<User size={20} />
|
|
<span>Perfil</span>
|
|
</Link>
|
|
<Link
|
|
to="/settings"
|
|
className="flex items-center space-x-2 px-4 py-2 hover:bg-gray-700 rounded"
|
|
>
|
|
<Settings size={20} />
|
|
<span>Configurações</span>
|
|
</Link>
|
|
<button
|
|
className="flex items-center space-x-2 px-4 py-2 w-full text-left hover:bg-red-600 rounded mt-5"
|
|
onClick={logout}
|
|
>
|
|
<LogOut size={20} />
|
|
<span>Sair</span>
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
|
|
{/* Main content */}
|
|
<div className="flex-1 flex flex-col">
|
|
{/* Header */}
|
|
<header className="bg-white shadow-md p-4 flex justify-between items-center">
|
|
<button
|
|
onClick={() => setSidebarOpen(!sidebarOpen)}
|
|
className="md:hidden"
|
|
>
|
|
<Menu size={24} />
|
|
</button>
|
|
<h2 className="text-xl font-semibold">Painel de Controle</h2>
|
|
</header>
|
|
|
|
{/* Conteúdo principal */}
|
|
<main className="p-6 flex-1 overflow-auto">
|
|
<h3 className="text-lg font-semibold mb-4">
|
|
Bem-vindo ao Dashboard!
|
|
</h3>
|
|
<p>
|
|
Aqui você pode gerenciar suas informações e visualizar os dados do
|
|
sistema.
|
|
</p>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Dashboard
|