konnosDashboard
ContextSearchResults.tsx120 lines · main
1'use client'
2
3import { Auth, EdgeFunctions, Storage } from 'icons'
4import { Database } from 'lucide-react'
5import dynamic from 'next/dynamic'
6
7import { EmptyState, SkeletonResults } from './ContextSearchResults.shared'
8import type { SearchContextValue } from './SearchContext.types'
9
10const TableSearchResults = dynamic(
11 () => import('./TableSearchResults').then((mod) => ({ default: mod.TableSearchResults })),
12 {
13 loading: () => <SkeletonResults />,
14 ssr: false,
15 }
16)
17
18const PolicySearchResults = dynamic(
19 () => import('./PolicySearchResults').then((mod) => ({ default: mod.PolicySearchResults })),
20 {
21 loading: () => <SkeletonResults />,
22 ssr: false,
23 }
24)
25
26const EdgeFunctionSearchResults = dynamic(
27 () =>
28 import('./EdgeFunctionSearchResults').then((mod) => ({
29 default: mod.EdgeFunctionSearchResults,
30 })),
31 {
32 loading: () => <SkeletonResults />,
33 ssr: false,
34 }
35)
36
37const StorageSearchResults = dynamic(
38 () => import('./StorageSearchResults').then((mod) => ({ default: mod.StorageSearchResults })),
39 {
40 loading: () => <SkeletonResults />,
41 ssr: false,
42 }
43)
44
45interface ContextSearchResultsProps {
46 context: SearchContextValue
47 query: string
48}
49
50const CONTEXT_CONFIG: Record<
51 SearchContextValue,
52 {
53 icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
54 label: string
55 requiresInput?: boolean // requires user input before showing results
56 }
57> = {
58 'database-tables': {
59 icon: Database,
60 label: 'Database Tables',
61 requiresInput: false,
62 },
63 'auth-policies': {
64 icon: Auth,
65 label: 'RLS Policies',
66 requiresInput: false,
67 },
68 'edge-functions': {
69 icon: EdgeFunctions,
70 label: 'Edge Functions',
71 requiresInput: false,
72 },
73 storage: {
74 icon: Storage,
75 label: 'Storage',
76 requiresInput: false,
77 },
78}
79
80export function ContextSearchResults({ context, query }: ContextSearchResultsProps) {
81 const config = CONTEXT_CONFIG[context]
82
83 if (context === 'database-tables') {
84 return (
85 <div className="flex-1 min-h-0 flex flex-col">
86 <TableSearchResults query={query} />
87 </div>
88 )
89 }
90
91 if (context === 'auth-policies') {
92 return (
93 <div className="flex-1 min-h-0 flex flex-col">
94 <PolicySearchResults query={query} />
95 </div>
96 )
97 }
98
99 if (context === 'edge-functions') {
100 return (
101 <div className="flex-1 min-h-0 flex flex-col">
102 <EdgeFunctionSearchResults query={query} />
103 </div>
104 )
105 }
106
107 if (context === 'storage') {
108 return (
109 <div className="flex-1 min-h-0 flex flex-col">
110 <StorageSearchResults query={query} />
111 </div>
112 )
113 }
114
115 return (
116 <div className="flex-1 min-h-0 flex flex-col">
117 <EmptyState icon={config.icon} label={config.label} query={query} />
118 </div>
119 )
120}