mirror of
https://github.com/supabase/supabase.git
synced 2026-10-14 21:59:16 +03:00
Etienne StalmansandJoshen Lim
aeaf831648
Disables organization selection if the org requires MFA but the user does not have MFA enabled. Add badges / hints to show that user has access to an Organization but access is disabled because of MFA access requirement Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { JSX, ReactNode } from 'react'
|
|
import { Badge, Card, cn } from 'ui'
|
|
|
|
export const ActionCard = (card: {
|
|
icon: JSX.Element
|
|
title: string
|
|
bgColor?: string
|
|
description?: string | ReactNode
|
|
isBeta?: boolean
|
|
className?: string
|
|
onClick?: () => void
|
|
}) => {
|
|
return (
|
|
<Card
|
|
className={cn(
|
|
'grow bg-surface-100 p-3 transition-colors hover:bg-surface-200 border border-light hover:border-default cursor-pointer',
|
|
card.className
|
|
)}
|
|
onClick={card.onClick}
|
|
>
|
|
<div className={`relative flex items-start gap-3`}>
|
|
{card.isBeta && (
|
|
<Badge className="absolute -right-5 -top-5 bg-surface-300 bg-opacity-100 text-xs text-foreground">
|
|
Coming soon
|
|
</Badge>
|
|
)}
|
|
<div
|
|
className={`rounded-full ${card.bgColor} w-8 h-8 flex items-center justify-center flex-shrink-0`}
|
|
>
|
|
{card.icon}
|
|
</div>
|
|
<div className="flex flex-col gap-0 w-full">
|
|
<h3 className="text-sm text-foreground mb-0">{card.title}</h3>
|
|
{typeof card.description === 'string' ? (
|
|
<pre className="text-xs text-foreground-light font-sans">{card.description}</pre>
|
|
) : (
|
|
card.description
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|