57 lines
2.0 KiB
TypeScript
Executable File
57 lines
2.0 KiB
TypeScript
Executable File
import React from "react";
|
|
import { SVGMedicine } from "../icons";
|
|
import Typography from "components/typography/Typography";
|
|
import { Button } from "components/Button/Button";
|
|
import classNames from "classnames";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type Props = {
|
|
count?: number;
|
|
title: string;
|
|
|
|
iconChild: Required<JSX.Element>;
|
|
} & Omit<React.ComponentPropsWithoutRef<"div">, "">;
|
|
|
|
function CategoryCard({ count, title, iconChild, className, ...props }: Props) {
|
|
const [t, i18next] = useTranslation()
|
|
const iconChildStyle =
|
|
"h-7 fill-gray-500 stroke-gray-500 group-focus:fill-blue-600 group-active:fill-blue-600 group-focus:stroke-blue-600 group-active:stroke-blue-600";
|
|
|
|
return (
|
|
<div className="snap-start">
|
|
<Button
|
|
defaultStyle={false}
|
|
className="focus:outline-none group hover:bg-gray-75 active:bg-white active:outline active:outline-1 active:outline-blue-600 focus:outline-1 focus:outline-blue-600"
|
|
>
|
|
<div className=" rounded py-1 px-4 flex flex-row items-center ">
|
|
<div className="justify-center max-w-max">
|
|
{React.cloneElement(iconChild, {
|
|
className: classNames(iconChildStyle, className),
|
|
})}
|
|
</div>
|
|
<div className="flex flex-col ml-3 min-w-max">
|
|
<div className="">
|
|
<Typography
|
|
fontWeightVariant="bold"
|
|
className="text-sm leading-6 min-w-max group-active:text-blue-600 group-focus:text-blue-600"
|
|
>
|
|
{t(title)}
|
|
</Typography>
|
|
</div>
|
|
<div className="max-w-max ">
|
|
<Typography
|
|
fontWeightVariant="normal"
|
|
className="text-xs text-gray-500 group-active:text-blue-600 group-focus:text-blue-600"
|
|
>
|
|
{count} {t("mainPage.article", {count: count}).toString()}
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CategoryCard;
|