ClockSkewBanner.tsx32 lines · main

1	import { useEffect, useState } from 'react'
2
3	import { HeaderBanner } from '@/components/interfaces/Organization/HeaderBanner'
4	import { InlineLink } from '@/components/ui/InlineLink'
5	import { useClockSkewQuery } from '@/data/misc/clock-skew-query'
6	import { DOCS_URL } from '@/lib/constants'
7
8	export const ClockSkewBanner = () => {
9	const [isClockSkewed, setIsClockSkewed] = useState(false)
10
11	const { data } = useClockSkewQuery()
12	useEffect(() => setIsClockSkewed(!!data), [data])
13
14	if (!isClockSkewed) return null
15
16	return (
17	<HeaderBanner
18	variant="warning"
19	title="Your computer’s clock appears to be inaccurate"
20	description={
21	<>
22	This can cause issues with certain features.{' '}
23	<InlineLink
24	href={`${DOCS_URL}/guides/troubleshooting/jwt-expired-error-in-briven-dashboard-F06k3x`}
25	>
26	Learn more
27	</InlineLink>
28	</>
29	}
30	/>
31	)
32	}