feat: Navbar, Sidebar, Footer layout components

This commit is contained in:
2026-05-20 12:19:14 +03:00
parent 3433cd60fe
commit 51f459c230
3 changed files with 98 additions and 0 deletions
+22
View File
@@ -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>
);
}
+44
View File
@@ -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>
);
}
+32
View File
@@ -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>
);
}