components/Searching/SearchResult.tsx

import Link from "@/components/Navigation/Link";
import { SearchResultItem } from "./SearchModal";

type SearchResultProps = {
    result: SearchResultItem;
    query: string;
    onClick: () => void;
};

function SearchResult({ result, query, onClick }: SearchResultProps) {
    return (
        <Link
            href={result.url}
            onClick={onClick}
            className="p-2 shadow-[0_0_1px_1px_rgba(255,255,255,0.1)] block rounded my-2 bg-[rgba(0,0,0,0.2)] hover:bg-[rgba(0,0,0,0.3)]"
        >
            <h3 className="text-lg lg:text-xl">{result.title}</h3>

            <p className="text-[#999]">
                May include information related to{" "}
                <strong className="text-white">{query}</strong>
            </p>
        </Link>
    );
}

export default SearchResult;
1	import Link from "@/components/Navigation/Link";
2	import { SearchResultItem } from "./SearchModal";
3
4	type SearchResultProps = {
5	result: SearchResultItem;
6	query: string;
7	onClick: () => void;
8	};
9
10	function SearchResult({ result, query, onClick }: SearchResultProps) {
11	return (
12	<Link
13	href={result.url}
14	onClick={onClick}
15	className="p-2 shadow-[0_0_1px_1px_rgba(255,255,255,0.1)] block rounded my-2 bg-[rgba(0,0,0,0.2)] hover:bg-[rgba(0,0,0,0.3)]"
16	>
17	<h3 className="text-lg lg:text-xl">{result.title}</h3>
18
19	<p className="text-[#999]">
20	May include information related to{" "}
21	<strong className="text-white">{query}</strong>
22	</p>
23	</Link>
24	);
25	}
26
27	export default SearchResult;