31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { cn } from "@root/lib/utils"; // Импортируем утилиту для объединения классов
|
|
|
|
type Props = {
|
|
label: string;
|
|
children?: React.ReactNode;
|
|
className?: string; // Пропс для дополнительной стилизации
|
|
};
|
|
|
|
export const BaseFieldset: React.FC<Props> = (props) => {
|
|
const { label, children, className } = props;
|
|
|
|
return (
|
|
// 1. Используем тег fieldset для семантики. Он позиционирован как relative.
|
|
<fieldset
|
|
className={cn(
|
|
"relative rounded-md border border-border p-4", // Базовые стили
|
|
className, // Дополнительные классы от пользователя
|
|
)}
|
|
>
|
|
{/* 2. Используем legend. Он абсолютно спозиционирован относительно fieldset. */}
|
|
<legend className="absolute -top-2.5 left-3 bg-background px-1 text-sm text-muted-foreground">
|
|
{label}
|
|
</legend>
|
|
|
|
{/* 3. Здесь будет содержимое филдсета */}
|
|
{children}
|
|
</fieldset>
|
|
);
|
|
};
|