diff --git a/src/assets/svg/agricultural.svg b/src/assets/svg/agricultural.svg new file mode 100644 index 0000000..5fc8d1f --- /dev/null +++ b/src/assets/svg/agricultural.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/fundomental.svg b/src/assets/svg/fundomental.svg new file mode 100644 index 0000000..981ee00 --- /dev/null +++ b/src/assets/svg/fundomental.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/humanitarian.svg b/src/assets/svg/humanitarian.svg new file mode 100644 index 0000000..c6447b4 --- /dev/null +++ b/src/assets/svg/humanitarian.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svg/medicine.svg b/src/assets/svg/medicine.svg new file mode 100644 index 0000000..8c88b83 --- /dev/null +++ b/src/assets/svg/medicine.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svg/socials.svg b/src/assets/svg/socials.svg new file mode 100644 index 0000000..6dc6b17 --- /dev/null +++ b/src/assets/svg/socials.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/technics-and-techology.svg b/src/assets/svg/technics-and-techology.svg new file mode 100644 index 0000000..bf63908 --- /dev/null +++ b/src/assets/svg/technics-and-techology.svg @@ -0,0 +1,3 @@ + + + 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; +} & Omit, "">; + +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 ( +
+ +
+ ); +} + +export default CategoryCard; diff --git a/src/components/icons.tsx b/src/components/icons.tsx index e480c84..f17c0d9 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -2,7 +2,6 @@ export { ReactComponent as SVGArrowBigRight } from "assets/svg/arrow-big-right.s export { ReactComponent as SVGArrowDown } from "assets/svg/arrow-down.svg"; export { ReactComponent as SVGArrowLeft } from "assets/svg/arrow-left.svg"; export { ReactComponent as SVGArrowRight } from "assets/svg/arrow-right.svg"; -export { ReactComponent as SVGBookmark } from "assets/svg/bookmark.svg"; export { ReactComponent as SVGCaretDown } from "assets/svg/caret-down.svg"; export { ReactComponent as SVGCaretLeft } from "assets/svg/caret-left.svg"; export { ReactComponent as SVGCaretRight } from "assets/svg/caret-right.svg"; @@ -17,7 +16,6 @@ export { ReactComponent as SVGEdit1 } from "assets/svg/edit1.svg"; export { ReactComponent as SVGEdit2 } from "assets/svg/edit2.svg"; export { ReactComponent as SVGError } from "assets/svg/error.svg"; export { ReactComponent as SVGEye } from "assets/svg/eye.svg"; -export { ReactComponent as SVGFavorite } from "assets/svg/favorite.svg"; export { ReactComponent as SVGFiletext } from "assets/svg/filetext.svg"; export { ReactComponent as SVGFolder } from "assets/svg/folder.svg"; export { ReactComponent as SVGKey } from "assets/svg/key.svg"; @@ -30,7 +28,6 @@ export { ReactComponent as SVGSearch } from "assets/svg/search.svg"; export { ReactComponent as SVGShare } from "assets/svg/share.svg"; export { ReactComponent as SVGUser } from "assets/svg/user.svg"; export { ReactComponent as SVGXMark } from "assets/svg/xmark.svg"; -export { ReactComponent as SVGCheckmark } from "assets/svg/checkmark.svg"; export { ReactComponent as SVGArrowUp } from "assets/svg/arrow-up.svg"; export { ReactComponent as SVGBellNotification } from "assets/svg/bell-notification.svg"; export { ReactComponent as SVGBell } from "assets/svg/bell.svg"; @@ -63,3 +60,12 @@ export { ReactComponent as SVGSmile } from "assets/svg/smile.svg"; export { ReactComponent as SVGTable } from "assets/svg/table.svg"; export { ReactComponent as SVGVertical } from "assets/svg/vertical.svg"; export { ReactComponent as SVGVideo } from "assets/svg/video.svg"; +export { ReactComponent as SVGFacebook } from "assets/svg/facebook.svg"; +export { ReactComponent as SVGInstagram } from "assets/svg/instagram.svg"; +export { ReactComponent as SVGSelectArrow } from "assets/svg/select-arrow.svg"; +export { ReactComponent as SVGAgricultural } from "assets/svg/agricultural.svg"; +export { ReactComponent as SVGFundomental } from "assets/svg/fundomental.svg"; +export { ReactComponent as SVGHumanitarian } from "assets/svg/humanitarian.svg"; +export { ReactComponent as SVGMedicine } from "assets/svg/medicine.svg"; +export { ReactComponent as SVGSocials } from "assets/svg/socials.svg"; +export { ReactComponent as SVGTechnicsAndTechology } from "assets/svg/technics-and-techology.svg";