feat: add layout
ci-front / build (push) Successful in 2m9s

This commit is contained in:
2026-04-04 03:07:45 +03:00
parent 691e1fced5
commit 57b43da2e3
7 changed files with 499 additions and 89 deletions
+10 -83
View File
@@ -1,90 +1,17 @@
import { useAuthStore } from "@/modules/auth/store/useAuthStore";
import { ThemeToggle } from "@/modules/theme-bw/ui/ThemeToggle";
import React from "react";
import { Outlet, useNavigate } from "react-router-dom";
import { Navigate, Outlet } from "react-router-dom";
import { Layout } from "@/app/providers/layout/layout";
interface DefaultLayoutProps {
children?: React.ReactNode;
}
export const DefaultLayout = () => {
const { token } = useAuthStore();
export const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
const { user, logout } = useAuthStore();
const navigate = useNavigate();
const handleLogout = () => {
logout();
navigate("/auth");
};
if (!token) {
return <Navigate to="/auth" replace />;
}
return (
<div className="min-h-screen flex flex-col" style={{ backgroundColor: "var(--bg-primary)", color: "var(--text-primary)" }}>
{/* Header */}
<header
className="border-b sticky top-0 z-50"
style={{
backgroundColor: "var(--header-bg)",
borderColor: "var(--border)",
}}
>
<div className="container mx-auto px-4 py-3">
<div className="flex justify-between items-center">
{/* Logo */}
<div
className="text-xl font-bold cursor-pointer hover:opacity-80 transition-opacity"
style={{ color: "var(--text-primary)" }}
onClick={() => navigate("/")}
>
HellreigN
</div>
{/* Right side */}
<div className="flex items-center gap-3">
<ThemeToggle />
{user && (
<div className="flex items-center gap-3">
<span className="text-sm" style={{ color: "var(--text-secondary)" }}>
{user.firstName} {user.lastName}
</span>
<button
onClick={handleLogout}
className="px-3 py-1.5 text-sm rounded-lg transition-colors font-medium"
style={{
backgroundColor: "var(--button-danger)",
color: "var(--button-danger-text)",
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = "var(--button-danger-hover)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = "var(--button-danger)";
}}
>
Выйти
</button>
</div>
)}
</div>
</div>
</div>
</header>
{/* Main content */}
<main className="flex-1">{children || <Outlet />}</main>
{/* Footer */}
<footer
className="border-t py-4 mt-auto"
style={{
backgroundColor: "var(--bg-secondary)",
borderColor: "var(--border)",
}}
>
<div className="container mx-auto px-4">
<p className="text-center text-sm" style={{ color: "var(--text-muted)" }}>
© 2026 HellreigN. Все права защищены.
</p>
</div>
</footer>
</div>
<Layout>
<Outlet />
</Layout>
);
};