42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
|
import type { TSearchResultItem } from "@/types/docs.type";
|
||
|
|
import { nanoid } from "nanoid";
|
||
|
|
import Link from "next/link";
|
||
|
|
|
||
|
|
export const SearchResultList = (props: {
|
||
|
|
searchResult: TSearchResultItem[];
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="flex flex-col justify-center">
|
||
|
|
<div className={"flex min-h-full flex-col content-font"}>
|
||
|
|
{props.searchResult.map((item, index) => (
|
||
|
|
<Link
|
||
|
|
className={`border-t p-2 ${
|
||
|
|
index === props.searchResult.length - 1 && "border-b"
|
||
|
|
} flex flex-col hover:bg-gray-50 dark:hover:bg-gray-900`}
|
||
|
|
href={`/blog/${item.id}`}
|
||
|
|
key={nanoid()}
|
||
|
|
target="_blank"
|
||
|
|
>
|
||
|
|
<div className="my-1">
|
||
|
|
<div className="post-list-caption-font font-bold text-md capitalize">{item.title}</div>
|
||
|
|
{item.summary && <div className="">{item.summary}</div>}
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-wrap space-x-2">
|
||
|
|
{item.tags?.map((tagitem) => (
|
||
|
|
<div className="text-gray-500 text-sm dark:text-gray-400" key={nanoid()}>
|
||
|
|
{tagitem}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="my-3 text-center text-gray-500 dark:text-gray-400">
|
||
|
|
<p className="mx-auto text-sm">{"For search efficiency, only the first 20 results are displayed."}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|