admins
b6d555ab3b
Inside-LMS toolbox for registered students: callout-CSS, YAML-frontmatter, theme CSS-variables, Style Settings generators. Auth inherited from (student) route group; no public surface, no email gate. - Pure generators in src/lib/tools/* with Vitest (33 tests) - Shared YAML-safe scalar quoter (_shared/yaml.ts) used by frontmatter + style-settings: unquoted user input was silently breaking YAML (tags '#x' -> null, color default '#7C3AED' -> null, 'a: b' -> parse error) - hex validation in callout (no NaN), date input constrained, clipboard + analytics calls guarded - Prisma ToolUsage model + migration; logToolUsage Server Action (auth-first, 10-min dedup window per user/tool) - Tool index /tools + ToolCard (explicit lucide map, no import *) + header link Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
"use client";
|
|
import { useMemo, useState } from "react";
|
|
import { buildCalloutCss } from "@/lib/tools/callout";
|
|
import { CodeOutput } from "@/components/tools/CodeOutput";
|
|
|
|
export function CalloutForm() {
|
|
const [id, setId] = useState("idea");
|
|
const [title, setTitle] = useState("Идея");
|
|
const [color, setColor] = useState("#7C3AED");
|
|
const [icon, setIcon] = useState("lightbulb");
|
|
|
|
const result = useMemo(() => {
|
|
try { return buildCalloutCss({ id, title, color, icon }); }
|
|
catch { return null; }
|
|
}, [id, title, color, icon]);
|
|
|
|
const field = "w-full p-2 text-sm";
|
|
const fieldStyle = { border: "1px solid var(--border)", borderRadius: "2px", backgroundColor: "var(--background)", color: "var(--foreground)" } as const;
|
|
|
|
return (
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<div className="flex flex-col gap-3">
|
|
<label className="text-sm">Тип (id)
|
|
<input className={field} style={fieldStyle} value={id} onChange={(e) => setId(e.target.value)} />
|
|
</label>
|
|
<label className="text-sm">Заголовок
|
|
<input className={field} style={fieldStyle} value={title} onChange={(e) => setTitle(e.target.value)} />
|
|
</label>
|
|
<label className="text-sm">Цвет (HEX)
|
|
<input className={field} style={fieldStyle} value={color} onChange={(e) => setColor(e.target.value)} />
|
|
</label>
|
|
<label className="text-sm">Иконка (lucide-id)
|
|
<input className={field} style={fieldStyle} value={icon} onChange={(e) => setIcon(e.target.value)} />
|
|
</label>
|
|
</div>
|
|
<div className="flex flex-col gap-4">
|
|
{result ? (
|
|
<>
|
|
<CodeOutput code={result.css} tool="callout" label="CSS-snippet" />
|
|
<CodeOutput code={result.markdown} tool="callout" label="Пример разметки" />
|
|
</>
|
|
) : (
|
|
<p className="text-sm" style={{ color: "var(--muted-foreground)" }}>
|
|
Проверь поля: id — латиница и цифры (напр. <code>idea</code>), цвет — корректный HEX (напр. <code>#7C3AED</code>).
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|