admin/src/pages/posts/PostsLayout.tsx - master - guselnikov/inst

admin/src/pages/posts/PostsLayout.tsx

53 строки2 KB

Viktor Guselnikov

fix: API ошибки pipeline и магазин шаблонов

27 июл 2026, 10:33

27 июл 2026, 10:3345f1ea0

import { NavLink, Outlet } from 'react-router-dom';
import {
  Calendar,
  Grid3x3,
  ImagePlus,
  Layers,
  LayoutTemplate,
  Sparkles,
  Store,
} from 'lucide-react';
import ws from '../../styles/workspace.module.css';
import styles from './PostsLayout.module.css';

const tabs = [
  { to: '/posts/templates', label: 'Шаблоны', icon: LayoutTemplate, end: false },
  { to: '/posts/shop', label: 'Магазин', icon: Store, end: true },
  { to: '/posts/create', label: 'Создать', icon: Sparkles, end: true },
  { to: '/posts/upload', label: 'Загрузка', icon: ImagePlus, end: true },
  { to: '/posts/grid', label: 'Сетка', icon: Grid3x3, end: true },
  { to: '/posts/calendar', label: 'Календарь', icon: Calendar, end: true },
  { to: '/posts/queue', label: 'Очередь', icon: Layers, end: true },
] as const;

export function PostsLayout() {
  return (
    <div className={ws.page}>
      <header className={styles.header}>
        <div>
          <h1 className={ws.pageTitle}>Посты</h1>
          <p className={ws.pageSubtitle}>
            Шаблоны, конструктор, загрузка медиа и планирование публикаций
          </p>
        </div>
        <nav className={ws.tabs} aria-label="Разделы постов">
          {tabs.map(({ to, label, icon: Icon, end }) => (
            <NavLink
              key={to}
              to={to}
              end={end}
              className={({ isActive }) =>
                [ws.tab, isActive ? ws.tabActive : ''].filter(Boolean).join(' ')
              }
            >
              <Icon size={14} style={{ marginRight: 6, verticalAlign: -2 }} aria-hidden />
              {label}
            </NavLink>
          ))}
        </nav>
      </header>
      <Outlet />
    </div>
  );
}