2022-06-15 07:33:20 +02:00

33 lines
768 B
TypeScript

import { cIf, cJoin } from "helpers/className";
import { Immutable } from "helpers/types";
interface Props {
label: string | null | undefined;
input: JSX.Element;
disabled?: boolean;
}
export function WithLabel(props: Immutable<Props>): JSX.Element {
const { label, input, disabled } = props;
return (
<div
className={cJoin(
"flex flex-row place-content-between place-items-center gap-2",
cIf(disabled, "text-dark brightness-150 contrast-75 grayscale")
)}
>
{label && (
<p
className={cJoin(
"text-left",
cIf(label.length < 10, "flex-shrink-0")
)}
>
{label}:
</p>
)}
{input}
</div>
);
}