mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +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>
86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
import { Check, Mail } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { Button, IconDiscord, Separator } from 'ui'
|
|
|
|
import { NO_PROJECT_MARKER } from './SupportForm.utils'
|
|
import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
|
|
import { useProfile } from '@/lib/profile'
|
|
|
|
interface SuccessProps {
|
|
sentCategory?: string
|
|
selectedProject?: string
|
|
}
|
|
|
|
export const Success = ({
|
|
sentCategory = '',
|
|
selectedProject = NO_PROJECT_MARKER,
|
|
}: SuccessProps) => {
|
|
const { profile } = useProfile()
|
|
const respondToEmail = profile?.primary_email ?? 'your email'
|
|
|
|
const { data: project } = useProjectDetailQuery(
|
|
{ ref: selectedProject },
|
|
{ enabled: selectedProject !== NO_PROJECT_MARKER }
|
|
)
|
|
const projectName = project ? project.name : 'No specific project'
|
|
|
|
const categoriesToShowAdditionalResources = ['Problem', 'Unresponsive', 'Performance']
|
|
|
|
return (
|
|
<div className="mt-10 max-w-[620px] flex flex-col items-center space-y-4">
|
|
<div className="relative">
|
|
<Mail strokeWidth={1.5} size={60} className="text-brand" />
|
|
<div className="h-6 w-6 rounded-full bg-brand absolute bottom-1 -right-1.5 flex items-center justify-center">
|
|
<Check strokeWidth={4} size={16} className="text-contrast" />
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center flex-col space-y-2 text-center p-4">
|
|
<h3 className="text-xl">Support request sent</h3>
|
|
|
|
<p className="text-sm text-foreground-light text-balance">
|
|
{selectedProject !== NO_PROJECT_MARKER && (
|
|
<>
|
|
Your ticket has been logged for the project{' '}
|
|
<span className="text-foreground font-medium">{projectName}</span> with project ID:{' '}
|
|
<span className="text-foreground font-medium">{selectedProject}</span>.
|
|
</>
|
|
)}{' '}
|
|
We will reach out to you at{' '}
|
|
<span className="text-foreground font-medium">{respondToEmail}</span>.
|
|
</p>
|
|
</div>
|
|
{categoriesToShowAdditionalResources.includes(sentCategory) && (
|
|
<>
|
|
<div className="my-10! w-full">
|
|
<Separator />
|
|
</div>
|
|
<div className="flex flex-col items-center px-12 space-y-2 text-center">
|
|
<h4 className="text-lg font-normal">Tap into our community</h4>
|
|
<p className="text-sm text-foreground-light text-balance">
|
|
Our Discord community can help with code-related issues. Many questions are answered
|
|
in minutes.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
asChild
|
|
type="default"
|
|
icon={<IconDiscord size={16} fill="hsl(var(--background-default))" />}
|
|
>
|
|
<Link href={'https://discord.supabase.com/'} target="_blank">
|
|
Join us on Discord
|
|
</Link>
|
|
</Button>
|
|
</>
|
|
)}
|
|
<div className="mt-10! w-full">
|
|
<Separator />
|
|
</div>
|
|
<div className="w-full pb-4 px-4 flex items-center justify-end">
|
|
<Button asChild type="default">
|
|
<Link href="/">Finish</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|