41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
|
import React from 'react';
|
||
|
|
|
||
|
|
type Page = 'permission' | 'rawDownload' | 'check';
|
||
|
|
|
||
|
|
interface NavigationProps {
|
||
|
|
currentPage: Page;
|
||
|
|
setCurrentPage: (page: Page) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const Navigation: React.FC<NavigationProps> = ({ currentPage, setCurrentPage }) => {
|
||
|
|
const activeClasses = 'bg-indigo-600 text-white';
|
||
|
|
const inactiveClasses = 'bg-slate-800 text-slate-300 hover:bg-slate-700';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav className="flex justify-center mb-8">
|
||
|
|
<div className="flex p-1 space-x-1 bg-slate-800/50 border border-slate-700 rounded-lg">
|
||
|
|
<button
|
||
|
|
onClick={() => setCurrentPage('permission')}
|
||
|
|
className={`px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${currentPage === 'permission' ? activeClasses : inactiveClasses}`}
|
||
|
|
>
|
||
|
|
Cấp quyền TMS
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => setCurrentPage('rawDownload')}
|
||
|
|
className={`px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${currentPage === 'rawDownload' ? activeClasses : inactiveClasses}`}
|
||
|
|
>
|
||
|
|
Tải raw & Setting
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => setCurrentPage('check')}
|
||
|
|
className={`px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 ${currentPage === 'check' ? activeClasses : inactiveClasses}`}
|
||
|
|
>
|
||
|
|
Check Upload
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Navigation;
|