Merge pull request 'feature/all-card-components' (#86) from feature/all-card-components into develop
Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/86
This commit is contained in:
Denis Gorbunov
commit
f3b757937b
3
src/assets/svg/agricultural.svg
Normal file
3
src/assets/svg/agricultural.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5495 18.1523C20.0358 21.1083 21.1165 25.66 19.7396 29.9152H30.4102C31.4258 26.9366 34.4857 25.2281 37.9199 26.6722L39.1536 19.4836C39.362 18.2715 38.138 17.2497 36.8978 17.2497H30.0098V11.8372C30.0098 11.415 29.668 11.0636 29.2448 11.0442V8.24616H28.1901V11.0442C27.7767 11.0733 27.4479 11.4182 27.4479 11.834V17.2497H22.0703C23.099 12.4304 21.8978 10.7831 21.2044 5.88004C20.931 5.1773 20.3939 5.01934 19.7884 5H7.25586C6.6276 5.00645 6.19141 5.31591 5.96354 5.96063L5.11393 14.068L3.42122 16.0473C2.68229 16.8951 2.89714 16.6984 3.57747 17.7106C3.69466 17.6268 3.81185 17.543 3.93229 17.4656C7.49349 15.1576 13.1966 15.5734 16.5495 18.1523ZM29.0951 6.74397C29.1439 6.69561 29.222 6.69239 29.2741 6.74074C29.3229 6.7891 29.3262 6.86646 29.2773 6.91804C29.1829 7.01475 29.2188 7.15336 29.2513 7.28231C29.3099 7.50151 29.362 7.70137 29.0951 7.85288C29.0332 7.88834 28.9583 7.86578 28.9225 7.80775C28.8867 7.74973 28.9128 7.67236 28.9714 7.6369C29.069 7.5821 29.0397 7.46928 29.0072 7.34678C28.9583 7.15336 28.903 6.94383 29.0951 6.74397ZM28.3333 6.74397C28.3822 6.69561 28.4603 6.69239 28.5124 6.74074C28.5612 6.7891 28.5645 6.86646 28.5156 6.91804C28.4212 7.01475 28.457 7.15336 28.4896 7.28231C28.5482 7.50151 28.6003 7.70137 28.3333 7.85288C28.2715 7.88834 28.1966 7.86578 28.1608 7.80775C28.125 7.7465 28.1478 7.67236 28.2064 7.6369C28.304 7.5821 28.2747 7.46928 28.2422 7.34678C28.1934 7.15336 28.138 6.94383 28.3333 6.74397ZM14.4694 7.68203V13.6618C15.8659 13.9745 17.2461 14.4032 18.6035 14.9512C19.3132 15.2381 20.1497 14.313 20 13.5683L19.0885 9.06173C18.9388 8.31708 18.4603 7.67881 17.6921 7.67881H14.4694V7.68203ZM13.0827 13.3878V7.68203H9.63216C8.86393 7.68203 8.41146 8.32353 8.23568 9.06496L7.63021 11.6503C7.45768 12.3917 8.25846 13.0203 9.02669 13.0332C10.3939 13.0461 11.7448 13.1654 13.0827 13.3878ZM35.7585 27.2428C38.099 27.2428 40 29.1222 40 31.4432C40 33.7609 38.1022 35.6403 35.7585 35.6403C33.4147 35.6403 31.5202 33.7609 31.5202 31.4432C31.5202 29.1222 33.418 27.2428 35.7585 27.2428ZM9.05925 17.8267C14.0625 17.8267 18.1185 21.8433 18.1185 26.798C18.1185 31.7526 14.0625 35.7692 9.05925 35.7692C4.05599 35.7692 0 31.7526 0 26.798C0 21.8433 4.05599 17.8267 9.05925 17.8267ZM9.05925 21.9755C11.748 21.9755 13.929 24.1353 13.929 26.798C13.929 29.4607 11.748 31.6205 9.05925 31.6205C6.37044 31.6205 4.18945 29.4607 4.18945 26.798C4.18945 24.1353 6.37044 21.9755 9.05925 21.9755ZM35.7585 29.3124C36.9466 29.3124 37.9069 30.2666 37.9069 31.4399C37.9069 32.6166 36.9434 33.5675 35.7585 33.5675C34.5703 33.5675 33.61 32.6133 33.61 31.4399C33.61 30.2666 34.5736 29.3124 35.7585 29.3124ZM29.4564 19.8737H34.8112L34.6908 20.4862H29.3522L29.4564 19.8737ZM27.5781 23.1746H34.8112L34.6908 23.7871H27.4707L27.5781 23.1746ZM28.2454 21.5242H34.8145L34.694 22.1366H28.138L28.2454 21.5242Z" fill="#8C8C8C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
3
src/assets/svg/fundomental.svg
Normal file
3
src/assets/svg/fundomental.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
10
src/assets/svg/humanitarian.svg
Normal file
10
src/assets/svg/humanitarian.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.8 KiB |
10
src/assets/svg/medicine.svg
Normal file
10
src/assets/svg/medicine.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_22_4699)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3027 20.5378C27.0006 19.6363 28.0276 19.0479 29.1589 18.9015C30.2901 18.7552 31.4332 19.0628 32.3379 19.7571C33.2409 20.4539 33.8303 21.4802 33.9768 22.6107C34.1233 23.7413 33.8149 24.8838 33.1193 25.7874C30.1398 29.6467 27.1603 33.4712 24.1777 37.3369C23.4852 38.2341 22.4647 38.8199 21.3402 38.9657C20.2158 39.1115 19.0794 38.8054 18.1807 38.1145C17.2849 37.4211 16.7003 36.4016 16.5544 35.2788C16.4086 34.156 16.7135 33.0212 17.4024 32.1223C20.3851 28.2502 23.3169 24.4099 26.2964 20.5378H26.3027ZM7.40947 27.0093H18.7556L19.9499 25.4573C21.3698 23.6038 22.7864 21.7598 24.6891 19.2905C25.1615 18.6793 25.7431 18.1606 26.4044 17.7607V13.511C26.4361 10.9307 25.1084 8.07422 23.7108 6.21118L23.2661 5.61451H24.0252C24.4465 5.61451 24.8504 5.44731 25.1483 5.14971C25.4461 4.8521 25.6134 4.44847 25.6134 4.02759V1.58692C25.6093 1.16732 25.4406 0.766082 25.1437 0.46937C24.8467 0.172657 24.4452 0.00413754 24.0252 3.30446e-06H8.55932C8.13608 -0.00085484 7.72965 0.165459 7.42859 0.462705C7.12754 0.759951 6.95625 1.16404 6.95206 1.58692V4.01172C6.95206 4.4326 7.11939 4.83624 7.41724 5.13384C7.71508 5.43144 8.11905 5.59864 8.54027 5.59864H9.12472C8.96273 5.8208 8.80708 6.03662 8.63873 6.25244C7.0283 8.42969 5.83715 11.2163 6.0182 14.0537V31.5098C6.00916 32.1551 6.24918 32.7791 6.68842 33.2522C7.12041 33.6711 7.74934 33.887 8.61332 33.8616H14.531C14.5668 33.596 14.6198 33.3331 14.6898 33.0745C14.7427 32.8744 14.8063 32.6774 14.8804 32.4841H8.96908C8.55495 32.5135 8.14605 32.3777 7.83193 32.1064C7.60567 31.8633 7.46706 31.5517 7.43805 31.221C7.43805 31.1511 7.40947 27.0125 7.40947 27.0125V27.0093ZM15.3028 15.9707H17.1166C17.28 15.9707 17.4367 16.0356 17.5523 16.151C17.6679 16.2665 17.7328 16.4231 17.7328 16.5864V18.6558H19.8038C19.9667 18.6558 20.1229 18.7202 20.2384 18.835C20.3539 18.9498 20.4192 19.1056 20.42 19.2683V21.0774C20.42 21.2407 20.3551 21.3973 20.2395 21.5128C20.124 21.6282 19.9672 21.6931 19.8038 21.6931H17.7264V23.7625C17.7256 23.9241 17.6612 24.079 17.5471 24.1936C17.433 24.3082 17.2783 24.3733 17.1166 24.375H15.3028C15.1399 24.375 14.9837 24.3106 14.8682 24.1958C14.7527 24.081 14.6874 23.9252 14.6866 23.7625V21.6931H12.6156C12.4527 21.6923 12.2968 21.627 12.1819 21.5117C12.067 21.3963 12.0025 21.2401 12.0025 21.0774V19.2683C12.0034 19.1061 12.0682 18.9508 12.183 18.8361C12.2978 18.7214 12.4533 18.6566 12.6156 18.6558H14.6866V16.5864C14.6866 16.4231 14.7515 16.2665 14.8671 16.151C14.9827 16.0356 15.1394 15.9707 15.3028 15.9707ZM24.9019 13.3301H7.52064C7.52064 12.6731 7.47935 13.3586 7.54923 12.7461C7.87798 10.5869 8.71277 8.53587 9.98553 6.76026C10.2428 6.41748 10.5065 6.05884 10.7796 5.67481H21.6143C21.8558 6.01123 22.1162 6.35718 22.3735 6.70313C23.5456 8.2583 24.6605 10.8291 24.867 12.7683C24.8892 12.9587 24.9019 13.3364 24.9019 13.3364V13.3301ZM27.2175 31.8081L22.0559 27.8408L18.3204 32.6904C17.7956 33.3752 17.5635 34.2396 17.6748 35.0949C17.7861 35.9501 18.2318 36.7266 18.9144 37.2544C19.5995 37.7736 20.4619 38.0022 21.3145 37.8905C22.1671 37.7788 22.9413 37.3359 23.4694 36.6577L27.2175 31.8145V31.8081Z" fill="#8C8C8C"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_22_4699">
|
||||
<rect width="40" height="40" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
3
src/assets/svg/socials.svg
Normal file
3
src/assets/svg/socials.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.3 KiB |
3
src/assets/svg/technics-and-techology.svg
Normal file
3
src/assets/svg/technics-and-techology.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.8 KiB |
55
src/components/Cards/CategoryCard.tsx
Normal file
55
src/components/Cards/CategoryCard.tsx
Normal file
@ -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;
|
||||
@ -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";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user