You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.7 KiB
60 lines
1.7 KiB
"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> |
|
); |
|
}
|
|
|