Sacha WeatherstoneandGitHub
e59fe138f1
* WIP Layout Refactor * New Connection Dialog * WIP form overhaul * Fix remaining config pages
39 lines
947 B
TypeScript
39 lines
947 B
TypeScript
import { AlertCircleIcon } from "lucide-react";
|
|
import type { ReactNode } from "react";
|
|
|
|
export interface InfoWrapperProps {
|
|
label?: string;
|
|
description?: string;
|
|
error?: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const InfoWrapper = ({
|
|
label,
|
|
description,
|
|
error,
|
|
children
|
|
}: InfoWrapperProps): JSX.Element => {
|
|
return (
|
|
<div className="w-full">
|
|
{/* Label */}
|
|
{label && (
|
|
<label className="block text-sm font-medium text-textPrimary">
|
|
{label}
|
|
</label>
|
|
)}
|
|
{/* */}
|
|
{children}
|
|
{error && (
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
|
<AlertCircleIcon size={16} className="text-red-500" />
|
|
</div>
|
|
)}
|
|
{description && (
|
|
<p className="mt-2 text-sm text-textSecondary">{description}</p>
|
|
)}
|
|
{error && <p className="mt-2 text-sm text-red-600">{error}</p>}
|
|
</div>
|
|
);
|
|
};
|