80 lines
3.9 KiB
TypeScript
80 lines
3.9 KiB
TypeScript
"use client";
|
||
|
||
import { MarkupText, MarkupPreview } from "@/components/ui/MarkupText/MarkupText";
|
||
import { MARKUP_EXAMPLES } from "@/lib/text-markup";
|
||
|
||
/**
|
||
* Демо компонент для показа возможностей системы разметки
|
||
*/
|
||
export function MarkupDemo() {
|
||
return (
|
||
<div className="space-y-6 p-6">
|
||
<div className="space-y-2">
|
||
<h1 className="text-2xl font-bold">🎨 Система разметки WitLab</h1>
|
||
<p className="text-muted-foreground">
|
||
Используйте **двойные звездочки** для выделения текста жирным шрифтом
|
||
</p>
|
||
</div>
|
||
|
||
{/* 📖 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ */}
|
||
<div className="space-y-4">
|
||
<h2 className="text-lg font-semibold">📖 Примеры использования:</h2>
|
||
|
||
{MARKUP_EXAMPLES.map((example, index) => (
|
||
<div key={index} className="space-y-2 p-4 bg-muted/20 rounded-lg border">
|
||
<div className="text-sm font-medium text-foreground">
|
||
{example.description}
|
||
</div>
|
||
|
||
{/* Исходный код */}
|
||
<div className="text-xs text-muted-foreground bg-slate-100 p-2 rounded font-mono">
|
||
{example.input}
|
||
</div>
|
||
|
||
{/* Результат */}
|
||
<div className="text-sm">
|
||
<strong>Результат:</strong>{" "}
|
||
<MarkupText>{example.input}</MarkupText>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 🎯 ИНТЕРАКТИВНОЕ ДЕМО */}
|
||
<div className="space-y-4">
|
||
<h2 className="text-lg font-semibold">🎯 Интерактивное превью:</h2>
|
||
|
||
<MarkupPreview text="Ваш **идеальный партнер** найден! Скидка **50%** только сегодня." />
|
||
|
||
<MarkupPreview text="Добро пожаловать в **WitLab**! Система анализа совместимости нового поколения." />
|
||
|
||
<MarkupPreview text="**Анализ завершен** - переходим к результатам вашего **портрета партнера**." />
|
||
</div>
|
||
|
||
{/* 💡 ИНСТРУКЦИИ */}
|
||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 space-y-2">
|
||
<h3 className="text-sm font-semibold text-blue-800">💡 Как использовать в админке:</h3>
|
||
<ul className="text-xs text-blue-700 space-y-1">
|
||
<li>1. Откройте любой экран в админке</li>
|
||
<li>2. В текстовых полях используйте **двойные звездочки** для выделения</li>
|
||
<li>3. Система автоматически покажет превью разметки</li>
|
||
<li>4. В воронке текст будет отображаться с жирным выделением</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* 🚀 ПОДДЕРЖИВАЕМЫЕ ЭЛЕМЕНТЫ */}
|
||
<div className="bg-green-50 border border-green-200 rounded-lg p-4 space-y-2">
|
||
<h3 className="text-sm font-semibold text-green-800">🚀 Где работает разметка:</h3>
|
||
<ul className="text-xs text-green-700 space-y-1">
|
||
<li>✅ Заголовки и подзаголовки всех экранов</li>
|
||
<li>✅ Описания в Info и Soulmate экранах</li>
|
||
<li>✅ Информационные сообщения в Date экранах</li>
|
||
<li>✅ Лейблы и placeholder в Form экранах</li>
|
||
<li>✅ Все текстовые поля Coupon экранов</li>
|
||
<li>✅ Любой компонент Typography с enableMarkup</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|