adilallo
105 lines
3.5 KiB
TypeScript
105 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import Tag from "../../utility/Tag";
|
|
import type { SelectionViewProps } from "./Selection.types";
|
|
|
|
function InfoIcon() {
|
|
return (
|
|
<span
|
|
className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent font-inter text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
|
|
aria-hidden
|
|
>
|
|
?
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function SelectionTag({
|
|
recommended,
|
|
selected,
|
|
}: {
|
|
recommended: boolean;
|
|
selected: boolean;
|
|
}) {
|
|
if (selected) return <Tag variant="selected" />;
|
|
if (recommended) return <Tag variant="recommended" />;
|
|
return null;
|
|
}
|
|
|
|
export function SelectionView({
|
|
label,
|
|
supportText,
|
|
recommended,
|
|
selected,
|
|
orientation,
|
|
showInfoIcon,
|
|
id: selectionId,
|
|
className,
|
|
onClick,
|
|
onKeyDown,
|
|
}: SelectionViewProps) {
|
|
const borderClass = "border border-[var(--color-border-default-primary)]";
|
|
const selectedBorder = selected
|
|
? "outline outline-2 outline-dashed outline-black outline-offset-[-2px]"
|
|
: "";
|
|
|
|
// Figma: "Card / CardSelection" vertical stack — node `16775:28762` (dev).
|
|
// Prop `orientation="horizontal"` is this stacked layout (historical naming).
|
|
if (orientation === "horizontal") {
|
|
const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] px-4 py-3 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
|
|
|
|
return (
|
|
<div
|
|
{...(selectionId ? { "data-card-id": selectionId } : {})}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label={supportText ? `${label}: ${supportText}` : label}
|
|
className={`${baseClasses} flex min-h-0 w-full flex-col items-start justify-center gap-1`}
|
|
onClick={onClick}
|
|
onKeyDown={onKeyDown}
|
|
>
|
|
<SelectionTag recommended={recommended} selected={selected} />
|
|
<span className="w-full font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]">
|
|
{label}
|
|
</span>
|
|
{supportText ? (
|
|
<p className="w-full font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]">
|
|
{supportText}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] p-4 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
|
|
|
|
return (
|
|
<div
|
|
{...(selectionId ? { "data-card-id": selectionId } : {})}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label={supportText ? `${label}: ${supportText}` : label}
|
|
className={`${baseClasses} flex flex-row items-center justify-between gap-4`}
|
|
onClick={onClick}
|
|
onKeyDown={onKeyDown}
|
|
>
|
|
<div className="flex min-w-0 flex-1 flex-col gap-1">
|
|
<div className="flex items-center gap-1">
|
|
<span className="font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]">
|
|
{label}
|
|
</span>
|
|
{showInfoIcon ? <InfoIcon /> : null}
|
|
</div>
|
|
{supportText ? (
|
|
<p className="font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]">
|
|
{supportText}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
<div className="shrink-0">
|
|
<SelectionTag recommended={recommended} selected={selected} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|