39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import clsx from "clsx";
|
|
|
|
import { CopyButton } from "./CopyButton";
|
|
|
|
type InfoRowProps = {
|
|
label: string;
|
|
children: ReactNode;
|
|
copyValue?: string | number | null;
|
|
copyMessage?: string;
|
|
className?: string;
|
|
};
|
|
|
|
export const InfoRow = ({ label, children, copyValue, copyMessage, className }: InfoRowProps) => {
|
|
const canCopy = copyValue !== null && copyValue !== undefined && `${copyValue}`.length > 0;
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"flex flex-col gap-1 overflow-hidden rounded-lg border border-slate-800 bg-slate-950/60 p-3",
|
|
className,
|
|
)}
|
|
>
|
|
<span className="text-xs uppercase tracking-wide text-slate-500">{label}</span>
|
|
<div className="flex items-start gap-2 text-sm text-slate-100">
|
|
<div className="min-w-0 break-words text-left">{children}</div>
|
|
{canCopy ? (
|
|
<CopyButton
|
|
value={copyValue as string | number}
|
|
aria-label={`Скопировать значение «${label}»`}
|
|
successMessage={copyMessage}
|
|
className="mt-0.5"
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|