olaven
/
nrss
1
0
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

style: Give better feedback for a search 

Signed-off-by: Tim Hårek Andreassen <tim@harek.no>
This commit is contained in:
Tim Hårek Andreassen 2024-03-30 16:33:21 +01:00
parent ab3b3ad80d
commit 96869502c3
No known key found for this signature in database
GPG Key ID: E59C7734F0E10EB5
2 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/SeriesCard.tsx
View File

@ -7,7 +7,7 @@ export default function SeriesCard(props: { serie: SearchResult; origin: string
return (
<div className="border-2 border-blue-800 p-4 rounded-lg bg-blue-400">
<div className="mx-auto h-full w-full space-y-2">
<h2 className="text-xl font-semibold">{props.serie.title}</h2>
<h3 className="text-xl font-semibold">{props.serie.title}</h3>
<p className="text-md">{props.serie.description}</p>
<img src={image.uri} width={image.width} alt="" />
<code className="font-mono bg-black text-white select-all p-2">{feedUrl.toString()}</code>

33
routes/index.tsx
View File

@ -46,18 +46,7 @@ export default function Home({ data }: PageProps<HandlerData>) {
<div className="p-4 mx-auto max-w-screen-md">
<Header />
<Search defaultValue={data.query} />
{data.result
? (
<div className="w-full mx-auto my-4 space-y-4">
{data.result.map((result) => (
<SeriesCard
serie={result}
origin={data.origin}
/>
))}
</div>
)
: null}
<SearchResult result={data.result} origin={data.origin} />
<div
class="markdown-body"
dangerouslySetInnerHTML={{ __html: render(data?.rawMarkdown) }}
@ -67,3 +56,23 @@ export default function Home({ data }: PageProps<HandlerData>) {
</>
);
}
function SearchResult({ result, origin }: { result: SearchResultList; origin: string }) {
if (!result) {
return null;
}
if (result.length === 0) {
return <h2 className="text-2xl font-semibold mb-8">Ingen resultater</h2>;
}
return (
<div className="w-full mx-auto my-4 space-y-4">
<h2 className="text-2xl font-semibold">Søkeresultat: {result.length} treff</h2>
{result.map((result) => (
<SeriesCard
serie={result}
origin={origin}
/>
))}
</div>
);
}