42 lines
1.7 KiB
TypeScript
42 lines
1.7 KiB
TypeScript
import * as React from "react";
|
|
import { cn } from "@root/lib/utils";
|
|
|
|
// Определяем пропсы: принимает все атрибуты для div и булевый пропс `selected`
|
|
export interface ProfileBoxProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
selected?: boolean;
|
|
}
|
|
|
|
export const ProfileBox = React.forwardRef<HTMLDivElement, ProfileBoxProps>(
|
|
({ className, selected, children, ...props }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
// Устанавливаем data-атрибут для стилизации выбранного состояния
|
|
data-selected={selected}
|
|
className={cn(
|
|
// --- Базовые стили ---
|
|
"relative block w-full cursor-pointer rounded-lg bg-card p-4 text-left text-muted-foreground transition-all duration-200",
|
|
|
|
// --- Эффект рамки ---
|
|
// По умолчанию рамка есть, но она прозрачная, чтобы резервировать место
|
|
"border-l-4 border-transparent",
|
|
// При выборе (`data-selected=true`) рамка окрашивается в основной цвет
|
|
"data-[selected=true]:border-primary",
|
|
|
|
// --- Эффект смены цвета текста ---
|
|
// При выборе весь текст внутри становится более контрастным
|
|
"data-[selected=true]:text-card-foreground",
|
|
|
|
// --- Дополнительные классы от пользователя ---
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
ProfileBox.displayName = "ProfileBox";
|