Tldraw/apps/docs/pages/search-results.tsx

59 wiersze
1.6 KiB
TypeScript

import { Breadcrumb } from '@/components/Breadcrumb'
import { MetaHead } from '@/components/MetaHead'
import { Sidebar } from '@/components/Sidebar'
import { SidebarContentList } from '@/types/content-types'
import { SearchResult } from '@/types/search-types'
import { getSidebarContentList } from '@/utils/getSidebarContentList'
import { GetServerSideProps } from 'next'
import { useTheme } from 'next-themes'
import Link from 'next/link'
type Props = {
sidebar: SidebarContentList
results: SearchResult[]
query: string
}
export default function SectionListPage({ sidebar, query, results }: Props) {
const theme = useTheme()
return (
<>
<MetaHead title={`Search Results: ${query} (${results.length})`} />
<div className="layout">
<Sidebar {...sidebar} />
<main className={`article list ${theme.theme ?? 'light'}`}>
<Breadcrumb />
<h1>{`Found ${results.length} Results for "${query}"`}</h1>
<ul>
{results.map((result) => (
<Link key={result.id} href={`${result.url}`}>
<li>
<h4>{result.subtitle}</h4>
<h3>{result.title}</h3>
</li>
</Link>
))}
</ul>
</main>
</div>
</>
)
}
export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
// get the q out of search-results?q=foo
const query = ctx.query?.q?.toString() as string
if (!query) throw Error()
const sidebar = await getSidebarContentList({})
// fetch from our current server
const res = await fetch(`http://${ctx.req.headers.host}/api/search?q=${query}`)
const json = await res.json()
const results = json.results
return { props: { sidebar, query, results } }
}