34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import { Info } from 'lucide-react';
|
||
import type { ReactNode } from 'react';
|
||
|
||
import styles from './Callout.module.css';
|
||
import { icon } from './icon';
|
||
|
||
interface Props {
|
||
/** A calm step or the one that asks you to take a look. Neither of them fills the text. */
|
||
tone: 'note' | 'quiet';
|
||
caption: string;
|
||
children?: ReactNode;
|
||
}
|
||
|
||
/**
|
||
* A callout modelled on antigravity_chat.png: a thin strip at the left edge and a caption, with no
|
||
* fill behind the text and no exclamation-mark icons. Prompt §3.8: if a screen looks alarming — it
|
||
* is wrong, a remark is an invitation to take a look, not a crash signal.
|
||
*
|
||
* ⚠ Owner remark 10: the strip "could not be read" — it hung separately from the caption, and its
|
||
* meaning had to be guessed. The strip and the caption are brought together into ONE pair: the mark
|
||
* stands right at the strip, and hovering the block highlights both at once. The word of the step
|
||
* is still not invented here — it is a product word and it rests with the owner (Ф-21, В-3).
|
||
*/
|
||
export function Callout({ tone, caption, children }: Props) {
|
||
return (
|
||
<div className={styles.callout} data-tone={tone}>
|
||
<p className={styles.caption}>
|
||
<Info {...icon} className={styles.mark} />
|
||
{caption}
|
||
</p>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|