mirror of
https://github.com/supabase/supabase.git
synced 2026-06-04 20:02:42 +08:00
56de26fe22
This PR migrates the whole monorepo to use Tailwind v4: - Removed `@tailwindcss/container-queries` plugin since it's included by default in v4, - Bump all instances of Tailwind to v4. Made minimal changes to the shared config to remove non-supported features (`alpha` mentions), - Migrate all apps to be compatible with v4 configs, - Fix the `typography.css` import in 3 apps, - Add missing rules which were included by default in v3, - Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot of classes - Rename all misnamed classes according to https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all apps. --------- Co-authored-by: Jordi Enric <jordi.err@gmail.com>
83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
import { ExternalLink } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { PropsWithChildren } from 'react'
|
|
import { Button } from 'ui'
|
|
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
|
|
interface ProductEmptyStateProps {
|
|
title?: string
|
|
size?: 'medium' | 'large'
|
|
ctaButtonLabel?: string
|
|
infoButtonLabel?: string
|
|
infoButtonUrl?: string
|
|
onClickCta?: () => void
|
|
loading?: boolean
|
|
disabled?: boolean
|
|
disabledMessage?: string
|
|
ctaUrl?: string
|
|
}
|
|
|
|
const ProductEmptyState = ({
|
|
title = '',
|
|
size = 'medium',
|
|
children,
|
|
ctaButtonLabel = '',
|
|
infoButtonLabel = '',
|
|
infoButtonUrl = '',
|
|
onClickCta = () => {},
|
|
loading = false,
|
|
disabled = false,
|
|
disabledMessage = '',
|
|
ctaUrl,
|
|
}: PropsWithChildren<ProductEmptyStateProps>) => {
|
|
const hasAction = (ctaButtonLabel && onClickCta) || (infoButtonUrl && infoButtonLabel)
|
|
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<div className="flex space-x-4 rounded-sm border bg-surface-100 p-6 shadow-md">
|
|
{/* A graphic can probably be placed here as a sibling to the div below*/}
|
|
<div className="flex flex-col">
|
|
<div className={`${size === 'medium' ? 'w-80' : 'w-[400px]'} space-y-4`}>
|
|
<h5 className="text-foreground">{title}</h5>
|
|
<div className="flex flex-col space-y-2 text-foreground-light">{children}</div>
|
|
{hasAction && (
|
|
<div className="flex items-center space-x-2">
|
|
{ctaButtonLabel && !!ctaUrl ? (
|
|
<Button asChild type="primary">
|
|
<Link href={ctaUrl}>{ctaButtonLabel}</Link>
|
|
</Button>
|
|
) : ctaButtonLabel && !!onClickCta ? (
|
|
<ButtonTooltip
|
|
type="primary"
|
|
onClick={onClickCta}
|
|
loading={loading}
|
|
disabled={loading || disabled}
|
|
tooltip={{
|
|
content: {
|
|
side: 'bottom',
|
|
text: disabled && disabledMessage.length > 0 ? disabledMessage : undefined,
|
|
},
|
|
}}
|
|
>
|
|
{ctaButtonLabel}
|
|
</ButtonTooltip>
|
|
) : null}
|
|
{infoButtonUrl && infoButtonLabel ? (
|
|
<Button type="default" icon={<ExternalLink strokeWidth={1.5} />}>
|
|
<a target="_blank" rel="noreferrer" href={infoButtonUrl}>
|
|
{infoButtonLabel}
|
|
</a>
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ProductEmptyState
|