sfera-new/src/components/admin/ui-kit/typography-demo.tsx

"use client"

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

export function TypographyDemo() {
  return (
    <div className="space-y-6">
      {/* Заголовки */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Заголовки</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-4">
            <div>
              <h1 className="text-4xl font-bold text-white mb-2">
                Заголовок H1
              </h1>
              <p className="text-xs text-white/60 font-mono">
                text-4xl font-bold
              </p>
            </div>
            
            <div>
              <h2 className="text-3xl font-bold text-white mb-2">
                Заголовок H2
              </h2>
              <p className="text-xs text-white/60 font-mono">
                text-3xl font-bold
              </p>
            </div>
            
            <div>
              <h3 className="text-2xl font-semibold text-white mb-2">
                Заголовок H3
              </h3>
              <p className="text-xs text-white/60 font-mono">
                text-2xl font-semibold
              </p>
            </div>
            
            <div>
              <h4 className="text-xl font-semibold text-white mb-2">
                Заголовок H4
              </h4>
              <p className="text-xs text-white/60 font-mono">
                text-xl font-semibold
              </p>
            </div>
            
            <div>
              <h5 className="text-lg font-medium text-white mb-2">
                Заголовок H5
              </h5>
              <p className="text-xs text-white/60 font-mono">
                text-lg font-medium
              </p>
            </div>
            
            <div>
              <h6 className="text-base font-medium text-white mb-2">
                Заголовок H6
              </h6>
              <p className="text-xs text-white/60 font-mono">
                text-base font-medium
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Градиентные заголовки */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Градиентные заголовки</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h1 className="text-4xl font-bold text-gradient-bright mb-2">
              Яркий градиентный заголовок
            </h1>
            <p className="text-xs text-white/60 font-mono">
              text-gradient-bright
            </p>
          </div>
          
          <div>
            <h2 className="text-3xl font-bold text-gradient mb-2">
              Обычный градиентный заголовок
            </h2>
            <p className="text-xs text-white/60 font-mono">
              text-gradient
            </p>
          </div>
          
          <div>
            <h3 className="text-2xl font-semibold glow-text mb-2">
              Заголовок с свечением
            </h3>
            <p className="text-xs text-white/60 font-mono">
              glow-text
            </p>
          </div>
        </CardContent>
      </Card>

      {/* Основной текст */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Основной текст</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <p className="text-white text-base mb-2">
              Обычный текст. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
              Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
              Ut enim ad minim veniam, quis nostrud exercitation.
            </p>
            <p className="text-xs text-white/60 font-mono">
              text-white text-base
            </p>
          </div>
          
          <div>
            <p className="text-white/90 text-base mb-2">
              Текст с прозрачностью 90%. Lorem ipsum dolor sit amet, consectetur 
              adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <p className="text-xs text-white/60 font-mono">
              text-white/90
            </p>
          </div>
          
          <div>
            <p className="text-white/70 text-base mb-2">
              Текст с прозрачностью 70%. Lorem ipsum dolor sit amet, consectetur 
              adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <p className="text-xs text-white/60 font-mono">
              text-white/70
            </p>
          </div>
          
          <div>
            <p className="text-white/60 text-base mb-2">
              Вторичный текст с прозрачностью 60%. Lorem ipsum dolor sit amet, consectetur 
              adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <p className="text-xs text-white/60 font-mono">
              text-white/60
            </p>
          </div>
        </CardContent>
      </Card>

      {/* Размеры текста */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Размеры текста</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <p className="text-xs text-white mb-1">Очень мелкий текст</p>
            <p className="text-xs text-white/60 font-mono">text-xs</p>
          </div>
          
          <div>
            <p className="text-sm text-white mb-1">Мелкий текст</p>
            <p className="text-xs text-white/60 font-mono">text-sm</p>
          </div>
          
          <div>
            <p className="text-base text-white mb-1">Базовый текст</p>
            <p className="text-xs text-white/60 font-mono">text-base</p>
          </div>
          
          <div>
            <p className="text-lg text-white mb-1">Большой текст</p>
            <p className="text-xs text-white/60 font-mono">text-lg</p>
          </div>
          
          <div>
            <p className="text-xl text-white mb-1">Очень большой текст</p>
            <p className="text-xs text-white/60 font-mono">text-xl</p>
          </div>
          
          <div>
            <p className="text-2xl text-white mb-1">Огромный текст</p>
            <p className="text-xs text-white/60 font-mono">text-2xl</p>
          </div>
        </CardContent>
      </Card>

      {/* Насыщенность шрифта */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Насыщенность шрифта</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <p className="text-white font-light text-lg mb-1">Легкий шрифт</p>
            <p className="text-xs text-white/60 font-mono">font-light</p>
          </div>
          
          <div>
            <p className="text-white font-normal text-lg mb-1">Обычный шрифт</p>
            <p className="text-xs text-white/60 font-mono">font-normal</p>
          </div>
          
          <div>
            <p className="text-white font-medium text-lg mb-1">Средний шрифт</p>
            <p className="text-xs text-white/60 font-mono">font-medium</p>
          </div>
          
          <div>
            <p className="text-white font-semibold text-lg mb-1">Полужирный шрифт</p>
            <p className="text-xs text-white/60 font-mono">font-semibold</p>
          </div>
          
          <div>
            <p className="text-white font-bold text-lg mb-1">Жирный шрифт</p>
            <p className="text-xs text-white/60 font-mono">font-bold</p>
          </div>
        </CardContent>
      </Card>

      {/* Специальные стили */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Специальные стили текста</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <p className="text-white font-mono text-sm mb-1">
              Моноширинный шрифт для кода
            </p>
            <p className="text-xs text-white/60 font-mono">font-mono</p>
          </div>
          
          <div>
            <p className="text-white italic text-base mb-1">
              Курсивный текст
            </p>
            <p className="text-xs text-white/60 font-mono">italic</p>
          </div>
          
          <div>
            <p className="text-white underline text-base mb-1">
              Подчеркнутый текст
            </p>
            <p className="text-xs text-white/60 font-mono">underline</p>
          </div>
          
          <div>
            <p className="text-white line-through text-base mb-1">
              Зачеркнутый текст
            </p>
            <p className="text-xs text-white/60 font-mono">line-through</p>
          </div>
          
          <div>
            <p className="text-white uppercase text-base mb-1">
              Заглавные буквы
            </p>
            <p className="text-xs text-white/60 font-mono">uppercase</p>
          </div>
          
          <div>
            <p className="text-white lowercase text-base mb-1">
              СТРОЧНЫЕ БУКВЫ
            </p>
            <p className="text-xs text-white/60 font-mono">lowercase</p>
          </div>
          
          <div>
            <p className="text-white capitalize text-base mb-1">
              первая буква заглавная
            </p>
            <p className="text-xs text-white/60 font-mono">capitalize</p>
          </div>
        </CardContent>
      </Card>

      {/* Выравнивание текста */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Выравнивание текста</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <p className="text-white text-left text-base mb-1">
              Выравнивание по левому краю. Lorem ipsum dolor sit amet consectetur.
            </p>
            <p className="text-xs text-white/60 font-mono">text-left</p>
          </div>
          
          <div>
            <p className="text-white text-center text-base mb-1">
              Выравнивание по центру. Lorem ipsum dolor sit amet consectetur.
            </p>
            <p className="text-xs text-white/60 font-mono">text-center</p>
          </div>
          
          <div>
            <p className="text-white text-right text-base mb-1">
              Выравнивание по правому краю. Lorem ipsum dolor sit amet consectetur.
            </p>
            <p className="text-xs text-white/60 font-mono">text-right</p>
          </div>
          
          <div>
            <p className="text-white text-justify text-base mb-1">
              Выравнивание по ширине. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation.
            </p>
            <p className="text-xs text-white/60 font-mono">text-justify</p>
          </div>
        </CardContent>
      </Card>

      {/* Списки */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Списки</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Маркированный список</h4>
            <ul className="text-white space-y-1 list-disc list-inside">
              <li>Первый пункт списка</li>
              <li>Второй пункт списка</li>
              <li>Третий пункт списка с длинным текстом, который может переноситься на несколько строк</li>
              <li>Четвертый пункт</li>
            </ul>
          </div>
          
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Нумерованный список</h4>
            <ol className="text-white space-y-1 list-decimal list-inside">
              <li>Первый шаг процесса</li>
              <li>Второй шаг процесса</li>
              <li>Третий шаг с подробным описанием того, что нужно сделать</li>
              <li>Завершающий шаг</li>
            </ol>
          </div>
        </CardContent>
      </Card>

      {/* Цитаты и код */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Цитаты и код</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Цитата</h4>
            <blockquote className="text-white/80 text-lg italic border-l-4 border-primary pl-4 py-2">
              &quot;Дизайн - это не то, как вещь выглядит. Дизайн - это то, как вещь работает.&quot;
              <footer className="text-white/60 text-sm mt-2 not-italic">
                — Стив Джобс
              </footer>
            </blockquote>
          </div>
          
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Инлайн код</h4>
            <p className="text-white text-base">
              Используйте класс <code className="bg-white/10 text-white px-1.5 py-0.5 rounded text-sm font-mono">glass-card</code> для создания карточек с эффектом стекла.
            </p>
          </div>
          
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Блок кода</h4>
            <pre className="bg-white/5 text-white p-4 rounded-lg text-sm font-mono overflow-x-auto">
{`<Card className="glass-card border-white/10">
  <CardHeader>
    <CardTitle className="text-white">
      Заголовок карточки
    </CardTitle>
  </CardHeader>
  <CardContent>
    Содержимое карточки
  </CardContent>
</Card>`}
            </pre>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}