konnosDashboard
MarketplaceDetailHero.tsx83 lines · main
1import Link from 'next/link'
2import type { ReactNode } from 'react'
3import { Badge, cn, NavMenu, NavMenuItem } from 'ui'
4import {
5 PageHeader,
6 PageHeaderDescription,
7 PageHeaderIcon,
8 PageHeaderMeta,
9 PageHeaderNavigationTabs,
10 PageHeaderSummary,
11 PageHeaderTitle,
12} from 'ui-patterns'
13
14import { getMarketplaceSource, MarketplaceSourceBadge } from './Marketplace.constants'
15import { IntegrationLogo } from '@/components/interfaces/Integrations/Integration/IntegrationLogo'
16import type { IntegrationDefinition } from '@/components/interfaces/Integrations/Landing/Integrations.constants'
17
18interface MarketplaceDetailHeroProps {
19 integration: IntegrationDefinition
20 title: string
21 subtitle?: ReactNode
22 tabs: Array<{ label: string; href: string; active: boolean }>
23}
24
25interface BadgesComponentProps {
26 className?: string
27 source: ReturnType<typeof getMarketplaceSource>
28 integration: IntegrationDefinition
29}
30
31const BadgesComponent = ({ className, source, integration }: BadgesComponentProps) => {
32 return (
33 <div className={cn('flex items-center gap-2', className)}>
34 <MarketplaceSourceBadge source={source} />
35 {integration.status && <Badge variant="warning">{integration.status}</Badge>}
36 </div>
37 )
38}
39
40export const MarketplaceDetailHero = ({
41 integration,
42 title,
43 subtitle,
44 tabs,
45}: MarketplaceDetailHeroProps) => {
46 const source = getMarketplaceSource(integration)
47
48 return (
49 <PageHeader size="full" className={cn('@container')}>
50 <PageHeaderMeta className="mx-auto w-full flex @xl:flex-col @xl:justify-start @xl:items-start gap-4">
51 <div className="mx-auto w-full flex items-center gap-2 @lg:gap-4">
52 <PageHeaderIcon>
53 <IntegrationLogo integration={integration} size="w-10 h-10 @lg:w-14 @lg:h-14" />
54 </PageHeaderIcon>
55 <PageHeaderSummary className="gap-y-0.5">
56 <div className="mb-1 flex flex-col flex-wrap @lg:flex-row @lg:items-center gap-2">
57 <PageHeaderTitle className="heading-title truncate">{title}</PageHeaderTitle>
58 <BadgesComponent
59 className="hidden @xl:flex"
60 source={source}
61 integration={integration}
62 />
63 </div>
64 <PageHeaderDescription className="hidden @lg:block">{subtitle}</PageHeaderDescription>
65 </PageHeaderSummary>
66 </div>
67 <PageHeaderDescription className="@lg:hidden">{subtitle}</PageHeaderDescription>
68 <BadgesComponent className="flex @xl:hidden" source={source} integration={integration} />
69 </PageHeaderMeta>
70 {tabs.length > 0 && (
71 <PageHeaderNavigationTabs className="mx-auto w-full">
72 <NavMenu>
73 {tabs.map((tab) => (
74 <NavMenuItem key={tab.href} active={tab.active}>
75 <Link href={tab.href}>{tab.label}</Link>
76 </NavMenuItem>
77 ))}
78 </NavMenu>
79 </PageHeaderNavigationTabs>
80 )}
81 </PageHeader>
82 )
83}