Vercel/src/components/EnvVar.tsx
2025-02-14 20:54:18 -06:00

36 lines
847 B
TypeScript

import clsx from 'clsx/lite';
import CopyButton from './CopyButton';
export default function EnvVar({
variable,
value,
includeCopyButton = true,
}: {
variable: string,
value?: string,
includeCopyButton?: boolean,
}) {
return (
<div
className={clsx(
'inline-flex',
'overflow-x-auto overflow-y-hidden',
)}
>
<span className="inline-flex items-center gap-1">
<span className={clsx(
'px-1.5 rounded-md',
'text-[11px] font-medium tracking-wider',
'text-gray-600 dark:text-gray-300',
'bg-gray-100 dark:bg-gray-800',
'whitespace-nowrap',
)}>
{variable}{value && ` = ${value}`}
</span>
{includeCopyButton &&
<CopyButton label={variable} text={variable} subtle />}
</span>
</div>
);
}