47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import React, { useState } from "react";
|
|
import Typography from "./typography/Typography";
|
|
import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation";
|
|
import { useSearchViewModel } from "../searchResults/controller/searchResultsViewModel";
|
|
import { ArticleSearchResult } from "./ArticleSearchResult";
|
|
import { Loader } from "./Loader/Loader";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export const SearchResultSection = () => {
|
|
const store = useSearchStoreImplementation();
|
|
const { searchResults, isLoading } = useSearchViewModel(store);
|
|
const [t, i18next] = useTranslation()
|
|
|
|
function getResults() {
|
|
if (searchResults === undefined || searchResults?.data.length === 0) {
|
|
return (
|
|
<Typography
|
|
fontWeightVariant="semibold"
|
|
className="text-xl w-full text-center items-center py-3"
|
|
>
|
|
{t("searchResults.nothingFound")}.
|
|
</Typography>
|
|
);
|
|
} else {
|
|
const results = searchResults.data.map((searchItem) => (
|
|
<ArticleSearchResult searchItem={searchItem} />
|
|
));
|
|
return results;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="p-4 md:px-6 md:py-8">
|
|
<div className="pb-2">
|
|
<Typography fontWeightVariant="semibold" className="text-3xl">
|
|
{t("searchResults.title")}
|
|
</Typography>
|
|
<Typography className="text-gray-300 text-sm">
|
|
{t("searchResults.totalResults")}: {searchResults?.meta.total}
|
|
</Typography>
|
|
</div>
|
|
<hr className="w-full border-gray-100" />
|
|
<div className="divide divide-y divide-gray-100">{getResults()}</div>
|
|
</div>
|
|
);
|
|
};
|