Добавлены модели и функциональность для управления администраторами, включая авторизацию через JWT, запросы и мутации для получения информации об администраторах и управления пользователями. Обновлены стили и логика работы с токенами в Apollo Client. Улучшен интерфейс взаимодействия с пользователем.
This commit is contained in:
Bivekich
390
src/components/admin/ui-kit/typography-demo.tsx
Normal file
390
src/components/admin/ui-kit/typography-demo.tsx
Normal file
@ -0,0 +1,390 @@
|
||||
"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">
|
||||
"Дизайн - это не то, как вещь выглядит. Дизайн - это то, как вещь работает."
|
||||
<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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user