DataApiDisabledState.tsx29 lines · main

1	import { useParams } from 'common'
2	import { AlertCircle } from 'lucide-react'
3	import { Alert, AlertDescription, AlertTitle } from 'ui'
4
5	import { InlineLink } from '@/components/ui/InlineLink'
6
7	interface DataApiDisabledStateProps {
8	description: string
9	}
10
11	export const DataApiDisabledState = ({ description }: DataApiDisabledStateProps) => {
12	const { ref: projectRef } = useParams()
13
14	return (
15	<div className="flex w-full flex-1 items-center justify-center p-10">
16	<Alert className="max-w-md">
17	<AlertCircle size={16} />
18	<AlertTitle>Data API is disabled</AlertTitle>
19	<AlertDescription>
20	Enable the Data API in the{' '}
21	<InlineLink href={`/project/${projectRef}/integrations/data_api/overview`}>
22	Overview
23	</InlineLink>{' '}
24	tab to {description}.
25	</AlertDescription>
26	</Alert>
27	</div>
28	)
29	}