konnosDashboard
AlphaNotice.tsx69 lines · main
1import { ExternalLink } from 'lucide-react'
2import Link from 'next/link'
3import { PropsWithChildren } from 'react'
4import { Badge, Button } from 'ui'
5import { Admonition } from 'ui-patterns'
6
7import { BASE_PATH } from '@/lib/constants'
8
9interface AlphaNoticeProps {
10 entity: string
11 feedbackUrl: string
12 className?: string
13}
14
15export const AlphaNotice = ({
16 entity,
17 feedbackUrl,
18 className,
19 children,
20}: PropsWithChildren<AlphaNoticeProps>) => {
21 return (
22 <Admonition
23 showIcon={false}
24 type="tip"
25 layout="horizontal"
26 actions={
27 <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />} className="mt-2">
28 <Link target="_blank" rel="noopener noreferrer" href={feedbackUrl}>
29 Share feedback
30 </Link>
31 </Button>
32 }
33 className={className}
34 >
35 {/* Background image */}
36 <div className="absolute -inset-16 z-0 opacity-50">
37 <img
38 src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
39 alt="Briven Grafana"
40 className="w-full h-full object-cover object-right hidden dark:block"
41 />
42 <img
43 src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
44 alt="Briven Grafana"
45 className="w-full h-full object-cover object-right dark:hidden"
46 />
47 <div className="absolute inset-0 bg-linear-to-r from-background-alternative to-transparent" />
48 </div>
49
50 {/* Content */}
51 <div className="relative z-10 flex flex-col md:flex-row md:items-center gap-y-2 md:gap-x-8 justify-between px-2">
52 <div className="flex flex-col gap-y-0.5">
53 <div className="flex flex-col gap-y-2 items-start">
54 <Badge variant="success" className="-ml-0.5">
55 New
56 </Badge>
57 <p className="text-sm font-medium">Introducing {entity.toLocaleLowerCase()}</p>
58 </div>
59 <p className="text-sm text-foreground-lighter text-balance">
60 {entity} {entity.endsWith('s') ? 'are' : 'is'} now in private alpha. Expect rapid
61 changes, limited features, and possible breaking updates. Please share feedback as we
62 refine the experience and expand access.
63 </p>
64 {children}
65 </div>
66 </div>
67 </Admonition>
68 )
69}