mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 04:45:08 +03:00
Danny White
fc7667462d
## What kind of change does this PR introduce? UI nit changes ## What is the current behavior? - We use big dots `•` to separate semantically different sets of text that are in the same row - This looks a bit odd given how large the dot is to text - We put _Project Settings_ in its own sidebar section but without a separator like all other sidebar sections ## What is the new behavior? - Use the smaller dots `·` to separate text - Place a separator above _Project Settings_ in sidebar | Before | After | | --- | --- | | <img width="1342" height="711" alt="AWS Healthy Toolshed Supabase-70BD1825-8077-4D1B-84C1-831A4ADAFC0B" src="https://github.com/user-attachments/assets/70246009-a3c7-4b5c-8d75-122140a637d1" /> | <img width="1342" height="711" alt="AWS Healthy Toolshed Supabase" src="https://github.com/user-attachments/assets/e3fc13e4-923d-472e-aaf9-d689e890697b" /> |
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { useIsMFAEnabled } from 'common'
|
|
import { ActionCard } from 'components/ui/ActionCard'
|
|
import { useOrgProjectsInfiniteQuery } from 'data/projects/org-projects-infinite-query'
|
|
import { Boxes, Lock } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { Fragment } from 'react'
|
|
import type { Organization } from 'types'
|
|
import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
|
|
|
|
export const OrganizationCard = ({
|
|
organization,
|
|
href,
|
|
isLink = true,
|
|
className,
|
|
onClick,
|
|
}: {
|
|
organization: Organization
|
|
href?: string
|
|
isLink?: boolean
|
|
className?: string
|
|
onClick?: () => void
|
|
}) => {
|
|
const isUserMFAEnabled = useIsMFAEnabled()
|
|
const { data } = useOrgProjectsInfiniteQuery({ slug: organization.slug })
|
|
const numProjects = data?.pages[0].pagination.count ?? 0
|
|
const isMfaRequired = organization.organization_requires_mfa
|
|
|
|
const renderContent = () => (
|
|
<ActionCard
|
|
bgColor="bg border"
|
|
className={cn(
|
|
'flex items-center min-h-[70px] [&>div]:w-full [&>div]:items-center max-h-min',
|
|
className
|
|
)}
|
|
icon={<Boxes size={18} strokeWidth={1} className="text-foreground" />}
|
|
title={organization.name}
|
|
onClick={onClick}
|
|
description={
|
|
<div className="flex items-center justify-between text-xs text-foreground-light font-sans">
|
|
<div className="flex items-center gap-x-1">
|
|
<span>{organization.plan.name} Plan</span>
|
|
{numProjects > 0 && (
|
|
<>
|
|
<span className="text-foreground-lighter">·</span>
|
|
<span>
|
|
{numProjects} project{numProjects > 1 ? 's' : ''}
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
{isMfaRequired && (
|
|
<Tooltip>
|
|
<TooltipTrigger className="cursor-default">
|
|
<Lock size={12} />
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" className={!isUserMFAEnabled ? 'w-80' : ''}>
|
|
MFA enforced
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
}
|
|
/>
|
|
)
|
|
|
|
if (isLink) {
|
|
return <Link href={href ?? `/org/${organization.slug}`}>{renderContent()}</Link>
|
|
} else {
|
|
return <Fragment>{renderContent()}</Fragment>
|
|
}
|
|
}
|