ServiceList.tsx24 lines · main

1	import { AlertCircle } from 'lucide-react'
2	import { Alert, AlertTitle } from 'ui'
3
4	import { PostgrestConfig } from './PostgrestConfig'
5	import { ScaffoldSection } from '@/components/layouts/Scaffold'
6	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
7	import { PROJECT_STATUS } from '@/lib/constants'
8
9	export const ServiceList = () => {
10	const { data: project, isPending: isLoading } = useSelectedProjectQuery()
11
12	return (
13	<ScaffoldSection isFullWidth id="api-settings" className="gap-6 py-0!">
14	{!isLoading && project?.status !== PROJECT_STATUS.ACTIVE_HEALTHY ? (
15	<Alert variant="destructive">
16	<AlertCircle size={16} />
17	<AlertTitle>API settings are unavailable as the project is not active</AlertTitle>
18	</Alert>
19	) : (
20	<PostgrestConfig />
21	)}
22	</ScaffoldSection>
23	)
24	}