37 lines
1.2 KiB
JavaScript
37 lines
1.2 KiB
JavaScript
import React from "react";
|
|
import "./Navigation.css";
|
|
|
|
const Navigation = ({ activeTab, onTabChange }) => {
|
|
const tabs = [
|
|
{ id: "dashboard", icon: "fa-tachometer-alt", label: "Dashboard" },
|
|
{ id: "dungeons", icon: "fa-dungeon", label: "Dungeons" },
|
|
{ id: "skills", icon: "fa-graduation-cap", label: "Skills" },
|
|
{ id: "inventory", icon: "fa-archive", label: "Inventory" },
|
|
{ id: "shop", icon: "fa-store", label: "Shop" },
|
|
{ id: "crafting", icon: "fa-hammer", label: "Crafting" },
|
|
{ id: "itemlist", iocon: "fa-store", label: "Item List" },
|
|
];
|
|
|
|
return (
|
|
<nav className="main-nav">
|
|
<div className="nav-container">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
className={`nav-btn ${activeTab === tab.id ? "active" : ""}`}
|
|
onClick={() => onTabChange(tab.id)}
|
|
>
|
|
<div className="nav-btn-content">
|
|
<i className={`fas ${tab.icon}`}></i>
|
|
<span className="nav-label">{tab.label}</span>
|
|
</div>
|
|
<div className="nav-active-indicator"></div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navigation;
|