Publisher Dashboard - Copy this React, Tailwind Component to your project

"use client" import { Link, useLocation } from "react-router-dom" import { BarChartOutlined, AimOutlined, ClockCircleOutlined, WarningOutlined, LogoutOutlined } from "@ant-design/icons" import { Menu, Divider } from "antd" import logOut from "../../../components/Logout" const PublisherSidebar = () => { const location = useLocation() const currentPath = location.pathname const menuItems = [ { id: "overview", label: "Tổng quan", icon: <BarChartOutlined />, link: "/publisher/dashboard" }, { id: "campaigns", label: "Chiến dịch", icon: <AimOutlined />, link: "/publisher/campaignlist" }, { id: "reports", label: "Báo cáo", icon: <ClockCircleOutlined />, link: "/publisher/report" }, { id: "violations", label: "Vi Phạm", icon: <WarningOutlined />, link: "/publisher/fraudtracking" }, ] return ( <div className="fixed top-0 left-0 h-screen w-64 bg-white shadow-sm z-50 flex flex-col border-r border-gray-100"> <div className="flex-1 overflow-y-auto py-4 px-3"> <Menu mode="inline" selectedKeys={[menuItems.find((item) => currentPath.includes(item.link))?.id || "overview"]} style={{ border: "none" }} > {menuItems.map((item) => ( <Menu.Item key={item.id} icon={item.icon} className={`rounded-lg my-1 text-gray-700 hover:text-blue-600 ${currentPath.includes(item.link) ? "bg-blue-50 text-blue-600" : "" }`} > <Link to={item.link}>{item.label}</Link> </Menu.Item> ))} </Menu> </div> <Divider className="my-2" /> <div className="p-4"> <button onClick={logOut} className="flex items-center gap-3 px-4 py-3 w-full text-red-500 hover:bg-red-50 hover:text-red-600 rounded-lg transition-all duration-300" > <LogoutOutlined className="text-lg" /> <span className="text-sm font-medium">Đăng xuất</span> </button> </div> </div> ) } export default PublisherSidebar chỉnh lại sidebar đẹp đẹp xíu