File manager - Edit - /home/webapp69.cm.in.th/u69319090009/shop/src/components/Navbar.jsx
Back
import React from 'react'; import { Link, useLocation } from 'react-router-dom'; const Navbar = ({ currentUser, cartCount = 0, onLogout }) => { const location = useLocation(); const isActive = (path) => location.pathname === path; return ( <nav className="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200 shadow-sm"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16"> {/* Logo */} <div className="flex items-center gap-2"> <Link to="/" className="flex items-center gap-2 font-bold text-xl text-indigo-600"> <span className="w-3 h-3 rounded-full bg-indigo-600 inline-block"></span> <span>aura.</span> </Link> </div> {/* Navigation Links */} <div className="flex items-center space-x-1 sm:space-x-4"> <Link to="/" className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${ isActive('/') ? 'bg-indigo-50 text-indigo-600' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50' }`} > หน้าแรก </Link> <Link to="/cart" className={`px-3 py-2 rounded-md text-sm font-medium transition-colors relative ${ isActive('/cart') ? 'bg-indigo-50 text-indigo-600' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50' }`} > ตะกร้าสินค้า {cartCount > 0 && ( <span className="ml-1 px-2 py-0.5 text-xs font-bold bg-indigo-600 text-white rounded-full"> {cartCount} </span> )} </Link> <Link to="/seller" className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${ isActive('/seller') ? 'bg-indigo-50 text-indigo-600' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50' }`} > ระบบผู้ขาย (Seller Centre) </Link> {/* Conditional Admin Link */} {currentUser?.role === 'admin' && ( <Link to="/admin" className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${ isActive('/admin') ? 'bg-indigo-600 text-white shadow-sm' : 'text-indigo-600 bg-indigo-50 hover:bg-indigo-100 hover:text-indigo-700' }`} > 🛠️ จัดการหลังบ้าน (Admin) </Link> )} </div> {/* User Profile / Action Buttons */} <div className="flex items-center gap-3"> {currentUser ? ( <div className="flex items-center gap-3"> <span className="text-sm font-medium text-gray-700"> {currentUser.username || currentUser.name} {currentUser.role === 'admin' && ( <span className="ml-1.5 px-2 py-0.5 text-xs bg-purple-100 text-purple-700 font-semibold rounded-full"> Admin </span> )} </span> {onLogout && ( <button onClick={onLogout} className="text-xs text-gray-500 hover:text-red-600 px-2 py-1 border border-gray-200 rounded hover:border-red-200 transition" > ออกจากระบบ </button> )} </div> ) : ( <Link to="/login" className="text-sm font-medium text-indigo-600 hover:text-indigo-800" > เข้าสู่ระบบ </Link> )} </div> </div> </div> </nav> ); }; export default Navbar;
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.24 |
proxy
|
phpinfo
|
Settings