Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x | // Types
import { BaseVariant } from '@/types';
// Utils
import { combineClasses } from '@shared/utils';
// Icons
import { CloseIcon } from '@/components/icons/reacts';
// Constants
import { CONTENT_MESSAGE } from '@/constants/messages';
// Styles
import './styles/scroll-hint-banner.css';
const variantTheme = {
[BaseVariant.PRIMARY]: {
root: 'scroll-hint-banner-root',
close: 'scroll-hint-banner-close',
},
};
interface ScrollHintBannerProps {
message?: string;
className?: string;
variant?: BaseVariant;
onDismiss?: () => void;
}
export const ScrollHintBanner = ({
message = CONTENT_MESSAGE.SCROLL_HINT,
className,
variant = BaseVariant.PRIMARY,
onDismiss,
}: ScrollHintBannerProps) => {
const theme = variantTheme[variant];
return (
<div
data-variant={variant}
className={combineClasses(theme.root, className)}
>
<span>{message}</span>
<button
type="button"
aria-label="Dismiss scroll hint"
onClick={onDismiss}
className={theme.close}
>
<CloseIcon className="size-3" />
</button>
</div>
);
};
|