From 25cd80511af7235f64fe2f51350a19e296681113 Mon Sep 17 00:00:00 2001 From: RezaAshrafi77 Date: Fri, 1 Oct 2021 12:55:04 +0330 Subject: [PATCH] reza completed desktop contact --- package.json | 1 + src/assets/icons/location-marker.png | Bin 0 -> 1244 bytes src/components/Input/index.js | 2 +- src/components/Location/index.scss | 20 ++ src/components/Location/index.tsx | 39 ++++ src/components/Select/index.tsx | 55 +++++ src/components/Textarea/index.scss | 37 +++ src/components/Textarea/index.tsx | 10 + src/custom.scss | 74 +++++- src/redux/reducers/public.tsx | 33 ++- src/types/comp.d.ts | 3 +- src/views/Contact/index.scss | 157 ++++++++++++- src/views/Contact/index.tsx | 40 +++- yarn.lock | 325 ++++++++++++++++++++++++++- 14 files changed, 783 insertions(+), 13 deletions(-) create mode 100644 src/assets/icons/location-marker.png create mode 100644 src/components/Location/index.scss create mode 100644 src/components/Location/index.tsx create mode 100644 src/components/Select/index.tsx create mode 100644 src/components/Textarea/index.scss create mode 100644 src/components/Textarea/index.tsx 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 0000000000000000000000000000000000000000..021ed017bac64e324ea888d950a3e27f7695f184 GIT binary patch literal 1244 zcmV<21S9*2P)&HI*DR;E?q)YqS^W*h>e?H&O_jw)z6J!|^gcJWU(Dip*iJ?hzVE9V8Lf3+jfe$~! z7(R%ncYQk^Rm)w`NbOyKZzz#liIR@95l?wqS#C_+o zQ|9jt8mYONN6t44D&LSSllTA44Ev^+i3HRXeOaf<;4dl1l%mTV^Tg4wRNZ(G&`DtqSwY$5K8B`dZHZ`H$+NKX0sSR@3 zqcYG~T?ow;3mpXoSZ44K$EAMuJgndi^q)A6z_vE@pB(TGMbv|kwNxK8YR0)YJ)2x8 zxncejXzP0!U3<4*kVCYB)!2o7>4OaWlx)wZxlc#>W{l-t`e;B%GubP8=E)tfj;2uG z`;4nub~8)Z=KVuSnX0$3s(aKyJI$+M8^3x*HA^cIZ`|ON)sh?>3idg@8cuf0Kp$Yx zt?HmJ&btw33cvS?npJAr#>LXZV)2H=GI>*;%f?Ey$JeWacA7V_q6fT!*3YU!?~>yd$q|Al%j75Bg_^N(Jm zV!p=qf22_Evl)ms^JrS;md_nDY+j0Dq*>L=RbcbBF^mNW_Vww5jvOd4p&!f}LKZ+g zJ%uds2J5>1CC{VO%BTIM+(8{xP3}`e^y@`hbR1Jom0|hbq5MEQs>Cuo{egLP?kKP{u4zVRQPn%)WGNal#>+Z1xwV%CGXOSp$F?Dl)7K+y@(PanJfR6TZRaeniv9G0zRuX@kH*_TI|B ztCSKGt>toum2Af_${o~c15 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 ( + <> +