Files
supabase/apps/studio/components/ui/PartnerIcon.tsx
790c7ce369 Vercel marketplace (#28786)
* Add Vercel Marketplace login flow page

* Add alternative Vercel Marketplace flow with for popup windows

* Automatically redirect user to project after Vercel Marketplace login

* added PartnerIcon

* Update partner-icon.tsx

* refactor partner icon

* hide invoices when on vercel marketplace

* vercel marketplace – payment method / billing address / tax numbers | empty states

* add tooltip to memebers

* always show invoices tab

* Update InvoicesSettings.tsx

* add partner id

* update cta urls

* add vercel managed org banner

* add billing coming soon warning

* remove sign-in-vercel-marketplace routes

* re-enable plan upgrades

* Update api.d.ts

* Fix type checking

* fix vercel links

* improve ts

---------

Co-authored-by: Kamil Ogórek <kamil.ogorek@gmail.com>
Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-08-23 08:06:15 +00:00

71 lines
2.0 KiB
TypeScript

import { Organization } from 'types'
import { cn, Tooltip_Shadcn_, TooltipContent_Shadcn_, TooltipTrigger_Shadcn_ } from 'ui'
interface PartnerIconProps {
organization: Pick<Organization, 'managed_by'>
showTooltip?: boolean
tooltipText?: string
size?: 'small' | 'medium' | 'large'
}
function PartnerIcon({
organization,
showTooltip = true,
tooltipText = 'This organization is managed by Vercel Marketplace.',
size = 'small',
}: PartnerIconProps) {
if (organization.managed_by === 'vercel-marketplace') {
const icon = (
<svg
className={cn(
size === 'small' && 'w-2.5 h-2.5',
size === 'medium' && 'w-3.5 h-3.5',
size === 'large' && 'w-5 h-5'
)}
viewBox="0 0 76 65"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M37.5274 0L75.0548 65H0L37.5274 0Z" fill="hsl(var(--foreground-default) / 1)" />
</svg>
)
if (!showTooltip) {
return (
<div
className={cn(
'bg-surface-100 dark:bg-surface-200 border rounded flex items-center justify-center flex-shrink-0',
size === 'small' && 'h-5 w-5',
size === 'medium' && 'w-7 h-7',
size === 'large' && 'w-10 h-10'
)}
>
{icon}
</div>
)
}
return (
<Tooltip_Shadcn_>
<TooltipTrigger_Shadcn_ asChild>
<div
className={cn(
'bg-surface-100 dark:bg-surface-200 border rounded flex items-center justify-center hover:bg-surface-400 dark:hover:bg-surface-400 hover:border-stronger flex-shrink-0',
size === 'small' && 'h-5 w-5',
size === 'medium' && 'w-7 h-7',
size === 'large' && 'w-10 h-10'
)}
>
{icon}
</div>
</TooltipTrigger_Shadcn_>
<TooltipContent_Shadcn_>{tooltipText}</TooltipContent_Shadcn_>
</Tooltip_Shadcn_>
)
}
return null
}
export default PartnerIcon