konnosDashboard
SubjectAndSuggestionsInfo.tsx72 lines · main
1// End of third-party imports
2
3import { SupportCategories } from '@supabase/shared-types/out/constants'
4import { ExternalLink } from 'lucide-react'
5import Link from 'next/link'
6import type { UseFormReturn } from 'react-hook-form'
7import { FormControl, FormField, Input } from 'ui'
8import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
9
10import { DocsSuggestions } from './DocsSuggestions'
11import type { ExtendedSupportCategories } from './Support.constants'
12import type { SupportFormValues } from './SupportForm.schema'
13
14const INCLUDE_DISCUSSIONS: ExtendedSupportCategories[] = [
15 SupportCategories.DATABASE_UNRESPONSIVE,
16 SupportCategories.PROBLEM,
17]
18
19interface SubjectAndSuggestionsInfoProps {
20 form: UseFormReturn<SupportFormValues>
21 category: ExtendedSupportCategories
22 subject: string
23}
24
25export function SubjectAndSuggestionsInfo({
26 form,
27 category,
28 subject,
29}: SubjectAndSuggestionsInfoProps) {
30 return (
31 <div className={'flex flex-col gap-y-2'}>
32 <FormField
33 name="subject"
34 control={form.control}
35 render={({ field }) => (
36 <FormItemLayout layout="vertical" label="Subject">
37 <FormControl>
38 <Input {...field} placeholder="Summary of the problem you have" />
39 </FormControl>
40 </FormItemLayout>
41 )}
42 />
43 <DocsSuggestions searchString={subject} />
44 {subject && INCLUDE_DISCUSSIONS.includes(category) && (
45 <GitHubDiscussionSuggestion subject={subject} />
46 )}
47 </div>
48 )
49}
50
51interface GitHubDiscussionSuggestionProps {
52 subject: string
53}
54
55function GitHubDiscussionSuggestion({ subject }: GitHubDiscussionSuggestionProps) {
56 return (
57 <p className="flex items-center gap-x-1 text-foreground-lighter text-sm">
58 Check our
59 <Link
60 key="gh-discussions"
61 href={`https://github.com/orgs/briven/discussions?discussions_q=${subject}`}
62 target="_blank"
63 rel="noreferrer"
64 className="flex items-center gap-x-1 underline hover:text-foreground transition"
65 >
66 GitHub discussions
67 <ExternalLink size={14} strokeWidth={2} />
68 </Link>
69 for a quick answer
70 </p>
71 )
72}