AR 15 M4
0855892643
- components/ui/Button.tsx — компонент Button (primary/secondary/ghost/danger, sm/md/lg, loading/disabled) - components/ui/CodeCopy.tsx — компонент копирования кода (clipboard API) - components/ui/Toggle.tsx — тумблер (client component, bb-toggle-track/thumb) - globals.css — CSS-классы: bb-btn, bb-input/textarea/select, bb-checkbox/radio, bb-toggle, @keyframes bb-spin - app/components/buttons/page.tsx — страница «Кнопки» (варианты, размеры, состояния, code copy, LLM-блок) - app/components/forms/page.tsx — страница «Форм-контролы» (Input/Textarea/Select/Checkbox/Radio/Toggle, LLM-блок) - foundation/logo/page.tsx — добавлен LLM-блок v1.0 - Sidebar: убраны «скоро» с Кнопок и Форм-контролов, версия Sprint 3 · v0.3.0 - docs/LLM_CONTEXT.md → версия 3.0, добавлена секция 9a с компонентами Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
export function CodeCopy({ code, lang = "jsx" }: { code: string; lang?: string }) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
return (
|
|
<div style={{ borderRadius: 8, overflow: "hidden", border: "1px solid var(--bb-border)" }}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
background: "var(--bb-sidebar-bg)",
|
|
padding: "6px 12px",
|
|
borderBottom: "1px solid var(--bb-border)",
|
|
}}
|
|
>
|
|
<span style={{ fontSize: 11, color: "var(--bb-text-muted)", fontFamily: "var(--font-mono)" }}>
|
|
{lang}
|
|
</span>
|
|
<button
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(code);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}}
|
|
style={{
|
|
fontSize: 12,
|
|
background: copied ? "#d1fae5" : "var(--brand-053m)",
|
|
color: copied ? "#065f46" : "#fff",
|
|
border: "none",
|
|
borderRadius: 4,
|
|
padding: "3px 10px",
|
|
cursor: "pointer",
|
|
fontWeight: 500,
|
|
fontFamily: "var(--font-web)",
|
|
}}
|
|
>
|
|
{copied ? "✓ Скопировано" : "Скопировать"}
|
|
</button>
|
|
</div>
|
|
<pre
|
|
style={{
|
|
margin: 0,
|
|
padding: "12px 16px",
|
|
overflowX: "auto",
|
|
fontSize: 12,
|
|
fontFamily: "var(--font-mono)",
|
|
color: "var(--bb-text-muted)",
|
|
background: "#fff",
|
|
lineHeight: 1.6,
|
|
}}
|
|
>
|
|
<code>{code}</code>
|
|
</pre>
|
|
</div>
|
|
);
|
|
}
|