konnosDashboard
MarketplaceDetailTopBar.tsx46 lines · main
1import { useParams } from 'common'
2import Link from 'next/link'
3import type { ReactNode } from 'react'
4import {
5 Badge,
6 BreadcrumbItem,
7 BreadcrumbLink,
8 BreadcrumbList,
9 BreadcrumbPage,
10 BreadcrumbSeparator,
11} from 'ui'
12
13interface MarketplaceDetailTopBarProps {
14 title: string
15 actions?: ReactNode
16 isInstalled?: boolean
17}
18
19export const MarketplaceDetailTopBar = ({
20 title,
21 isInstalled,
22 actions,
23}: MarketplaceDetailTopBarProps) => {
24 const { ref } = useParams()
25
26 return (
27 <div className="sticky min-h-(--header-height) top-0 z-20 flex justify-between items-center border-b bg-dash-sidebar px-6 py-2.5 xl:px-10">
28 <div className="flex min-w-0 flex-1 items-center gap-4 [&_li]:text-xs">
29 <BreadcrumbList className="min-w-0 flex-nowrap">
30 <BreadcrumbItem>
31 <BreadcrumbLink asChild>
32 <Link href={`/project/${ref}/integrations`}>Integrations</Link>
33 </BreadcrumbLink>
34 </BreadcrumbItem>
35 <BreadcrumbSeparator />
36 <BreadcrumbItem className="min-w-0">
37 <BreadcrumbPage className="block min-w-0 truncate">{title}</BreadcrumbPage>
38 {isInstalled && <Badge variant="success">Installed</Badge>}
39 </BreadcrumbItem>
40 </BreadcrumbList>
41 </div>
42
43 <div className="flex shrink-0 items-center gap-2">{actions}</div>
44 </div>
45 )
46}