pastilhas
e3e790fd2b
ColorPicker's one string was placeholder="Font Weight" on an <input type="color">, where a placeholder is both wrong text and inert — browsers do not render one on a colour input. Keyed it as ui.colorPicker.placeholder and moved it to the hex text field beside it, which is a real text input and had none. Translating it in place would have created a key guaranteed never to be seen. Both files still have no importers; CommandBlock stays because commands the user might run need a copy button by convention.
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { useState } from 'react';
|
|
import { Copy, Check, Play } from 'lucide-react';
|
|
import { copyToClipboard } from 'helpers/clipboard';
|
|
import { useTranslation } from '@/components/locales';
|
|
|
|
type CommandBlockProps = {
|
|
label?: string;
|
|
command: string;
|
|
onRun?: (command: string) => void;
|
|
};
|
|
|
|
export const CommandBlock = ({ label, command, onRun }: CommandBlockProps) => {
|
|
const { t } = useTranslation();
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const copy = () => {
|
|
copyToClipboard(command);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 1500);
|
|
};
|
|
|
|
return (
|
|
<div className="inline-flex flex-col gap-1">
|
|
{label && <span className="text-xs text-duck-dark/50">{label}</span>}
|
|
<div className="inline-flex items-center gap-1 bg-[#1a1a2e] rounded-lg ps-3 pe-1 py-1.5">
|
|
<code className="text-sm text-[#e0e0e0] font-mono whitespace-nowrap">{command}</code>
|
|
{onRun && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onRun(command)}
|
|
className="shrink-0 p-1.5 rounded hover:bg-white/10 cursor-pointer transition-colors"
|
|
title={t('commandBlock.run')}
|
|
>
|
|
<Play className="h-3.5 w-3.5 text-duck-teal" />
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={copy}
|
|
className="shrink-0 p-1.5 rounded hover:bg-white/10 cursor-pointer transition-colors"
|
|
title={t('commandBlock.copy')}
|
|
>
|
|
{copied ? <Check className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5 text-white/40" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|