konnosDashboard
SupportFormDirectEmailInfo.tsx52 lines · main
1import { toast } from 'sonner'
2
3import { NO_PROJECT_MARKER } from './SupportForm.utils'
4import CopyButton from '@/components/ui/CopyButton'
5
6interface SupportFormDirectEmailContentProps {
7 projectRef: string | null
8}
9
10export function SupportFormDirectEmailContent({ projectRef }: SupportFormDirectEmailContentProps) {
11 const hasProjectRef = projectRef && projectRef !== NO_PROJECT_MARKER
12
13 return (
14 <div className="text-sm text-foreground-light">
15 <p className="flex items-center gap-x-1.5 flex-wrap">
16 Please email us directly at
17 <span className="inline-flex items-center gap-x-1">
18 <a
19 href={`mailto:support@supabase.com?subject=${encodeURIComponent('Support Request')}${hasProjectRef ? `${encodeURIComponent(' for Project ID: ')}${encodeURIComponent(projectRef)}` : ''}&body=${encodeURIComponent('Here is a detailed description of the problem I am experiencing and any other information that might be helpful...')}`}
20 className="hover:text-foreground transition-colors duration-100"
21 >
22 <code className="text-code-inline !text-foreground-light underline decoration-foreground-lighter/50 hover:decoration-foreground-lighter/80 transition-colors duration-100">
23 support@supabase.com
24 </code>
25 </a>
26 <CopyButton
27 type="text"
28 text="support@supabase.com"
29 iconOnly
30 onClick={() => toast.success('Copied email address to clipboard')}
31 />
32 </span>{' '}
33 and include as much information as possible
34 {hasProjectRef && (
35 <>
36 , along with project ID
37 <span className="inline-flex items-center gap-x-1">
38 <code className="text-code-inline !text-foreground-light">{projectRef}</code>
39 <CopyButton
40 iconOnly
41 type="text"
42 text={projectRef}
43 onClick={() => toast.success('Copied project ID to clipboard')}
44 />
45 </span>
46 </>
47 )}
48 .
49 </p>
50 </div>
51 )
52}