feat: authorization

services/frontend/src/components/layout/header.tsx

@@ -1,71 +1,77 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { DataRush } from "@/components/ui/icons/datarush";
 import { ChevronDown, User, Settings, BarChart2, LogOut } from "lucide-react";
 import { Link } from "react-router";
-import { 
-  Sheet, 
-  SheetContent, 
-  SheetHeader, 
-  SheetTitle, 
-  SheetClose 
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetClose,
 } from "@/components/ui/sheet";
+import { useUserStore } from "@/shared/stores/user";
 
 const Header = () => {
+  const user = useUserStore((state) => state.user);
   const [isProfileOpen, setIsProfileOpen] = useState(false);
 
   return (
-    <header className="bg-card sticky top-0 z-30 flex h-[72px] w-full items-center justify-center">
+    <header className="bg-card sticky top-0 z-30 flex h-[72px] w-full items-center justify-center px-4 sm:px-6">
       <div className="flex w-full max-w-5xl items-center justify-between">
         <Link to="/">
           <DataRush />
         </Link>
-        <div 
-          className="flex items-center gap-1 cursor-pointer hover:opacity-80 transition-opacity px-2 py-1 rounded-md"
+        <div
+          className="flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 transition-opacity hover:opacity-80"
           onClick={() => setIsProfileOpen(true)}
         >
-          <span className="text-lg font-semibold font-hse-sans">itqdev</span>
+          <span className="font-hse-sans text-lg font-semibold">
+            {user?.username}
+          </span>
           <ChevronDown size={20} />
         </div>
       </div>
 
       <Sheet open={isProfileOpen} onOpenChange={setIsProfileOpen}>
-        <SheetContent className="w-[300px] sm:w-[350px] p-0">
-          <SheetHeader className="border-b py-4 px-5">
-            <SheetTitle className="font-hse-sans text-lg font-medium">Профиль</SheetTitle>
+        <SheetContent className="w-[300px] p-0 sm:w-[350px]">
+          <SheetHeader className="border-b px-5 py-4">
+            <SheetTitle className="font-hse-sans text-lg font-medium">
+              Профиль
+            </SheetTitle>
           </SheetHeader>
-          
-          <div className="py-4 px-2">
-            <ProfileOption 
-              icon={<User size={18} />} 
-              label="Ваш профиль" 
+
+          <div className="px-2 py-4">
+            <ProfileOption
+              icon={<User size={18} />}
+              label="Ваш профиль"
               onClick={() => {
                 setIsProfileOpen(false);
-              }} 
+              }}
             />
-            
-            <ProfileOption 
-              icon={<Settings size={18} />} 
-              label="Настройки" 
+
+            <ProfileOption
+              icon={<Settings size={18} />}
+              label="Настройки"
               onClick={() => {
                 setIsProfileOpen(false);
-              }} 
+              }}
             />
-            
-            <ProfileOption 
-              icon={<BarChart2 size={18} />} 
-              label="Статистика" 
+
+            <ProfileOption
+              icon={<BarChart2 size={18} />}
+              label="Статистика"
               onClick={() => {
                 setIsProfileOpen(false);
-              }} 
+              }}
             />
-            
-            <div className="border-t mt-2 pt-2">
-              <ProfileOption 
-                icon={<LogOut size={18} />} 
-                label="Выйти" 
+
+            <div className="mt-2 border-t pt-2">
+              <ProfileOption
+                icon={<LogOut size={18} />}
+                label="Выйти"
                 onClick={() => {
                   setIsProfileOpen(false);
-                }} 
+                }}
               />
             </div>
           </div>
@@ -82,11 +88,16 @@ interface ProfileOptionProps {
   className?: string;
 }
 
-const ProfileOption: React.FC<ProfileOptionProps> = ({ icon, label, onClick, className }) => {
+const ProfileOption: React.FC<ProfileOptionProps> = ({
+  icon,
+  label,
+  onClick,
+  className,
+}) => {
   return (
     <SheetClose asChild>
-      <button 
-        className={`flex items-center gap-3 w-full px-3 py-2.5 rounded-md text-left transition-colors hover:bg-gray-100 ${className || ''}`}
+      <button
+        className={`flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left transition-colors hover:bg-gray-100 ${className || ""}`}
         onClick={onClick}
       >
         <span className="text-gray-600">{icon}</span>
@@ -96,4 +107,4 @@ const ProfileOption: React.FC<ProfileOptionProps> = ({ icon, label, onClick, cla
   );
 };
 
-export { Header };
+export { Header };