34 lines
1.7 KiB
TypeScript
34 lines
1.7 KiB
TypeScript
import { Info } from 'lucide-react';
|
||
import type { ReactNode } from 'react';
|
||
|
||
import styles from './Callout.module.css';
|
||
import { icon } from './icon';
|
||
|
||
interface Props {
|
||
/** Спокойная ступень или та, что просит посмотреть глазами. Заливки текста нет ни у одной. */
|
||
tone: 'note' | 'quiet';
|
||
caption: string;
|
||
children?: ReactNode;
|
||
}
|
||
|
||
/**
|
||
* Выноска по образцу antigravity_chat.png: тонкая полоска у левого края и подпись, без заливки
|
||
* текста и без значков-восклицаний. Промт §3.8: если экран выглядит тревожным — он неправильный,
|
||
* замечание это приглашение посмотреть, а не сигнал аварии.
|
||
*
|
||
* ⚠ Замечание владельца 10: полоску «не удалось прочитать» — она висела отдельно от подписи,
|
||
* и её значение приходилось угадывать. Полоска и подпись сведены в ОДНУ пару: значок стоит
|
||
* у самой полоски, а наведение на блок подсвечивает обе разом. Слово ступени тут по-прежнему
|
||
* не выдумывается — оно продуктовое и стоит на владельце (Ф-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>
|
||
);
|
||
}
|