diff --git a/package.json b/package.json index 20eb59a..0f3483d 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "jest-circus": "26.6.0", "jest-resolve": "26.6.0", "jest-watch-typeahead": "0.6.1", + "mapir-react-component": "^2.0.1", "mini-css-extract-plugin": "0.11.3", "optimize-css-assets-webpack-plugin": "5.0.4", "pnp-webpack-plugin": "1.6.4", diff --git a/src/assets/icons/location-marker.png b/src/assets/icons/location-marker.png new file mode 100644 index 0000000..021ed01 Binary files /dev/null and b/src/assets/icons/location-marker.png differ diff --git a/src/components/Input/index.js b/src/components/Input/index.js index 3c732f8..4872881 100644 --- a/src/components/Input/index.js +++ b/src/components/Input/index.js @@ -29,7 +29,7 @@ export default function FormPropsTextFields(props) { name={props.name} label={props.label} variant={variant || "outlined"} - onChange={(e) => onChange(e.target.name, e.target.value)} + onChange={(e) => onChange(e)} defaultValue={defaultValue[props.name] || ""} inputProps={{ maxLength }} onInput={ diff --git a/src/components/Location/index.scss b/src/components/Location/index.scss new file mode 100644 index 0000000..68244dc --- /dev/null +++ b/src/components/Location/index.scss @@ -0,0 +1,20 @@ +.mapboxgl-map{ + width: 100% !important; + height: 100% !important; + border-radius: 20px !important; + .marker{ + width: 20px; + height: 20px; + transform : translate(0px, 0px) !important; + display: inline; + } + canvas{ + border-radius: 20px !important; + width : 100% !important; + height : 100% !important; + } +} + +.mapboxgl-control-container{ + display: none !important; +} \ No newline at end of file diff --git a/src/components/Location/index.tsx b/src/components/Location/index.tsx new file mode 100644 index 0000000..d089c51 --- /dev/null +++ b/src/components/Location/index.tsx @@ -0,0 +1,39 @@ +import Mapir from "mapir-react-component"; + +import blueMark from '../../assets/icons/location-marker.png'; + +import './index.scss'; + +const Map = Mapir.setToken({ + transformRequest: (url : string) => { + return { + url: url, + headers: { + "x-api-key": + "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIn0.eyJhdWQiOiIxNDc1OSIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIiwiaWF0IjoxNjI1NjY2NzI2LCJuYmYiOjE2MjU2NjY3MjYsImV4cCI6MTYyODI1ODcyNiwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.OIjSLWyNCGALY2C0EFDGPEEUbPqOxL6GxCDkeX1B5C218eTk0qkmlGs8z4E87Y-qL7_PG814UZwcngjdRybVwabMtgfHsJj7DRDtrdBzCW7HRlJXqrSRG7xOuJmFhcn4-HtXRQUOEUn8quQukXPek8zvMtRBoMNsefS5s6es2oAg7Fmv0o5T2uZyDzMnRAfrTb1SKtv52Q_yXWYPtQNZdZcwe9Ed-ZkGeAXuTY2tafow92Oq8mmRxrzaq9Ne3gtu98UqXA3rwzRaQ1ToXU_Tcjh5UCVS6hZAzhI-GQk7KfrLbOOyDCxfd9v7_qXnIkRR6dd3bZ69H-jvlytaxMl51Q", //Mapir api key + "Mapir-SDK": "reactjs", + }, + }; + }, +}); + +export default function location() { + return ( + + + + ); +} diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx new file mode 100644 index 0000000..b9273f4 --- /dev/null +++ b/src/components/Select/index.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import { makeStyles, withStyles } from "@mui/styles"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; +import InputBase from "@mui/material/InputBase"; +import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; +import InputLabel from "@mui/material/InputLabel"; + +const BootstrapInput = withStyles((theme) => ({}))(InputBase); + +const useStyles = makeStyles((theme) => ({ + marginLeft: { + // margin: theme.spacing(1), + marginLeft: 8, + }, +})); + +export default function CustomizedSelects({options, selectedOptions, name, label, onChange} : any) { + const classes = useStyles(); + return ( + <> + {window.innerWidth > 1000 ? ( +
+ + + {label} + + + + +
+ ) : null} + + ); +} diff --git a/src/components/Textarea/index.scss b/src/components/Textarea/index.scss new file mode 100644 index 0000000..8c80231 --- /dev/null +++ b/src/components/Textarea/index.scss @@ -0,0 +1,37 @@ +.custom-textarea{ + width: 100%; + padding: 10px 12px; + color: white; + border-radius: 10px; + border: 1px solid #707070; + background-color: #272727; + margin-top: 10px; + &::placeholder{ + color: #a2a2a2; + } + &:focus{ + border: 1px solid #84DE56; + outline: none; + &::placeholder{ + color: #84DE56; + } + } +} + +@media screen and (min-width: 1441px){ + .custom-textarea{ + font-size: 20px; + &::placeholder{ + font-size: 20px; + } + } +} + +@media screen and (min-width: 1008px) and (max-width: 1440px) { + .custom-textarea{ + font-size: calc(100vw / 72); + &::placeholder{ + font-size: calc(100vw / 72); + } + } +} \ No newline at end of file diff --git a/src/components/Textarea/index.tsx b/src/components/Textarea/index.tsx new file mode 100644 index 0000000..f511129 --- /dev/null +++ b/src/components/Textarea/index.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import './index.scss'; + +export default function Textarea({placeholder} : any) { + return ( + <> +