mirror of https://github.com/jetkvm/kvm.git
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import React from "react";
|
|
|
|
import { cx } from "@/cva.config";
|
|
|
|
interface Props {
|
|
label: string | React.ReactNode;
|
|
id?: string;
|
|
as?: "label" | "span";
|
|
description?: string | React.ReactNode | null;
|
|
disabled?: boolean;
|
|
}
|
|
export default function FieldLabel({ label, id, as = "label", description, disabled }: Props) {
|
|
if (as === "label") {
|
|
return (
|
|
<label
|
|
htmlFor={id}
|
|
className={cx(
|
|
"flex flex-col text-left font-display text-[13px] leading-snug font-semibold text-black select-none dark:text-white",
|
|
disabled && "opacity-50",
|
|
)}
|
|
>
|
|
{label}
|
|
{description && (
|
|
<span className="mb-0.5 text-[13px] font-normal text-slate-600 dark:text-slate-400">
|
|
{description}
|
|
</span>
|
|
)}
|
|
</label>
|
|
);
|
|
} else if (as === "span") {
|
|
return (
|
|
<div className="flex flex-col select-none">
|
|
<span className="font-display text-[13px] leading-snug font-semibold text-black dark:text-white">
|
|
{label}
|
|
</span>
|
|
{description && (
|
|
<span className="mb-0.5 text-[13px] font-normal text-slate-600 dark:text-slate-400">
|
|
{description}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
} else {
|
|
return <></>;
|
|
}
|
|
}
|