adilalloandCursor
b1ca1a748e
The info-box checkboxes overflowed in a squeezed column; wrapping them and offering those scopes as chips on every approach keeps the sidebar and Applicable Scope selection in sync without publishing unchecked keys as defaults. Co-authored-by: Cursor <cursoragent@cursor.com>
78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
"use client";
|
||
|
||
import { memo } from "react";
|
||
import CheckboxGroup from "../CheckboxGroup";
|
||
import type { InfoMessageBoxViewProps } from "./InfoMessageBox.types";
|
||
|
||
/** Exclamation icon per Figma 19751:35053 – vertical bar + dot inside circle; circle bg white 10% opacity, no border */
|
||
function ExclamationIconInline() {
|
||
const fillColor = "var(--color-content-default-primary, white)";
|
||
return (
|
||
<svg
|
||
width={24}
|
||
height={24}
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="shrink-0"
|
||
aria-hidden
|
||
>
|
||
<circle cx="12" cy="12" r="10" fill="rgba(255,255,255,0.1)" />
|
||
<path
|
||
d="M11.25 14.0386V5.53857H12.75V14.0386H11.25ZM11.25 18.4616V16.9616H12.75V18.4616H11.25Z"
|
||
fill={fillColor}
|
||
/>
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function InfoMessageBoxView({
|
||
title,
|
||
items,
|
||
icon,
|
||
checkedIds,
|
||
onGroupChange,
|
||
className,
|
||
}: InfoMessageBoxViewProps) {
|
||
const options = items.map((item) => ({
|
||
value: item.id,
|
||
label: item.label,
|
||
}));
|
||
|
||
const handleChange = (data: { value: string[] }) => {
|
||
onGroupChange(data.value);
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className={`flex w-full min-w-0 items-start gap-[var(--measures-spacing-200,8px)] p-[var(--spacing-measures-spacing-500,20px)] rounded-[var(--measures-radius-300,12px)] border-l-2 border-solid border-[var(--color-border-default-secondary,#1f1f1f)] bg-[var(--color-content-inverse-secondary,#1f1f1f)] ${className}`}
|
||
role="region"
|
||
aria-label={title}
|
||
>
|
||
<div
|
||
className="relative shrink-0 size-6 flex items-center justify-center"
|
||
data-name="Asset / Icon / exclamation"
|
||
>
|
||
{icon ?? <ExclamationIconInline />}
|
||
</div>
|
||
<div className="flex min-w-0 flex-1 flex-col gap-[12px]">
|
||
<p className="text-small-label text-[var(--color-content-default-primary,white)] min-w-0 break-words">
|
||
{title}
|
||
</p>
|
||
<div className="flex min-w-0 w-full flex-col gap-[12px] [&_label]:w-full [&_label]:min-w-0 [&_label]:gap-[6px] [&_label_span]:text-x-small-paragraph [&_label_span]:opacity-80">
|
||
<CheckboxGroup
|
||
mode="standard"
|
||
value={checkedIds}
|
||
onChange={handleChange}
|
||
options={options}
|
||
aria-label={title}
|
||
className="flex w-full min-w-0 flex-col gap-[12px] !space-y-0"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default memo(InfoMessageBoxView);
|