BannerCard.tsx50 lines · main

1	import { X } from 'lucide-react'
2	import { Button, Card, CardContent, cn } from 'ui'
3
4	import { BASE_PATH } from '@/lib/constants'
5
6	interface BannerCardProps {
7	onDismiss?: () => void
8	children: React.ReactNode
9	className?: string
10	}
11
12	export const BannerCard = ({ onDismiss, children, className }: BannerCardProps) => {
13	return (
14	<Card className={cn('relative overflow-hidden shadow-lg rounded-2xl', className)}>
15	<div className="absolute -inset-16 z-0 opacity-100 pointer-events-none">
16	<img
17	src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
18	alt="Background pattern"
19	className="w-full h-full object-cover object-right hidden dark:block"
20	/>
21	<img
22	src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
23	alt="Background pattern"
24	className="w-full h-full object-cover object-right dark:hidden"
25	/>
26	<div className="absolute inset-0 bg-linear-to-r from-background-alternative to-transparent" />
27	</div>
28
29	<CardContent className="relative z-10 p-6">
30	{onDismiss && (
31	<div className="absolute top-4 right-4 z-20">
32	<Button
33	type="text"
34	size="tiny"
35	htmlType="button"
36	icon={<X size={16} strokeWidth={1.5} />}
37	onClick={(e) => {
38	e.preventDefault()
39	onDismiss()
40	}}
41	className="opacity-75 hover:opacity-100 px-1"
42	aria-label="Close banner"
43	/>
44	</div>
45	)}
46	{children}
47	</CardContent>
48	</Card>
49	)
50	}