konnosDashboard
PlatformWebhooksHeader.tsx86 lines · main
1import Link from 'next/link'
2import { ReactNode } from 'react'
3import {
4 Badge,
5 BreadcrumbItem,
6 BreadcrumbLink,
7 BreadcrumbList,
8 BreadcrumbPage,
9 BreadcrumbSeparator,
10} from 'ui'
11import {
12 PageHeader,
13 PageHeaderAside,
14 PageHeaderBreadcrumb,
15 PageHeaderDescription,
16 PageHeaderMeta,
17 PageHeaderSummary,
18 PageHeaderTitle,
19} from 'ui-patterns/PageHeader'
20
21import { DocsButton } from '@/components/ui/DocsButton'
22import { FeaturePreviewBadge } from '@/components/ui/FeaturePreviewBadge'
23
24interface PlatformWebhooksHeaderProps {
25 hasSelectedEndpoint: boolean
26 headerTitle: string
27 headerDescription: string
28 endpointStatus?: 'enabled' | 'disabled'
29 endpointActions?: ReactNode
30 webhooksHref: string
31 scopeLabel: string
32 featureKey: string
33}
34
35export const PlatformWebhooksHeader = ({
36 hasSelectedEndpoint,
37 headerTitle,
38 headerDescription,
39 endpointStatus,
40 endpointActions,
41 webhooksHref,
42 scopeLabel,
43 featureKey,
44}: PlatformWebhooksHeaderProps) => {
45 return (
46 <PageHeader size="default" className="pb-6">
47 {hasSelectedEndpoint && (
48 <PageHeaderBreadcrumb>
49 <BreadcrumbList>
50 <BreadcrumbItem>
51 <BreadcrumbLink asChild>
52 <Link href={webhooksHref}>{scopeLabel}</Link>
53 </BreadcrumbLink>
54 </BreadcrumbItem>
55 <BreadcrumbSeparator />
56 <BreadcrumbItem>
57 <BreadcrumbPage>Endpoint</BreadcrumbPage>
58 </BreadcrumbItem>
59 </BreadcrumbList>
60 </PageHeaderBreadcrumb>
61 )}
62 <PageHeaderMeta>
63 <PageHeaderSummary className="min-w-0">
64 <PageHeaderTitle className="min-w-0 w-full">
65 <span className="flex w-full min-w-0 items-center gap-x-4">
66 <span className="block min-w-0 truncate leading-tight">{headerTitle}</span>
67 {hasSelectedEndpoint && endpointStatus && (
68 <Badge
69 className="shrink-0 self-center"
70 variant={endpointStatus === 'enabled' ? 'success' : 'default'}
71 >
72 {endpointStatus === 'enabled' ? 'Enabled' : 'Disabled'}
73 </Badge>
74 )}
75 {!hasSelectedEndpoint && <FeaturePreviewBadge featureKey={featureKey} />}
76 </span>
77 </PageHeaderTitle>
78 <PageHeaderDescription>{headerDescription}</PageHeaderDescription>
79 </PageHeaderSummary>
80 <PageHeaderAside>
81 {hasSelectedEndpoint ? endpointActions : <DocsButton href="https://supabase.com/docs" />}
82 </PageHeaderAside>
83 </PageHeaderMeta>
84 </PageHeader>
85 )
86}