ApiAuthorization.Error.tsx28 lines · main

1	import type { ReactNode } from 'react'
2	import { Alert, AlertDescription, AlertTitle, Card, CardContent, CardHeader, WarningIcon } from 'ui'
3
4	import type { ResourceError } from '@/data/api-authorization/api-authorization-query'
5
6	export interface ApiAuthorizationErrorScreenProps {
7	error: ResourceError | undefined
8	}
9
10	export function ApiAuthorizationErrorScreen({
11	error,
12	}: ApiAuthorizationErrorScreenProps): ReactNode {
13	return (
14	<Card>
15	<CardHeader>Authorize API access</CardHeader>
16	<CardContent className="p-0">
17	<Alert variant="warning" className="border-0 rounded-t-none">
18	<WarningIcon />
19	<AlertTitle>Failed to fetch details for API authorization request</AlertTitle>
20	<AlertDescription>
21	<p>Please retry your authorization request from the requesting app</p>
22	{error && <p className="mt-2">Error: {error?.message}</p>}
23	</AlertDescription>
24	</Alert>
25	</CardContent>
26	</Card>
27	)
28	}