163 lines
7.4 KiB
JavaScript
163 lines
7.4 KiB
JavaScript
import React from "react";
|
||
import { IconButton, SvgIcon } from "@mui/material";
|
||
import { Link } from "react-router-dom";
|
||
import styles from "./MapButtons.module.css";
|
||
|
||
const MapButtons = () => {
|
||
return (
|
||
<div className={styles["content-wrapper"]}>
|
||
<div className={styles["title-wrapper"]}>
|
||
<img
|
||
className={styles["detective-dog"]}
|
||
src="./Imgs/detective_dog.svg"
|
||
alt="deco"
|
||
></img>
|
||
<div className={styles["content"]}>
|
||
<div className={styles["title"]}>有狗狗貓貓走失咗? 搵禾哋報料 ⬇️</div>
|
||
<div className={styles["button-container"]}>
|
||
<Link
|
||
to={
|
||
"https://docs.google.com/forms/d/e/1FAIpQLScomQJmP_29GITVpcB5ipMJGoQhDMGBElZc-WtsRhrLRC2tbw/viewform?usp=sharing"
|
||
}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={{ textDecoration: "none" }}
|
||
>
|
||
<IconButton id={styles["found-pet"]}>
|
||
<SvgIcon
|
||
id={styles["icon"]}
|
||
height="512pt"
|
||
viewBox="0 0 512 512.00042"
|
||
width="512pt"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="m190.691406 375.855469v-7.390625c0-16.484375 6.679688-32.613282 18.328125-44.257813l24.347657-24.332031-21.242188-21.242188-24.332031 24.347657c-11.644531 11.648437-27.773438 18.328125-44.257813 18.328125h-7.390625c-33.59375 0-54.046875 20.316406-54.617187 20.941406l-64.910156 67.238281c-23.386719 24.070313-21.3125 61.855469 1.355468 84.539063 22.683594 22.667968 60.46875 24.742187 84.535156 1.355468l67.242188-64.910156c.625-.570312 20.941406-21.027344 20.941406-54.617187zm0 0"
|
||
fill="#3dc6ff"
|
||
/>
|
||
<path
|
||
d="m336.332031 351.332031c-96.863281 0-175.664062-78.804687-175.664062-175.664062 0-96.863281 78.800781-175.667969 175.664062-175.667969s175.667969 78.804688 175.667969 175.667969c0 96.859375-78.804688 175.664062-175.667969 175.664062zm0 0"
|
||
fill="#8bddff"
|
||
/>
|
||
<path
|
||
d="m336.332031 30c-80.320312 0-145.664062 65.347656-145.664062 145.667969 0 80.320312 65.34375 145.664062 145.664062 145.664062 80.320313 0 145.667969-65.34375 145.667969-145.664062 0-80.320313-65.347656-145.667969-145.667969-145.667969zm0 0"
|
||
fill="#f3eee9"
|
||
/>
|
||
<g fill-rule="evenodd">
|
||
<path
|
||
d="m304.199219 96.402344c8.28125 0 15 6.71875 15 15 0 8.273437-6.71875 15-15 15s-15-6.726563-15-15c0-8.28125 6.71875-15 15-15zm0 0"
|
||
fill="#db8a53"
|
||
/>
|
||
<path
|
||
d="m256 136.570312c8.28125 0 15 6.71875 15 15 0 8.273438-6.71875 15-15 15s-15-6.726562-15-15c0-8.28125 6.71875-15 15-15zm0 0"
|
||
fill="#db8a53"
|
||
/>
|
||
<path
|
||
d="m416.664062 136.570312c8.28125 0 15 6.71875 15 15 0 8.273438-6.71875 15-15 15-8.277343 0-15-6.726562-15-15 0-8.28125 6.722657-15 15-15zm0 0"
|
||
fill="#db8a53"
|
||
/>
|
||
<path
|
||
d="m368.464844 96.402344c8.28125 0 15 6.71875 15 15 0 8.273437-6.71875 15-15 15-8.277344 0-15-6.726563-15-15 0-8.28125 6.722656-15 15-15zm0 0"
|
||
fill="#db8a53"
|
||
/>
|
||
</g>
|
||
<path
|
||
d="m352.398438 254.9375h-32.132813c-26.449219 0-47.132813-21.554688-47.132813-47.132812 0-34.851563 28.351563-63.203126 63.199219-63.203126 34.847657 0 63.199219 28.351563 63.199219 63.203126 0 25.597656-20.695312 47.132812-47.132812 47.132812zm0 0"
|
||
fill="#db8a53"
|
||
/>
|
||
</SvgIcon>
|
||
發現疑似走失寵物
|
||
</IconButton>
|
||
</Link>
|
||
<Link
|
||
to={
|
||
"https://docs.google.com/forms/d/e/1FAIpQLScu0EI6U7zWtdvCJNvBkK5Fy1hF3S6RO7fNGEB0-b9pxUUhkg/viewform?usp=sharing"
|
||
}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
style={{ textDecoration: "none" }}
|
||
>
|
||
<IconButton id={styles["lost-pet"]}>
|
||
<SvgIcon
|
||
id={styles["icon"]}
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
x="0px"
|
||
y="0px"
|
||
viewBox="0 0 512 512"
|
||
>
|
||
<style type="text/css"></style>
|
||
|
||
<g>
|
||
<path
|
||
class="st0"
|
||
d="M289.4,197.1h32.6v124h-32.6V197.1z"
|
||
fill="#7A6D79"
|
||
/>
|
||
<path
|
||
class="st1"
|
||
d="M179.1,217V17.5c0-5.5,4.5-10,10-10h233.1c5.5,0,10,4.5,10,10V217c0,5.5-4.5,10-10,10H189.1
|
||
C183.6,227,179.1,222.5,179.1,217z"
|
||
fill="#EFEDEF"
|
||
/>
|
||
<g>
|
||
<ellipse
|
||
class="st2"
|
||
cx="305.6"
|
||
cy="66.7"
|
||
rx="14.6"
|
||
ry="14.6"
|
||
/>
|
||
<ellipse
|
||
class="st2"
|
||
cx="356.9"
|
||
cy="90.5"
|
||
rx="14.6"
|
||
ry="14.6"
|
||
/>
|
||
<ellipse
|
||
class="st2"
|
||
cx="254.3"
|
||
cy="90.5"
|
||
rx="14.6"
|
||
ry="14.6"
|
||
/>
|
||
<path
|
||
class="st2"
|
||
d="M338.9,135.2c-3-1.1-5.4-3.5-6.9-6.4c-4.8-9.7-14.8-16.3-26.3-16.3s-21.5,6.6-26.3,16.3
|
||
c-1.4,2.9-3.8,5.2-6.9,6.4c-8.8,3.3-15.1,11.8-15.1,21.8c0,12.8,10.4,23.3,23.3,23.3h50.2c12.8,0,23.3-10.4,23.3-23.3
|
||
C354,147,347.7,138.5,338.9,135.2L338.9,135.2z"
|
||
fill="#E19974"
|
||
/>
|
||
</g>
|
||
<path
|
||
class="st3"
|
||
d="M350.2,342.1c2.4-2.6,3.8-6.1,3.8-10c0-3.8-1.4-7.3-3.8-10c-1.7-1.9-1.6-4.7,0.1-6.7c2.4-2.8,3.8-6.4,3.7-10.4
|
||
c-0.3-8.1-7.3-14.4-15.4-14.4h-49.2v-30.4h-13.9c-12.1,0-22.9,7.8-26.7,19.3l-7.9,24.2c-1.8,5.6-5.2,10.5-9.7,14.3l-92.5,77.6
|
||
l47.5,56.7l58-48.6c2.9-2.4,6.5-3.7,10.2-3.7h76.1c8.1,0,15.2-6.6,15.4-14.7c0-2.5-0.5-4.9-1.6-7c-1.2-2.4-0.3-5.3,2.1-6.7
|
||
c4.6-2.6,7.7-7.4,7.7-13.1c0-3.8-1.4-7.3-3.8-10C348.5,346.8,348.5,344,350.2,342.1L350.2,342.1z"
|
||
fill="#FFCEBF"
|
||
/>
|
||
<path
|
||
class="st4"
|
||
d="M79.9,431.7l76-63.8l61.1,72.8l-76,63.8L79.9,431.7z"
|
||
fill="#5F99D7"
|
||
/>
|
||
<path
|
||
class="st5"
|
||
d="M166,353.5l66.9,79.7c3.6,4.3,3,10.6-1.2,14.2l-10.7,9c-4.3,3.6-10.6,3-14.2-1.2l-66.9-79.7
|
||
c-3.6-4.3-3-10.6,1.2-14.2l10.7-9C156,348.7,162.4,349.2,166,353.5z"
|
||
fill="#5DE1C4"
|
||
/>
|
||
</g>
|
||
</SvgIcon>
|
||
主子唔見咗
|
||
</IconButton>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
export default MapButtons;
|