HighAvailabilityBadge.tsx53 lines · main

1	import { ArrowRight } from 'lucide-react'
2	import Link from 'next/link'
3	import { cn, HoverCard, HoverCardContent, HoverCardTrigger, Separator } from 'ui'
4
5	import { ServerLightGrid } from './ServerLightGrid'
6	import { DOCS_URL } from '@/lib/constants'
7
8	interface HighAvailabilityBadgeProps {
9	size?: 'default' | 'small'
10	}
11
12	export function HighAvailabilityBadge({ size = 'default' }: HighAvailabilityBadgeProps) {
13	return (
14	<HoverCard openDelay={200} closeDelay={100}>
15	<HoverCardTrigger asChild>
16	<div
17	className={cn(
18	'relative inline-flex items-center justify-center overflow-hidden rounded-md text-center font-mono uppercase',
19	'cursor-default whitespace-nowrap font-medium tracking-[0.06em] text-[11px] leading-[1.1] px-[5.5px] py-[3px]',
20	'transition-all',
21	'border border-purple-700 dark:border-purple-600/50',
22	'bg-purple-400 text-purple-1100 dark:bg-purple-100'
23	)}
24	>
25	{size === 'small' ? 'HA' : 'High Availability'}
26	<span className="animate-badge-shimmer pointer-events-none absolute inset-0 bg-gradient-to-br from-transparent via-white/35 to-transparent blur-md" />
27	</div>
28	</HoverCardTrigger>
29	<HoverCardContent side="bottom" align="start" className="w-72 overflow-hidden p-0">
30	<div className="h-24 bg-surface-75">
31	<ServerLightGrid />
32	</div>
33	<Separator />
34	<div className="flex flex-col gap-1 p-3 px-5">
35	<p className="text-sm text-foreground-light">
36	Driven by <span className="text-foreground">Multigres</span>, a horizontally scalable
37	Postgres architecture that supports highly-available and globally distributed
38	deployments.
39	</p>
40	<Link
41	href={`${DOCS_URL}/guides/deployment/high-availability`}
42	target="_blank"
43	rel="noopener noreferrer"
44	className="mt-1 inline-flex items-center gap-1 text-xs text-foreground-lighter transition-colors hover:text-foreground"
45	>
46	Read more
47	<ArrowRight size={12} strokeWidth={1.5} />
48	</Link>
49	</div>
50	</HoverCardContent>
51	</HoverCard>
52	)
53	}