mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 11:55:05 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import { Check } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { Button, IconDiscord } 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
|
|
onFinish?: () => void
|
|
finishLabel?: string
|
|
showFinishAction?: boolean
|
|
}
|
|
|
|
export const Success = ({
|
|
sentCategory: _sentCategory = '',
|
|
selectedProject = NO_PROJECT_MARKER,
|
|
onFinish,
|
|
finishLabel = 'Finish',
|
|
showFinishAction = true,
|
|
}: 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 finishAction = showFinishAction ? (
|
|
onFinish ? (
|
|
<Button variant="default" onClick={onFinish}>
|
|
{finishLabel}
|
|
</Button>
|
|
) : (
|
|
<Button asChild variant="default">
|
|
<Link href="/">{finishLabel}</Link>
|
|
</Button>
|
|
)
|
|
) : null
|
|
|
|
return (
|
|
<div className="flex w-full flex-col items-center gap-4 px-4 pt-4 text-center">
|
|
<Check strokeWidth={1.5} size={24} className="text-brand" />
|
|
|
|
<div className="flex max-w-[620px] flex-col items-center gap-2">
|
|
<h3 className="text-xl">Support request sent</h3>
|
|
<p className="text-balance text-sm text-foreground-light">
|
|
{selectedProject !== NO_PROJECT_MARKER && (
|
|
<>
|
|
Your ticket has been logged for{' '}
|
|
<span className="font-medium text-foreground">{projectName}</span>.{' '}
|
|
</>
|
|
)}
|
|
We'll reach out at{' '}
|
|
<span className="font-medium text-foreground">{respondToEmail}</span>.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center justify-center gap-3">
|
|
{finishAction}
|
|
<Button
|
|
asChild
|
|
variant="default"
|
|
icon={<IconDiscord size={16} fill="hsl(var(--background-default))" />}
|
|
>
|
|
<Link href="https://discord.supabase.com/" target="_blank">
|
|
Join Discord
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|