Структура и компоненты проекта

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
// Глобальное подключение CSS-файла: можно использовать для сброса базовых стилей,
// настройки типографики и т.д.
// Для стилизации компонентов лучше использовать локализованные стили (далее рассмотрим).
import "./App.css";

function App() {
  // Локальное состояние (число кликов). React повторно вызовет компонент при setCount().
  // Для его создания используется хук useState — подробнее см.
  // https://react.dev/reference/react/useState
  const [count, setCount] = useState(0);

  return (
    // Каждый JSX-элемент может быть только с ОДНИМ корневым узлом.
    // Фрагмент <></> (https://react.dev/reference/react/Fragment) позволяет
    // сгруппировать JSX-код, не создавая лишнего DOM-узла.
    <>
      {/* Статические ассеты в Vite импортируются как URL */}
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>

      <h1>Vite + React</h1>

      <div className="card">
        {/* Обновление счётчика на странице безопасным способом (подробнее ниже) */}
        <button onClick={() => setCount((prev) => prev + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>

      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

/* Эти стили принадлежат только компоненту Button: одинаковые имена в других
   компонентах не пересекутся, потому что сборка превратит их в уникальные. */

.button {
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

/* Варианты оформления: переключаются пропом variant */
.primary { background: var(--color-primary, #3b82f6); color: #fff; }
.secondary { background: #eee; color: #222; }

/* Размеры: переключаются пропом size */
.sm { font-size: 14px; }
.md { font-size: 16px; }
.lg { font-size: 18px; }

/* Отключаем события кликов по «выключенной» кнопке */
.disabled {
  opacity: .6;
  pointer-events: none;
}

import { type ReactNode } from "react";
// Подключаем ранее упомянутую библиотеку clsx
import clsx from "clsx";
// Импорт CSS-модуля даёт объект "s" со свойствами-классами (s.button, s.primary, ...).
import s from "./Button.module.css";

/**
 * Допустимые значения визуального варианта кнопки.
 * Здесь используется операция объединения (union):
 * https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html
 */
type ButtonVariant = "primary" | "secondary";
/** Допустимые размеры кнопки. */
type ButtonSize = "sm" | "md" | "lg";

/**
 * Пропсы кнопки.
 * - children: контент внутри (текст, иконка и пр.)
 * - variant/size: опциональные, с умолчаниями ("primary", "md")
 * - disabled: делает кнопку неактивной
 * - className: позволяет доклеить свои классы (например, от родителя)
 * - onClick: опциональный обработчик клика
 *
 * Опциональность достигается за счёт указанного рядом с пропсом вопросительного знака.
 */
interface ButtonProps {
  children: ReactNode;
  variant?: ButtonVariant;
  size?: ButtonSize;
  disabled?: boolean;
  className?: string;
  onClick?: () => void; // при желании можно сузить до React.MouseEventHandler<HTMLButtonElement>
}

/**
 * Универсальная кнопка.
 * При помощи знака `=` сразу указываем значения «по умолчанию» для части параметров.
 */
export function Button({
  children,
  variant = "primary", // дефолтный вариант
  size = "md",         // дефолтный размер
  disabled = false,    // по умолчанию кнопка активна
  className,
  onClick,
}: ButtonProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      className={clsx(
        s.button,
        s[variant],         // s.primary или s.secondary
        s[size],            // s.sm, s.md или s.lg
        disabled && s.disabled,
        className           // внешние пользовательские классы
      )}
    >
      {children}
    </button>
  );
}

export * from "./Button";

import { useState } from "react";
// Используем ранее настроенный алиас @ → src
import { Button } from "@/components/Button";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <main style={{ display: "grid", gap: 16 }}>
      <h1>Vite + React</h1>

      {/* Состояния по умолчанию: variant="primary", size="md" */}
      <Button onClick={() => setCount((c) => c + 1)}>
        Кликнули {count} раз
      </Button>

      {/* Передаём явные значения и включаем блокировку */}
      <Button variant="secondary" size="lg" disabled>
        Большая неактивная
      </Button>
    </main>
  );
}

export default App;

npm i @mui/icons-material @mui/material @emotion/react @emotion/styled

import { type SvgIconComponent } from "@mui/icons-material";

// Базовая информация, которую храним о каждой из навигационных вкладок
export interface NavItem {
  id: string;
  label: string;
  icon?: SvgIconComponent;
  href?: string;
}

// Превью аватарки пользователя
export interface UserBrief {
  name: string;
  avatarUrl?: string;
}

import type { NavItem } from "./header.types";
import { ListAltOutlined, EventNoteOutlined, SettingsOutlined } from "@mui/icons-material";

export const DEFAULT_NAV: NavItem[] = [
  { id: "catalog",  label: "Каталог аудиторий",    icon: ListAltOutlined },
  { id: "bookings", label: "Управление бронированием", icon: EventNoteOutlined },
  { id: "settings", label: "Настройки",            icon: SettingsOutlined },
];

export function getInitials(name: string | undefined) {
  if (!name) return "NN";
  const [a = "", b = ""] = name.trim().split(/\s+/);
  return (a[0] ?? "").concat(b[0] ?? "").toUpperCase();
}

.header   { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #eef0f3; z-index: 10; }
.row      { display: flex; align-items: center; gap: 16px; padding: 10px 16px; max-width: 1200px; margin: 0 auto; }

.brand    { display: flex; align-items: center; gap: 10px; color: #0f172a; font-weight: 700; }
.logoBox  { width: 32px; height: 32px; border-radius: 10px; background: #1d4ed8; color: #fff; display: grid; place-items: center; }
.logoIc   { width: 18px; height: 18px; }
.app      { font-size: 18px; }

.nav      { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.tab      { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: none; background: transparent; color: #334155; cursor: pointer; }
.tab:focus-visible { outline: 3px solid rgba(99,102,241,.25); outline-offset: 2px; border-radius: 12px; }
.tabActive { background: #1d4ed8; color: #fff; }
.tabIc    { width: 16px; height: 16px; }

.spacer   { flex: 1; }
.right    { display: flex; align-items: center; gap: 12px; }

.iconBtn  { background: transparent; border: none; padding: 6px; border-radius: 10px; color: #334155; cursor: pointer; }
.iconBtn:active { transform: translateY(1px); }

.avatar   { width: 32px; height: 32px; border-radius: 999px; background: #cdd5df; display: grid; place-items: center; color: #334155; font-weight: 700; }
.userNm   { font-size: 14px; color: #334155; }

import clsx from "clsx";
import s from "./Header.module.css";
import type { NavItem, UserBrief } from "./header.types";
import { DEFAULT_NAV } from "./header.config";
import { getInitials } from "./header.utils";
import { DomainRounded, NotificationsNoneOutlined } from "@mui/icons-material";

// Публичный API шапки.
// - navItems: массив вкладок; если не передан — берём DEFAULT_NAV
// - activeNavId: id активной вкладки (подсветка + aria-current)
// - onNavigate: колбэк при клике по вкладке
// - user: данные пользователя (для аватара/инициалов)
// - onBellClick: клик по колокольчику (уведомления)
export interface HeaderProps {
  navItems?: NavItem[];
  activeNavId: string;
  onNavigate: (id: string) => void;
  user?: UserBrief;
  onBellClick?: () => void;
}

export function Header({
  navItems = DEFAULT_NAV,
  activeNavId,
  onNavigate,
  user,
  onBellClick,
}: HeaderProps) {
  return (
    <header className={s.header}>
      <div className={s.row}>

        {/* Левая зона: логотип + название приложения */}
        <div className={s.brand}>
          <div className={s.logoBox} aria-hidden>
            <DomainRounded className={s.logoIc} />
          </div>
          <div className={s.app}>Room Booking</div>
        </div>

        {/* Центральная зона: навигация по вкладкам.
            aria-label даёт подпись навигации для скринридеров. */}
        <nav className={s.nav} aria-label="Основная навигация">
          {navItems.map((item) => {
            const active = item.id === activeNavId;

            return (
              // Кнопки вместо <a>: SPA-навигация, состоянием управляет родитель.
              // При желании можно заменить на <NavLink/>
              <button
                key={item.id}
                type="button"
                className={clsx(s.tab, active && s.tabActive)}
                onClick={() => onNavigate(item.id)}
                aria-current={active ? "page" : undefined}
                title={item.label}
              >
                {item.icon && <item.icon className={s.tabIc} />}
                <span>{item.label}</span>
              </button>
            );
          })}
        </nav>

        <div className={s.spacer} />

        {/* Правая зона: действия и пользователь */}
        <div className={s.right}>
          <button
            type="button"
            className={s.iconBtn}
            onClick={onBellClick}
            aria-label="Уведомления"
            title="Уведомления"
          >
            <NotificationsNoneOutlined />
          </button>

          {/* Аватар пользователя.
              Если есть avatarUrl — показываем картинку;
              иначе — инициалы, рассчитанные утилитой getInitials(name). */}
          <div className={s.avatar} title={user?.name || "Гость"}>
            {user?.avatarUrl ? (
              <img
                src={user.avatarUrl}
                alt=""
                width={32}
                height={32}
                style={{ borderRadius: "999px" }}
              />
            ) : (
              <span>{getInitials(user?.name)}</span>
            )}
          </div>
        </div>
      </div>
    </header>
  );
}

export * from "./Header";
export * from "./header.types";

import { useState } from "react";
import { Header } from "@/components/Header";
import "./App.css";

function App() {
  const [active, setActive] = useState("catalog");
  return (
    <>
      {/* Передаём в шапку базовые параметры для её настройки */}
      <Header
        activeNavId={active}
        onNavigate={setActive}
        user={{ name: "Мария Петрова" }}
        onBellClick={() => console.log("bell")}
      />
      <main style={{ padding: 16 }}>Контент вкладки: {active}</main>
    </>
  );
}

export default App;