konnosDashboard
DocsLink.tsx96 lines · main
1import { type DocsSearchResult as Page, type DocsSearchResultSection as PageSection } from 'common'
2import { ChevronRight } from 'lucide-react'
3import Link from 'next/link'
4import { cn } from 'ui'
5import { TextHighlighterBase as TextHighlighter } from 'ui-patterns/CommandMenu'
6
7import { formatSectionUrl, generateLink, getPageIcon } from './SupportForm.utils'
8
9const cardBaseClasses =
10 'bg-200 rounded-lg hover:bg-surface-200 p-3 transition-colors hover:border-overlay hover:shadow-xs flex items-center justify-between'
11
12interface DocsLinkGroup {
13 page: Page
14}
15
16export const DocsLinkGroup = ({ page }: DocsLinkGroup) => {
17 const link = generateLink(page.type, page.path)
18
19 return (
20 <ul key={page.id} className="grid gap-2">
21 <li key={`${page.path}-group`} className="px-2">
22 <Link
23 target="_blank"
24 rel="noreferrer"
25 href={link}
26 className={cn(cardBaseClasses, 'flex items-center justify-between pr-5')}
27 >
28 <div className="grow flex gap-3 items-center">
29 <div>{getPageIcon(page)}</div>
30 <div className="flex flex-col gap-0 pr-6">
31 <span className="text-sm">
32 <TextHighlighter text={page.title} query="test" />
33 </span>
34 {(page.description || page.subtitle) && (
35 <div className="text-xs text">
36 <TextHighlighter text={page.description || page.subtitle || ''} query="test" />
37 </div>
38 )}
39 </div>
40 </div>
41 <ChevronRight size={18} />
42 </Link>
43 {page.sections.length > 0 && (
44 <ul className="border-l border-default ml-3 pt-3 grid gap-2">
45 {page.sections.map((section: PageSection, i) => (
46 <DocsLinkSection
47 key={`${page.path}__${section.heading}-item-${i}`}
48 page={page}
49 section={section}
50 />
51 ))}
52 </ul>
53 )}
54 </li>
55 </ul>
56 )
57}
58
59interface DocsLinkSection {
60 page: Page
61 section: PageSection
62}
63
64const DocsLinkSection = ({ page, section }: DocsLinkSection) => {
65 const sectionLink = formatSectionUrl(page, section)
66
67 return (
68 <ul key={`${section.heading}-group`} className="grid gap-2">
69 <li key={`${section.heading}-item`} className="p-2 mb-2">
70 <Link target="_blank" href={sectionLink} className={cn(cardBaseClasses)}>
71 <div className="grow flex gap-3 items-center">
72 <div>{getPageIcon(page)}</div>
73 <div className="grid gap-1.5">
74 {page.type !== 'github-discussions' && (
75 <span>
76 <TextHighlighter
77 className="not-italic text-xs rounded-full px-3 py-1 bg-surface-300 "
78 text={section.heading}
79 query="test"
80 />
81 </span>
82 )}
83
84 {section.heading && (
85 <div className="text text-xs ">
86 <TextHighlighter text={section.heading} query="test" />
87 </div>
88 )}
89 </div>
90 </div>
91 <ChevronRight size={18} />
92 </Link>
93 </li>
94 </ul>
95 )
96}