mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Ivan VasilovandJordi Enric
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>
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import { ExternalLink } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { PropsWithChildren } from 'react'
|
|
import { Badge, Button } from 'ui'
|
|
import { Admonition } from 'ui-patterns'
|
|
|
|
import { BASE_PATH } from '@/lib/constants'
|
|
|
|
interface AlphaNoticeProps {
|
|
entity: string
|
|
feedbackUrl: string
|
|
className?: string
|
|
}
|
|
|
|
export const AlphaNotice = ({
|
|
entity,
|
|
feedbackUrl,
|
|
className,
|
|
children,
|
|
}: PropsWithChildren<AlphaNoticeProps>) => {
|
|
return (
|
|
<Admonition
|
|
showIcon={false}
|
|
type="tip"
|
|
layout="horizontal"
|
|
actions={
|
|
<Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />} className="mt-2">
|
|
<Link target="_blank" rel="noopener noreferrer" href={feedbackUrl}>
|
|
Share feedback
|
|
</Link>
|
|
</Button>
|
|
}
|
|
className={className}
|
|
>
|
|
{/* Background image */}
|
|
<div className="absolute -inset-16 z-0 opacity-50">
|
|
<img
|
|
src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
|
|
alt="Supabase Grafana"
|
|
className="w-full h-full object-cover object-right hidden dark:block"
|
|
/>
|
|
<img
|
|
src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
|
|
alt="Supabase Grafana"
|
|
className="w-full h-full object-cover object-right dark:hidden"
|
|
/>
|
|
<div className="absolute inset-0 bg-linear-to-r from-background-alternative to-transparent" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 flex flex-col md:flex-row md:items-center gap-y-2 md:gap-x-8 justify-between px-2">
|
|
<div className="flex flex-col gap-y-0.5">
|
|
<div className="flex flex-col gap-y-2 items-start">
|
|
<Badge variant="success" className="-ml-0.5">
|
|
New
|
|
</Badge>
|
|
<p className="text-sm font-medium">Introducing {entity.toLocaleLowerCase()}</p>
|
|
</div>
|
|
<p className="text-sm text-foreground-lighter text-balance">
|
|
{entity} {entity.endsWith('s') ? 'are' : 'is'} now in private alpha. Expect rapid
|
|
changes, limited features, and possible breaking updates. Please share feedback as we
|
|
refine the experience and expand access.
|
|
</p>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</Admonition>
|
|
)
|
|
}
|