mirror of
https://github.com/supabase/supabase.git
synced 2026-07-04 06:44:22 +08:00
cab0585533
* Replace all usage of useProjectContext with useSelectedProjectQuery * Replace all usage of useSelectedProject with useSelectedProjectQuery * Replace all usage of useProjectByRef with useProjectByRefQuery * Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery * Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks * Deprecate ProjecContext
78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import { BadgeCheck } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
|
|
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
|
|
import { Badge, cn } from 'ui'
|
|
import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
|
|
import { IntegrationDefinition } from './Integrations.constants'
|
|
|
|
type IntegrationCardProps = IntegrationDefinition & {
|
|
isInstalled?: boolean
|
|
}
|
|
|
|
const INTEGRATION_CARD_STYLE = cn(
|
|
'w-full h-full pl-5 pr-6 py-3 bg-surface-100 hover:bg-surface-200 hover:border-strong',
|
|
'border border-border gap-3 rounded-md inline-flex ease-out duration-200 transition-all'
|
|
)
|
|
|
|
export const IntegrationLoadingCard = () => {
|
|
return (
|
|
<div className={cn(INTEGRATION_CARD_STYLE, 'h-[110px]')}>
|
|
<div className="w-10 h-10 relative">
|
|
<ShimmeringLoader className="w-full h-full bg-white border rounded-md" />
|
|
</div>
|
|
<div className="grow basis-0 w-full flex flex-col justify-between items-start gap-y-2">
|
|
<div className="flex-col justify-start items-start gap-y-1 flex">
|
|
<ShimmeringLoader className="w-20 py-2.5" />
|
|
<ShimmeringLoader className="w-56 py-2.5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const IntegrationCard = ({
|
|
id,
|
|
status,
|
|
name,
|
|
icon,
|
|
description,
|
|
isInstalled,
|
|
}: IntegrationCardProps) => {
|
|
const { data: project } = useSelectedProjectQuery()
|
|
|
|
return (
|
|
<Link href={`/project/${project?.ref}/integrations/${id}/overview`}>
|
|
<div className={INTEGRATION_CARD_STYLE}>
|
|
<div className="w-10 h-10 relative bg-white border rounded-md flex items-center justify-center">
|
|
{icon()}
|
|
</div>
|
|
<div className="grow basis-0 w-full flex flex-col justify-between items-start gap-y-2 relative">
|
|
<div className="flex-col justify-start items-start gap-y-0.5 flex">
|
|
<div className="flex items-center gap-x-2">
|
|
<p className="text-foreground text-sm">{name}</p>
|
|
{status && (
|
|
<Badge variant="warning" className="py-0 px-1.5 capitalize">
|
|
{status}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<p className="text-foreground-light text-xs">{description}</p>
|
|
</div>
|
|
<div className="flex items-center gap-x-4">
|
|
<Badge className="bg-opacity-100 bg-surface-300 flex items-center gap-x-1.5">
|
|
<span>Official</span>
|
|
</Badge>
|
|
{isInstalled && (
|
|
<div className="flex items-center gap-x-1">
|
|
<BadgeCheck size={14} className="text-brand-600" />
|
|
<span className=" text-brand-600 text-xs">Installed</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|