Reza_ashrafi
3 years ago
parent
133361b9e0
commit
32a2a7e0c9
21 changed files with 556 additions and 148 deletions
@ -0,0 +1,49 @@ |
||||
import React from "react"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
export const Dialog = ({ dialog }) => { |
||||
const { text, type, setOpen, accept, bg, color } = dialog; |
||||
return ( |
||||
<div |
||||
className="z-50 w-screen h-full fixed top-0 right-0 backdrop-filter blur-sm flex justify-center items-center" |
||||
onClick={() => setOpen(false)} |
||||
> |
||||
<div className={`flex flex-col items-center ${bg} backdrop-filter backdrop-blur-xl rounded-md p-5 shadow-2xl`} style={{minWidth: 300}}> |
||||
{/* {type === "confirm" && ( |
||||
<div className="w-full flex justify-end text-sm text-bla">exit</div> |
||||
)} */} |
||||
<p className={`text-tiny ${color} w-full mb-8 leading-7`}>{text}</p> |
||||
{type === "confirm" && ( |
||||
<div className="flex flex-row gap-4 w-full"> |
||||
<button |
||||
className="py-2.5 w-1/2 shadow-md rounded-sm bg-blueC0 text-white" |
||||
onClick={() => accept()} |
||||
> |
||||
باشه |
||||
</button> |
||||
<button |
||||
className="py-2.5 w-1/2 shadow-md rounded-sm bg-redFF1 text-white" |
||||
onClick={() => setOpen(false)} |
||||
> |
||||
بیخیال |
||||
</button> |
||||
</div> |
||||
)} |
||||
{type === "alert" && ( |
||||
<div className="flex flex-row gap-4 w-full"> |
||||
<button |
||||
className="py-2.5 w-full shadow-md rounded-sm bg-blueC0 text-white" |
||||
onClick={() => setOpen(false)} |
||||
> |
||||
باشه |
||||
</button> |
||||
</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const mapStateToProps = (state) => ({}); |
||||
|
||||
export default connect(mapStateToProps)(Dialog); |
||||
@ -0,0 +1,43 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import "./index.scss"; |
||||
|
||||
function Loading({ size, color }) { |
||||
const [dots, setDots] = useState({}); |
||||
|
||||
useEffect(() => { |
||||
setTimeout(() => { |
||||
setDots({ ...dots, one: true }); |
||||
}, 50); |
||||
setTimeout(() => { |
||||
setDots({ ...dots, one : true, two: true }); |
||||
}, 500); |
||||
setTimeout(() => { |
||||
setDots({ ...dots, one : true, two: true, three: true }); |
||||
}, 950); |
||||
}, []); |
||||
return ( |
||||
<div className="flex items-center gap-0.5"> |
||||
<span |
||||
className={`w-${size} h-${size} rounded-full ${color} ${ |
||||
dots?.one ? "loading-animation" : "" |
||||
}`}
|
||||
></span> |
||||
<span |
||||
className={`w-${size} h-${size} rounded-full ${color} ${ |
||||
dots?.two ? "loading-animation" : "" |
||||
}`}
|
||||
></span> |
||||
<span |
||||
className={`w-${size} h-${size} rounded-full ${color} ${ |
||||
dots?.three ? "loading-animation" : "" |
||||
}`}
|
||||
></span> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default Loading; |
||||
|
||||
Loading.defaultProps = { |
||||
size: 2, |
||||
}; |
||||
@ -0,0 +1,12 @@ |
||||
.loading-animation{ |
||||
animation: loading 0.6s infinite; |
||||
} |
||||
|
||||
@keyframes loading{ |
||||
0%{ |
||||
opacity: 0.5; |
||||
} |
||||
100%{ |
||||
opacity: 1; |
||||
} |
||||
} |
||||
@ -0,0 +1,49 @@ |
||||
import React, { useState } from "react"; |
||||
import Mapir from "mapir-react-component"; |
||||
|
||||
|
||||
|
||||
const X_API_KEY = "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIn0.eyJhdWQiOiIxNjk2MSIsImp0aSI6IjkyODE4ODI0N2FhMjdlYTMyMzVlYzRiOWUxZDI3NTQyZTNjYmI3ZjQzY2Q2NGQzYjdkYjU1NmY3NDM5YzU2NzUyNzMxMjAzYzMwOTliYTFiIiwiaWF0IjoxNjQ0MzE3MDA5LCJuYmYiOjE2NDQzMTcwMDksImV4cCI6MTY0NjgyMjYwOSwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.Gckmd77Vw-wmsaztsmVmjYmfp4zXRSy2f0tXS-1p7IY8VJmvCCrk64y7WvCLbH0YfGZI9rG9ZUi5hRJDDGXu70l1ZafCYq2-EkMzcbx-PGTTq2bHGNZujF4ur1xtGoXd2kwGuldiR_6SJdqYLHcupbscFI7hHaQnkN1xWJ-L8476ZOKzUgiBvwH9uElGZXwD6SwfXoGW_R38_isrnfTXKfW9PPixyLaN3404tcjOU1r02HIurrplXlIKRKG9CVXxKsESfJJ8trwtZw6O4erxrnisxfL0VwAR7l69P6KcFb57vvM4j4hKFqxUDr4YvSq1qOTt3urYbAKehhvoiLhZxw"; |
||||
|
||||
|
||||
const Map = Mapir.setToken({ |
||||
transformRequest: (url) => { |
||||
return { |
||||
url: url, |
||||
headers: { |
||||
"x-api-key":X_API_KEY, |
||||
"Mapir-SDK": "reactjs", |
||||
}, |
||||
}; |
||||
}, |
||||
}); |
||||
|
||||
const ReverseMap = ({ setAddress }) => { |
||||
const [markerArray, setMarkerArray] = useState([]); |
||||
const [coord, setCoord] = useState([51.42, 35.72]); |
||||
function reverseFunction(map, e) { |
||||
let url = `https://map.ir/reverse/no?lat=${e.lngLat.lat}&lon=${e.lngLat.lng}`; |
||||
fetch(url, { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"x-api-key": X_API_KEY, |
||||
}, |
||||
}) |
||||
.then((response) => response.json()) |
||||
.then((data) => setAddress(data.address)); |
||||
const array = []; |
||||
array.push( |
||||
<Mapir.Marker |
||||
coordinates={[e.lngLat.lng, e.lngLat.lat]} |
||||
anchor="bottom" |
||||
/> |
||||
); |
||||
setMarkerArray(array); |
||||
} |
||||
return ( |
||||
<Mapir center={coord} Map={Map} onClick={reverseFunction}> |
||||
{markerArray} |
||||
</Mapir> |
||||
); |
||||
}; |
||||
export default ReverseMap; |
||||
Loading…
Reference in new issue