62 lines
1.6 KiB
TypeScript
Executable File
62 lines
1.6 KiB
TypeScript
Executable File
import React from "react";
|
|
import Typography from "components/typography/Typography";
|
|
import { SVGKey } from "components/icons";
|
|
import { RouterLink } from "components/typography/RouterLink";
|
|
import classNames from "classnames";
|
|
|
|
type KeywordsProps = {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
emphasis?: "low" | "high";
|
|
linkTo?: string;
|
|
};
|
|
|
|
export function ArticleKeywords({
|
|
children,
|
|
className,
|
|
emphasis = "high",
|
|
linkTo = "#",
|
|
}: KeywordsProps) {
|
|
const keywords = React.Children.map(children, (keyword, i) => {
|
|
return (
|
|
<RouterLink to={linkTo}>
|
|
<div
|
|
className={classNames(
|
|
"mr-1",
|
|
"hover:text-blue-600",
|
|
{
|
|
"text-xs text-gray-500 leading-5": emphasis === "low",
|
|
"text-base text-gray-900 px-2 border rounded hover:border-blue-600 border-gray-900":
|
|
emphasis === "high",
|
|
},
|
|
className
|
|
)}
|
|
>
|
|
<Typography>
|
|
{keyword}
|
|
{i != React.Children.count(children) - 1 && emphasis === "low"
|
|
? ","
|
|
: null}
|
|
</Typography>
|
|
</div>
|
|
</RouterLink>
|
|
);
|
|
});
|
|
return (
|
|
<div className="flex flex-row items-center">
|
|
{emphasis === "low" ? (
|
|
<SVGKey className="w-6 fill-gray-500 stroke-gray-500" />
|
|
) : null}
|
|
<div
|
|
className={classNames("flex flex-row", {
|
|
"ml-2": emphasis === "low",
|
|
})}
|
|
>
|
|
{keywords}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ArticleKeywords.displayName = "ArticleKeywords";
|