feat: Navbar, Sidebar, Footer layout components
This commit is contained in:
@@ -0,0 +1,22 @@
|
||||
import { Shield } from "lucide-react";
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-white/[0.08] mt-24 py-12">
|
||||
<div className="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-7 h-7 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center">
|
||||
<Shield size={14} />
|
||||
</div>
|
||||
<span className="font-semibold text-white/80">Aura Store</span>
|
||||
</div>
|
||||
<div className="flex gap-6 text-sm text-white/40">
|
||||
<a href="https://t.me/cricket_vpn_bot" className="hover:text-white transition-colors">Telegram</a>
|
||||
<a href="#faq" className="hover:text-white transition-colors">FAQ</a>
|
||||
<a href="#pricing" className="hover:text-white transition-colors">Тарифы</a>
|
||||
</div>
|
||||
<span className="text-xs text-white/20">© 2026 Aura Store. Все права защищены.</span>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Shield, LogOut, LayoutDashboard } from "lucide-react";
|
||||
import { useAuthStore } from "../../store/auth";
|
||||
import { Button } from "../ui/Button";
|
||||
|
||||
export function Navbar() {
|
||||
const { isLoggedIn, logout } = useAuthStore();
|
||||
const navigate = useNavigate();
|
||||
const loggedIn = isLoggedIn();
|
||||
|
||||
return (
|
||||
<nav className="fixed top-0 left-0 right-0 z-40 border-b border-white/[0.08] bg-[#0d0b1e]/80 backdrop-blur-md">
|
||||
<div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
|
||||
<Link to="/" className="flex items-center gap-2 font-bold text-lg">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center">
|
||||
<Shield size={16} />
|
||||
</div>
|
||||
<span className="bg-gradient-to-r from-purple-300 to-indigo-300 bg-clip-text text-transparent">
|
||||
Aura Store
|
||||
</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-3">
|
||||
{loggedIn ? (
|
||||
<>
|
||||
<Link to="/dashboard">
|
||||
<Button variant="secondary" className="flex items-center gap-2">
|
||||
<LayoutDashboard size={16} /> Кабинет
|
||||
</Button>
|
||||
</Link>
|
||||
<Button variant="secondary" onClick={() => { logout(); navigate("/"); }}>
|
||||
<LogOut size={16} />
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link to="/login"><Button variant="secondary">Войти</Button></Link>
|
||||
<Link to="/register"><Button>Подключиться</Button></Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { LayoutDashboard, Key, Smartphone, CreditCard, Globe, User } from "lucide-react";
|
||||
|
||||
const links = [
|
||||
{ to: "/dashboard", icon: LayoutDashboard, label: "Обзор" },
|
||||
{ to: "/dashboard/keys", icon: Key, label: "Мои ключи" },
|
||||
{ to: "/dashboard/devices", icon: Smartphone, label: "Устройства" },
|
||||
{ to: "/dashboard/payments", icon: CreditCard, label: "Платежи" },
|
||||
{ to: "/dashboard/servers", icon: Globe, label: "Серверы" },
|
||||
{ to: "/profile", icon: User, label: "Профиль" },
|
||||
];
|
||||
|
||||
export function Sidebar() {
|
||||
return (
|
||||
<aside className="w-56 shrink-0 hidden md:flex flex-col gap-1 pt-4">
|
||||
{links.map(({ to, icon: Icon, label }) => (
|
||||
<NavLink
|
||||
key={to}
|
||||
to={to}
|
||||
end={to === "/dashboard"}
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors
|
||||
${isActive ? "bg-accent/20 text-white" : "text-white/50 hover:text-white hover:bg-white/5"}`
|
||||
}
|
||||
>
|
||||
<Icon size={18} />
|
||||
{label}
|
||||
</NavLink>
|
||||
))}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user