File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import type { ReactNode } from 'react';
import { FoxBadgeDot } from '@fox/core/components/fox-badge-dot';
import { FoxIconButton } from '@fox/core/components/fox-icon-button';
import styles from './header-icon-button.module.scss';
interface HeaderIconButtonProps {
icon: ReactNode;
/** 글자가 없으므로 이 값이 접근성 이름이 된다. */
label: string;
/** 참이면 우상단에 알림 점(FoxBadgeDot)을 얹는다. */
hasBadge?: boolean;
onAction?: () => void;
}
/**
* 헤더 우측 아이콘 버튼(시안 header의 `item`). FoxIconButton을 그대로 쓰고 모양 차이 두 개
* (radius·아이콘 크기)만 CSS 모듈로 덮는다 — 근거는 module.scss 상단 참고.
*
* 배지는 `<button>` 안이 아니라 형제로 둔다. 버튼 안에 넣으면 아이콘 슬롯의 크기 규칙
* (`__icon > *`가 100%)에 걸려 배지까지 늘어난다.
*/
export function HeaderIconButton({
icon,
label,
hasBadge = false,
onAction,
}: HeaderIconButtonProps) {
return (
<span className={styles.slot}>
<FoxIconButton
type="ghost"
size="md"
icon={icon}
label={label}
className={styles.button}
onAction={onAction}
/>
{hasBadge && <FoxBadgeDot className={styles.badge} label="읽지 않은 알림 있음" />}
</span>
);
}