From 965892818e9e0e4e95f349e4673920c090b4b7a5 Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Fri, 19 Aug 2022 13:29:05 +0300
Subject: [PATCH] added category card component
---
src/components/Cards/CategoryCard.tsx | 55 +++++++++++++++++++++++++++
1 file changed, 55 insertions(+)
create mode 100644 src/components/Cards/CategoryCard.tsx
diff --git a/src/components/Cards/CategoryCard.tsx b/src/components/Cards/CategoryCard.tsx
new file mode 100644
index 0000000..7690a9a
--- /dev/null
+++ b/src/components/Cards/CategoryCard.tsx
@@ -0,0 +1,55 @@
+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;