58 lines
3.1 KiB
TypeScript
58 lines
3.1 KiB
TypeScript
import { Link } from "react-router";
|
|
import type { KbArticleDto } from "../dtos/KbArticleDto";
|
|
import ColorTextUtils from "~/utils/shared/colors/ColorTextUtils";
|
|
import type { Colors } from "~/application/enums/shared/Colors";
|
|
import clsx from "clsx";
|
|
import type { KnowledgeBaseDto } from "../dtos/KnowledgeBaseDto";
|
|
import EmptyState from "~/components/ui/emptyState/EmptyState";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ChevronRightIcon, StarIcon } from "~/components/ui/icons/vendor";
|
|
|
|
export default function KbFeaturedArticles({ kb, items }: { kb: KnowledgeBaseDto; items: KbArticleDto[] }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-4">
|
|
<FeaturedArticlesIcon color={kb.color} />
|
|
<h2 className="text-2xl font-bold">{t("knowledgeBase.featuredArticles")}</h2>
|
|
</div>
|
|
{items.length === 0 && <EmptyState className="bg-background" captions={{ thereAreNo: t("knowledgeBase.article.emptyFeatured") }} />}
|
|
<div className={clsx("grid gap-2", items.length === 1 ? "grid-cols-1" : "sm:grid-cols-2")}>
|
|
{items.map((item) => {
|
|
return (
|
|
<Link
|
|
to={item.href}
|
|
key={item.id}
|
|
className="rounded-md border border-border bg-background px-3 py-4 shadow-2xs hover:bg-secondary hover:border-secondary-foreground"
|
|
>
|
|
<div className="flex items-center justify-between space-x-2">
|
|
<div className="grow font-medium">{item.title}</div>
|
|
<div className="shrink-0">
|
|
{/* <svg className="h-5 w-5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24">
|
|
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
|
</svg> */}
|
|
<ChevronRightIcon className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FeaturedArticlesIcon({ color }: { color: Colors }) {
|
|
return (
|
|
<StarIcon className={clsx("h-5 w-5", ColorTextUtils.getText500(color))} />
|
|
);
|
|
}
|
|
|
|
// function CategoriesIcon() {
|
|
// return (
|
|
// <svg className="h-7 w-7" fill="currentColor" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 48 48">
|
|
// <path d="M 10.5 5 C 8.019 5 6 7.019 6 9.5 L 6 31.5 C 6 33.981 8.019 36 10.5 36 L 16 36 L 16 33 L 10.5 33 C 9.673 33 9 32.327 9 31.5 L 9 31 L 16 31 L 16 16.5 C 16 16.331 16.013391 16.166 16.025391 16 L 13.5 16 C 12.671 16 12 15.329 12 14.5 C 12 13.671 12.671 13 13.5 13 L 17.03125 13 C 18.18825 11.199 20.205 10 22.5 10 L 30 10 L 30 9.5 C 30 7.019 27.981 5 25.5 5 L 10.5 5 z M 22.5 12 C 20.019 12 18 14.019 18 16.5 L 18 38.5 C 18 40.981 20.019 43 22.5 43 L 40.5 43 C 41.329 43 42 42.329 42 41.5 C 42 40.671 41.329 40 40.5 40 L 22.5 40 C 21.673 40 21 39.327 21 38.5 L 21 38 L 40.5 38 C 41.329 38 42 37.329 42 36.5 L 42 16.5 C 42 14.019 39.981 12 37.5 12 L 22.5 12 z M 25.5 20 L 34.5 20 C 35.329 20 36 20.671 36 21.5 C 36 22.329 35.329 23 34.5 23 L 25.5 23 C 24.671 23 24 22.329 24 21.5 C 24 20.671 24.671 20 25.5 20 z"></path>
|
|
// </svg>
|
|
// );
|
|
// }
|