61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import { ComponentProps, ReactNode } from 'react';
|
|
import Container from './Container';
|
|
import AnimateItems from './AnimateItems';
|
|
import { IoInformationCircleOutline } from 'react-icons/io5';
|
|
import { clsx } from 'clsx/lite';
|
|
|
|
export default function Note(props: {
|
|
icon?: ReactNode
|
|
animate?: boolean
|
|
cta?: ReactNode
|
|
hideIcon?: boolean
|
|
} & ComponentProps<typeof Container>) {
|
|
const {
|
|
icon,
|
|
animate,
|
|
cta,
|
|
hideIcon,
|
|
color = 'blue',
|
|
padding,
|
|
children,
|
|
...rest
|
|
} = props;
|
|
|
|
return (
|
|
<AnimateItems
|
|
type={animate ? 'bottom' : 'none'}
|
|
items={[
|
|
<Container
|
|
{...rest}
|
|
key="Banner"
|
|
color={color}
|
|
padding={padding ?? (cta ? 'tight-cta-right' : 'tight')}
|
|
>
|
|
<div className={clsx(
|
|
'flex items-center w-full gap-2.5',
|
|
)}>
|
|
{!hideIcon &&
|
|
<span className={clsx(
|
|
'w-5 flex justify-center shrink-0',
|
|
'opacity-90',
|
|
)}>
|
|
{icon ?? <IoInformationCircleOutline
|
|
size={19}
|
|
className="translate-x-[0.5px] translate-y-[0.5px]"
|
|
/>}
|
|
</span>}
|
|
<span className="text-sm grow">
|
|
{children}
|
|
</span>
|
|
{cta &&
|
|
<span>
|
|
{cta}
|
|
</span>}
|
|
</div>
|
|
</Container>,
|
|
]}
|
|
animateOnFirstLoadOnly
|
|
/>
|
|
);
|
|
}
|