mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 07:09:07 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { CheckIcon } 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 onClick={onFinish}>{finishLabel}</Button>
|
|
) : (
|
|
<Button asChild>
|
|
<Link href="/">{finishLabel}</Link>
|
|
</Button>
|
|
)
|
|
) : null
|
|
|
|
return (
|
|
<div className="flex w-full flex-col items-center gap-4 px-4 py-4 text-center">
|
|
<CheckIcon strokeWidth={1.5} size={24} className="text-primary" />
|
|
|
|
<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 icon={<IconDiscord size={16} fill="var(--background-default)" />}>
|
|
<Link href="https://discord.supabase.com/" target="_blank">
|
|
Join Discord
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|