41 lines
902 B
TypeScript
41 lines
902 B
TypeScript
import { ReactNode } from 'react';
|
|
import InfoBlock from './InfoBlock';
|
|
import AnimateItems from './AnimateItems';
|
|
import { IoInformationCircleOutline } from 'react-icons/io5';
|
|
|
|
export default function Banner({
|
|
icon,
|
|
children,
|
|
animate,
|
|
className,
|
|
}: {
|
|
icon?: ReactNode
|
|
children: ReactNode
|
|
animate?: boolean
|
|
className?: string
|
|
}) {
|
|
return (
|
|
<AnimateItems
|
|
type={animate ? 'bottom' : 'none'}
|
|
items={[
|
|
<InfoBlock
|
|
key="Banner"
|
|
className={className}
|
|
centered={false}
|
|
padding="tight"
|
|
color="blue"
|
|
>
|
|
<div className="flex items-center gap-2.5">
|
|
{icon ?? <IoInformationCircleOutline
|
|
size={18}
|
|
className="translate-y-[1px] shrink-0"
|
|
/>}
|
|
{children}
|
|
</div>
|
|
</InfoBlock>,
|
|
]}
|
|
animateOnFirstLoadOnly
|
|
/>
|
|
);
|
|
}
|