56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
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 { JsxElement } from "typescript";
|
|
|
|
type Props = {
|
|
count?: number;
|
|
title: string;
|
|
|
|
iconChild: Required<JSX.Element>;
|
|
} & Omit<React.ComponentPropsWithoutRef<"div">, "">;
|
|
|
|
function CategoryCard({ count, title, iconChild, className, ...props }: Props) {
|
|
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"
|
|
>
|
|
{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} Items
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CategoryCard;
|