MarketplaceCard.tsx54 lines · main

1	import { useParams } from 'common'
2	import Link from 'next/link'
3	import { Badge, Card } from 'ui'
4
5	import { IntegrationLogo } from '../Integration/IntegrationLogo'
6	import { getMarketplaceSource, MarketplaceSourceBadge } from './Marketplace.constants'
7	import type { IntegrationDefinition } from '@/components/interfaces/Integrations/Landing/Integrations.constants'
8
9	interface MarketplaceCardProps {
10	integration: IntegrationDefinition
11	isInstalled: boolean
12	}
13
14	export const MarketplaceCard = ({ integration, isInstalled }: MarketplaceCardProps) => {
15	const { ref } = useParams()
16	const source = getMarketplaceSource(integration)
17
18	return (
19	<Link
20	href={`/project/${ref}/integrations/${integration.id}/overview`}
21	className="rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground-lighter focus-visible:ring-offset-1 focus-visible:ring-offset-background"
22	>
23	<Card className="flex min-h-[168px] h-full flex-col gap-2.5 hover:border-stronger p-4">
24	<div className="flex items-start justify-between">
25	<IntegrationLogo integration={integration} size="h-9 w-9" />
26	{isInstalled && <Badge variant="success">Installed</Badge>}
27	</div>
28	<div>
29	<div className="mb-1 text-sm font-medium">{integration.name}</div>
30	{integration.description && (
31	<p className="line-clamp-2 text-xs leading-snug text-foreground-light">
32	{integration.description}
33	</p>
34	)}
35	</div>
36	<div className="flex-1" />
37	<div className="flex items-center justify-between gap-2 pt-2.5">
38	<div className="flex flex-wrap items-center gap-1">
39	<MarketplaceSourceBadge source={source} />
40	{integration.status && (
41	<Badge variant="warning" className="capitalize">
42	{integration.status}
43	</Badge>
44	)}
45	</div>
46	<div className="text-xs flex items-center gap-1 text-foreground-lighter">
47	<span>Built by</span>
48	<span>{integration.author?.name}</span>
49	</div>
50	</div>
51	</Card>
52	</Link>
53	)
54	}