NoticeBar.tsx38 lines · main

1	import { AnimatePresence, motion } from 'framer-motion'
2	import { type ComponentProps, type ReactNode } from 'react'
3	import { cn } from 'ui'
4	import { Admonition } from 'ui-patterns'
5
6	/**
7	* @deprecated Use Admonition from ui-patterns instead
8	* Pass actions as a prop to the Admonition component
9	*/
10
11	interface NoticeBarProps extends Omit<ComponentProps<typeof Admonition>, 'description'> {
12	title?: string
13	description?: string
14	icon?: ReactNode
15	visible: boolean
16	actions?: ReactNode
17	}
18	export function NoticeBar({ visible, description, actions, ...props }: NoticeBarProps) {
19	return (
20	<AnimatePresence>
21	{visible && (
22	<motion.div
23	initial={{ opacity: 0, height: 0, y: 4 }}
24	animate={{ opacity: 1, height: 'auto', y: 0 }}
25	exit={{ opacity: 0, height: 0, y: 4 }}
26	transition={{ duration: 0.15 }}
27	>
28	<Admonition {...props} className={cn(props.className, 'mb-0')}>
29	{description}
30	<div className="flex flex-col gap-2">
31	{actions && <div className="mt-2">{actions}</div>}
32	</div>
33	</Admonition>
34	</motion.div>
35	)}
36	</AnimatePresence>
37	)
38	}