react-leaflet#Marker TypeScript Examples
The following examples show how to use
react-leaflet#Marker.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: draggable.marker.tsx From ui with GNU Affero General Public License v3.0 | 7 votes |
|
DraggableMarker: FC<Props> = (props) => {
const markerRef = useRef<L.Marker>(null)
const eventHandlers = useMemo(
() => ({
dragend() {
const marker = markerRef.current
if (marker != null) {
props.onChange(marker.getLatLng())
}
},
}),
[],
)
return (
<Marker
draggable={true}
eventHandlers={eventHandlers}
position={props.value}
ref={markerRef}
icon={L.icon({
iconUrl: require('assets/images/marker-icon-2x.png'),
iconSize: [50/2, 82/2],
iconAnchor: [50 / 4, 82/2],
})}
/>
)
}
Example #2
| Source File: Marker.tsx From metro-fare with MIT License | 6 votes |
|
FromToMarker = ({
position,
type,
}: {
position: LatLngTuple;
type: "from" | "to";
}) => {
const classes = useStyle();
const color = type === "from" ? classes.blue : classes.red;
const fromIcon = divIcon({
className: `fas fa-map-marker-alt ${classes.markerLayout} ${color}`,
});
return <Marker position={position} icon={fromIcon} />;
}
Example #3
| Source File: OrphanagesMap.tsx From NLW-3.0 with MIT License | 6 votes |
|
function OrphanagesMap() {
const [orphanages, setOrphanages] = useState<Orphanage[]>([]);
useEffect(() => {
api.get('orphanages').then(response => {
setOrphanages(response.data);
});
}, []);
return (
<div id="page-map">
<aside>
<header>
<img src={mapMarkerImg} alt="Happy" />
<h2>Escolha um orfanato no mapa</h2>
<p>Muitas crianças estão esperando a sua visita {':)'}</p>
</header>
<footer>
<strong>Meia Praia</strong>
<span>Santa Catarina</span>
</footer>
</aside>
<Map
center={[-27.1376523, -48.6087994]}
zoom={15}
style={{ width: '100%', height: '100%' }}
>
{/* <TileLayer url="https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" /> */}
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/>
{orphanages.map(orphanage => (
<Marker
key={orphanage.id}
icon={mapIcon}
position={[orphanage.latitude, orphanage.longitude]}
>
<Popup closeButton={false} minWidth={240} maxWidth={240} className="map-popup">
{orphanage.name}
<Link to={`/orphanages/${orphanage.id}`}>
<FiArrowRight size={20} color="#fff" />
</Link>
</Popup>
</Marker>
))}
</Map>
<Link to="/orphanages/create" className="create-orphanage">
<FiPlus size={32} color="#fff" />
</Link>
</div>
)
}
Example #4
| Source File: index.tsx From nlw-03-omnistack with MIT License | 6 votes |
|
export default function OrphanagesMap() {
return (
<div id="page-map">
<aside>
<header>
<img src={mapMarkerImg} alt="Happy" />
<h2>Escolha um orfanato no mapa</h2>
<p>Muitas crianças estão esperando a sua visita :)</p>
</header>
<footer>
<strong>Rio do Sul</strong>
<span>Santa Catarina</span>
</footer>
</aside>
<Map>
<Marker icon={happyMapIcon} position={[-27.2092052,-49.6401092]}>
<Popup closeButton={false} minWidth={240} maxWidth={240} className="map-popup">
Lar das meninas
<Link to={`/orphanages/1`}>
<FiArrowRight size={20} color="#fff" />
</Link>
</Popup>
</Marker>
</Map>
<Link to="/orphanages/create" className="create-orphanage">
<FiPlus size={32} color="#FFF" />
</Link>
</div>
);
}
Example #5
| Source File: BullseyeMarker.tsx From project-tauntaun with GNU Lesser General Public License v3.0 | 6 votes |
|
export function BullseyeMarkerNonMemo(props: MarkerProps) {
const icon = new Icon({
iconUrl: 'bullseye.png',
iconSize: [40, 40],
iconAnchor: [20, 20]
});
return <Marker {...omit(props, 'onadd', 'icon')} icon={icon} />;
}
Example #6
| Source File: SidcMarker.tsx From project-tauntaun with GNU Lesser General Public License v3.0 | 6 votes |
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export function SidcMarkerNonMemo(props: SidcMarkerProps) {
const { sidc, label } = props;
const symbol = new ms.Symbol(sidc, { size: 20 });
const anchor = symbol.getAnchor();
const icon = new Icon({
iconUrl: symbol.toDataURL(),
iconAnchor: [anchor.x, anchor.y]
});
return (
<Marker {...omit(props, 'onadd', 'icon')} icon={icon}>
{label && <Popup minWidth={100}>{label}</Popup>}
</Marker>
);
}
Example #7
| Source File: TextMarker.tsx From project-tauntaun with GNU Lesser General Public License v3.0 | 6 votes |
|
export function TextMarker(props: TextMarkerProps) {
const { text, position, color: colorProp, size: sizeProp, backgroundColor: backgroundColorProp } = props;
const color = colorProp ? colorProp : 'black';
const backgroundColor = backgroundColorProp ? backgroundColorProp : 'transparent';
const size = sizeProp ? `${sizeProp}px` : '12px';
return (
<Marker position={position} opacity={0}>
<Tooltip className="TextMarkerTooltip" direction="right" offset={[-20, 27]} permanent={true}>
<span className="TextMarkerText" style={{ color: color, backgroundColor: backgroundColor, fontSize: size }}>
{text}
</span>
</Tooltip>
</Marker>
);
}
Example #8
| Source File: SiteMarker.tsx From aqualink-app with MIT License | 6 votes |
|
/**
* All in one site marker with icon, offset duplicates, and popup built in.
*/
export default function SiteMarker({ site }: { site: Site }) {
const siteOnMap = useSelector(siteOnMapSelector);
const dispatch = useDispatch();
const { tempWeeklyAlert } = site.collectionData || {};
const markerIcon = useMarkerIcon(
hasDeployedSpotter(site),
site.hasHobo,
siteOnMap?.id === site.id,
alertColorFinder(tempWeeklyAlert),
alertIconFinder(tempWeeklyAlert)
);
if (site.polygon.type !== "Point") return null;
const [lng, lat] = site.polygon.coordinates;
return (
<>
{LNG_OFFSETS.map((offset) => {
return (
<Marker
onClick={() => {
dispatch(setSearchResult());
dispatch(setSiteOnMap(site));
}}
key={`${site.id}-${offset}`}
icon={markerIcon}
position={[lat, lng + offset]}
>
<Popup site={site} autoOpen={offset === 0} />
</Marker>
);
})}
</>
);
}
Example #9
| Source File: index.tsx From NextLevelWeek with MIT License | 5 votes |
|
OrphanagesMap: React.FC = () => {
const [orphanages, setOrphanages] = useState<IOpharnage[]>([]);
useEffect(() => {
api.get('/orphanages').then(res => {
// console.log(res.data);
setOrphanages(res.data);
});
}, []);
return (
<Container>
<SideBar>
<header>
<img src={mapMarkerImg} alt="" />
<h2>Escolha um orfanato no mapa</h2>
<p>Muitas crianças estão esperando a sua visita <span role="img" aria-label="happy">?</span></p>
</header>
<footer>
<strong>Natal</strong>
<span>Rio Grande do Norte</span>
</footer>
</SideBar>
<Map
center={[-5.8044209, -35.263095]}
zoom={12}
style={{ width: '100%', height: '100%' }}
>
<TileLayer url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`} />
{orphanages.map(orphanage => {
return (
<Marker
key={orphanage.id}
position={[orphanage.latitude, orphanage.longitude]}
icon={happyMapIcon}
>
<Popup closeButton={false} minWidth={240} maxHeight={240} className="map-popup">
{orphanage.name}
<Link to={`/orphanages/${orphanage.id}`}>
<FiArrowRight size={20} color="#fff" />
</Link>
</Popup>
</Marker>
);
})}
</Map>
<Link to="/orphanages/create">
<FiPlus size={32} color="#FFF" />
</Link>
</Container>
);
}
Example #10
| Source File: SchoolLocationMap.tsx From po8klasie with GNU General Public License v3.0 | 5 votes |
|
SchoolLocationMap: FC<SchoolLocationMapProps> = ({ position }) => (
<MapContainer center={position} zoom={13} className="w-full h-full rounded">
<TileLayer {...tileLayerProps} />
<Marker position={position} icon={marker} />
</MapContainer>
)
Example #11
| Source File: SchoolsMap.tsx From po8klasie with GNU General Public License v3.0 | 5 votes |
|
SchoolsMap: FC<SchoolsMapProps> = ({ results, onExpandToggle, isExpanded, hideExpandBtn }) => {
const [map, setMap] = useState<LeafletMap | null>(null);
const { searchView: searchViewConfig } = useProjectConfig();
const { mapOptions } = searchViewConfig as SearchViewConfig;
useEffect(() => {
setTimeout(() => {
if (map) map.invalidateSize();
}, 300);
}, [isExpanded, map]);
useEffect(() => {
if (map && results.length > 0) {
const lngLatExpressions = results.map((school) => parseCoords(school));
map.fitBounds(latLngBounds(lngLatExpressions));
}
}, [results, map]);
return (
<div className={isExpanded ? styles.mapWrapperExpanded : styles.mapWrapper}>
<MapContainer
className={styles.map}
zoomControl={false}
whenCreated={setMap}
fullscreenControl
{...mapOptions}
>
<TileLayer {...tileLayerProps} />
{results.map(({ latitude, longitude, name, id }) => {
if (!latitude || !longitude) return null;
return (
<Marker
position={{
lat: parseFloat(latitude),
lng: parseFloat(longitude),
}}
icon={marker}
key={id}
>
<Popup className={styles.markerPopup}>
<h4>{name}</h4>
</Popup>
</Marker>
);
})}
</MapContainer>
{
!hideExpandBtn && (
<button className={styles.mapExpandButton} onClick={onExpandToggle} type="button">
<BsChevronRight />
</button>
)
}
</div>
);
}
Example #12
| Source File: Map.tsx From aqualink-app with MIT License | 5 votes |
|
SiteMap = ({ polygon, classes }: SiteMapProps) => {
const mapRef = useRef<Map>(null);
const diveLocation = useSelector(diveLocationSelector);
const [markerLat, setMarkerLat] = useState<number | null>(null);
const [markerLng, setMarkerLng] = useState<number | null>(null);
const dispatch = useDispatch();
useEffect(() => {
const { current } = mapRef;
if (current && current.leafletElement) {
const map = current.leafletElement;
// Initialize map's position to fit the given polygon
if (polygon.type === "Polygon") {
map.fitBounds(L.polygon(polygon.coordinates).getBounds());
} else {
map.panTo(new L.LatLng(polygon.coordinates[1], polygon.coordinates[0]));
}
const zoom = map.getZoom();
if (zoom < Infinity) {
// User can't zoom out from the initial frame
map.setMinZoom(zoom);
} else {
map.setZoom(8);
map.setMinZoom(8);
}
}
}, [mapRef, polygon]);
useEffect(() => {
const { current } = mapRef;
if (current && current.leafletElement) {
const map = current.leafletElement;
map.on("click", (event: any) => {
setMarkerLat(event.latlng.lat);
setMarkerLng(event.latlng.lng);
dispatch(
setDiveLocation({
lat: event.latlng.lat,
lng: event.latlng.lng,
})
);
});
}
}, [dispatch]);
useEffect(() => {
if (polygon.type === "Point" && !diveLocation) {
setMarkerLat(polygon.coordinates[1]);
setMarkerLng(polygon.coordinates[0]);
dispatch(
setDiveLocation({
lat: polygon.coordinates[1],
lng: polygon.coordinates[0],
})
);
}
}, [polygon, diveLocation, dispatch]);
useEffect(() => {
if (diveLocation) {
setMarkerLat(diveLocation.lat);
setMarkerLng(diveLocation.lng);
}
}, [diveLocation]);
return (
<Map ref={mapRef} className={classes.map}>
<TileLayer url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" />
{markerLat && markerLng && (
<Marker icon={pinIcon} position={[markerLat, markerLng]} />
)}
</Map>
);
}
Example #13
| Source File: index.tsx From aqualink-app with MIT License | 5 votes |
|
LocationMap = ({
markerPositionLat,
markerPositionLng,
updateMarkerPosition,
classes,
}: LocationMapProps) => {
const [zoom, setZoom] = useState<number>(INITIAL_ZOOM);
const onZoomEnd = useCallback(
// eslint-disable-next-line no-underscore-dangle
(event: LeafletEvent) => setZoom(event.target._zoom as number),
[]
);
function updateLatLng(event: L.LeafletMouseEvent) {
const { lat, lng } = event.latlng.wrap();
updateMarkerPosition([lat, lng]);
}
function parseCoordinates(coord: string, defaultValue: number) {
const parsed = parseFloat(coord);
return Number.isNaN(parsed) ? defaultValue : parsed;
}
const markerPosition: L.LatLngTuple = [
parseCoordinates(markerPositionLat, 37.773972),
parseCoordinates(markerPositionLng, -122.431297),
];
return (
<Map
center={markerPosition}
zoom={zoom}
className={classes.map}
onclick={updateLatLng}
onzoomend={onZoomEnd}
maxBounds={mapConstants.MAX_BOUNDS}
maxBoundsViscosity={1.0}
minZoom={1}
>
<TileLayer url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" />
{markerPosition && <Marker icon={pinIcon} position={markerPosition} />}
</Map>
);
}
Example #14
| Source File: OrphanagesMap.tsx From happy with MIT License | 5 votes |
|
function OrphanagesMap() {
const [orphanages, setOrphaanges] = useState<Orphanage[]>([]);
useEffect(() => {
api.get("/orphanages").then(res => {
setOrphaanges(res.data);
});
}, []);
return (
<div id="page-map">
<aside>
<header>
<img src={mapMakerImg} alt="Logo da plataforma Happy" />
<h2>Escolha um orfanato no mapa</h2>
<p>Muitas crianças estão esperando sua visita :)</p>
</header>
<footer>
<strong>São Paulo</strong>
<span>São Paulo</span>
</footer>
</aside>
<Map
center={[-23.6821604, -46.8754915]}
zoom={10}
style={{ width: "100%", height: "100%" }}
>
{/* Mapa alternativo: "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" */}
<TileLayer
url={
`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`
}
/>
{orphanages.map(orphanage => {
return (
<Marker
key={orphanage.id}
icon={mapIcon}
position={[orphanage.latitude, orphanage.longitude]}
>
<Popup
closeButton={false}
minWidth={240}
maxWidth={240}
className="map-popup"
>
{orphanage.name}
<Link to={`/orphanages/${orphanage.id}`}>
<FiArrowRight size={20} color="#FFF" />
</Link>
</Popup>
</Marker>
)
})}
</Map>
<Link to="/orphanages/create" className="create-orphanage">
<FiPlus size={32} color="#FFF" />
</Link>
</div>
);
}
Example #15
| Source File: index.tsx From nlw-03-omnistack with MIT License | 5 votes |
|
export default function OrphanagesMap() {
return (
<div id="page-create-orphanage">
<Sidebar />
<main>
<form className="create-orphanage-form">
<fieldset>
<legend>Dados</legend>
<Map style={{ width: '100%', height: 280 }}>
<Marker interactive={false} icon={happyMapIcon} position={[-27.2092052,-49.6401092]} />
</Map>
<div className="input-block">
<label htmlFor="name">Nome</label>
<input id="name" />
</div>
<div className="input-block">
<label htmlFor="about">Sobre <span>Máximo de 300 caracteres</span></label>
<textarea id="name" maxLength={300} />
</div>
<div className="input-block">
<label htmlFor="images">Fotos</label>
<div className="uploaded-image">
</div>
<button className="new-image">
<FiPlus size={24} color="#15b6d6" />
</button>
</div>
</fieldset>
<fieldset>
<legend>Visitação</legend>
<div className="input-block">
<label htmlFor="instructions">Instruções</label>
<textarea id="instructions" />
</div>
<div className="input-block">
<label htmlFor="opening_hours">Nome</label>
<input id="opening_hours" />
</div>
<div className="input-block">
<label htmlFor="open_on_weekends">Atende fim de semana</label>
<div className="button-select">
<button type="button" className="active">Sim</button>
<button type="button">Não</button>
</div>
</div>
</fieldset>
<PrimaryButton type="submit">Confirmar</PrimaryButton>
</form>
</main>
</div>
);
}
Example #16
| Source File: index.tsx From nlw-03-omnistack with MIT License | 5 votes |
|
export default function Orphanage() {
return (
<div id="page-orphanage">
<Sidebar />
<main>
<div className="orphanage-details">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
<div className="images">
<button className="active" type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
</div>
<div className="orphanage-details-content">
<h1>Lar das meninas</h1>
<p>Presta assistência a crianças de 06 a 15 anos que se encontre em situação de risco e/ou vulnerabilidade social.</p>
<div className="map-container">
<Map
interactive={false}
center={[-27.2092052,-49.6401092]}
zoom={16}
style={{ width: '100%', height: 280 }}
>
<Marker interactive={false} icon={happyMapIcon} position={[-27.2092052,-49.6401092]} />
</Map>
<footer>
<a href="">Ver rotas no Google Maps</a>
</footer>
</div>
<hr />
<h2>Instruções para visita</h2>
<p>Venha como se sentir mais à vontade e traga muito amor para dar.</p>
<div className="open-details">
<div className="hour">
<FiClock size={32} color="#15B6D6" />
Segunda à Sexta <br />
8h às 18h
</div>
<div className="open-on-weekends">
<FiInfo size={32} color="#39CC83" />
Atendemos <br />
fim de semana
</div>
</div>
<PrimaryButton type="button">
<FaWhatsapp size={20} color="#FFF" />
Entrar em contato
</PrimaryButton>
</div>
</div>
</main>
</div>
);
}
Example #17
| Source File: OrphanagesMap.tsx From happy with MIT License | 5 votes |
|
function OrphanagesMap() {
const [orphanages, setOrphanages] = useState<Orphanage[]>([]);
useEffect(() => {
api.get('orphanages').then(response => {
setOrphanages(response.data);
});
}, []);
return (
<div id="page-map">
<aside>
<header>
<img src={mapMarkerImg} alt="Happy"/>
<h2>Escolha um orfanato no mapa</h2>
<p>Muitas crianças estão esperando a sua visita {':)'}</p>
</header>
<footer>
<strong>Rio do Sul</strong>
<span>Santa Catarina</span>
</footer>
</aside>
<Map
center={[-27.2092052, -49.6401092]}
zoom={15}
style={{ width: '100%', height: '100%'}}
>
<TileLayer url="https://a.tile.openstreetmap.org/{z}/{x}/{y}.png" />
{/* <TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/> */}
{orphanages.map(orphanage => (
<Marker
key={orphanage.id}
icon={mapIcon}
position={[orphanage.latitude, orphanage.longitude]}
>
<Popup closeButton={false} minWidth={240} maxWidth={240} className="map-popup">
{orphanage.name}
<Link to={`/orphanages/${orphanage.id}`}>
<FiArrowRight size={20} color="#fff" />
</Link>
</Popup>
</Marker>
))}
</Map>
<Link to="/orphanages/create" className="create-orphanage">
<FiPlus size={32} color="#fff" />
</Link>
</div>
)
}
Example #18
| Source File: NodeMap.tsx From nanolooker with MIT License | 5 votes |
|
Markers = React.memo(({ nodes }: { nodes: NodeLocation[] }) => {
const { t } = useTranslation();
return (
<>
{nodes.map(
(
{
ip,
// @ts-ignore
isPrincipal,
// @ts-ignore
alias,
// @ts-ignore
account,
nodeId,
location: { latitude, longitude, ...rest },
},
index,
) => {
if (!latitude || !longitude) {
// @TODO Figure out why these IP doesn't give a lat/long
return null;
}
return (
<Marker
key={index}
position={{ lat: latitude, lng: longitude }}
icon={isPrincipal ? principalNodeMarker : nodeMarker}
zIndexOffset={isPrincipal ? 10 : 1}
>
<Popup>
<>
{alias ? (
<strong style={{ display: "block" }}>{alias}</strong>
) : null}
<span className="break-word color-normal">
{account || nodeId}
</span>
{account ? (
<>
<br />
<Link to={`/account/${account}`}>
{t("pages.status.viewAccount")}
</Link>
</>
) : null}
</>
</Popup>
</Marker>
);
},
)}
</>
);
})
Example #19
| Source File: index.tsx From NextLevelWeek with MIT License | 4 votes |
|
OrphanageCreate: React.FC = () => {
const history = useHistory();
const [position, setPosition] = useState({ latitude: 0, longitude: 0 });
// Função para quando clicar no mapa
function handleMapClick(e: LeafletMouseEvent) {
// console.log(e);
const { lat, lng } = e.latlng;
setPosition({
latitude: lat,
longitude: lng,
});
}
// Campos do formulário
const [name, setName] = useState('');
const [about, setAbout] = useState('');
const [instructions, setInstructions] = useState('');
const [opening_hours, setOpeningHours] = useState('');
const [open_on_weekends, setOpenOnWeekends] = useState(true);
// Função para o envio do fomulário
async function handleSubmit(e: FormEvent) {
e.preventDefault();
const { latitude, longitude } = position;
const data = new FormData();
data.append('name', name);
data.append('about', about);
data.append('latitude', String(latitude));
data.append('longitude', String(longitude));
data.append('instructions', instructions);
data.append('opening_hours', opening_hours);
data.append('open_on_weekends', String(open_on_weekends));
images.forEach(image => {
data.append('images', image);
});
await api.post('/orphanages', data);
history.push('/app');
}
// Função quando seleciona a imagem
const [images, setImages] = useState<File[]>([]);
const [previewImages, setPreviewImages] = useState<string[]>([]);
function handleSelectImages(e: ChangeEvent<HTMLInputElement>) {
// console.log(e.target.files);
if (!e.target.files) {
return;
}
// Array de imagens
const selectedImages = Array.from(e.target.files)
setImages(selectedImages);
// Preview das imagens
const selectedImagesPreview = selectedImages.map(image => {
return URL.createObjectURL(image);
});
setPreviewImages(selectedImagesPreview);
}
return (
<Container>
<Sidebar />
<Content>
<Form onSubmit={handleSubmit}>
<fieldset>
<legend>Dados</legend>
<Map
center={[-5.8044209, -35.263095]}
style={{ width: '100%', height: 280 }}
zoom={15}
onclick={handleMapClick}
>
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/>
{
position.latitude !== 0 &&
<Marker
interactive={false}
icon={happyMapIcon}
position={[position.latitude, position.longitude]}
/>
}
</Map>
<InputContainer>
<label htmlFor="name">Nome</label>
<input
id="name"
value={name}
onChange={e => setName(e.target.value)}
/>
</InputContainer>
<InputContainer>
<label htmlFor="about">Sobre <span>Máximo de 300 caracteres</span></label>
<textarea
id="about"
maxLength={300}
value={about}
onChange={e => setAbout(e.target.value)}
/>
</InputContainer>
<InputContainer>
<label htmlFor="images">Fotos</label>
<ImagesContainer>
{previewImages.map(image => {
return (
<img
key={image}
src={image}
alt={name}
/>
)
})}
<label htmlFor="image[]">
<FiPlus size={24} color="#15b6d6" />
</label>
</ImagesContainer>
<input
type="file"
id="image[]"
multiple
onChange={handleSelectImages}
/>
</InputContainer>
</fieldset>
<fieldset>
<legend>Visitação</legend>
<InputContainer>
<label htmlFor="instructions">Instruções</label>
<textarea
id="instructions"
value={instructions}
onChange={e => setInstructions(e.target.value)}
/>
</InputContainer>
<InputContainer>
<label htmlFor="opening_hours">Horário de funcionamento</label>
<input
id="opening_hours"
value={opening_hours}
onChange={e => setOpeningHours(e.target.value)}
/>
</InputContainer>
<InputContainer>
<label htmlFor="open_on_weekends">Atende no fim de semana</label>
<OpenOnWeekendContainer>
<SelectButton
type="button"
active={open_on_weekends}
onClick={() => setOpenOnWeekends(true)}
>Sim</SelectButton>
<SelectButton
type="button"
active={!open_on_weekends}
onClick={() => setOpenOnWeekends(false)}
>Não</SelectButton>
</OpenOnWeekendContainer>
</InputContainer>
</fieldset>
<button type="submit">Confirmar</button>
</Form>
</Content>
</Container>
);
}
Example #20
| Source File: Orphanage.tsx From happy with MIT License | 4 votes |
|
export default function Orphanage() {
const params = useParams<OrphanageParams>();
const [orphanage, setOrphaange] = useState<Orphanage>();
const [activeImageIndex, setActiveImageIndex] = useState(0);
useEffect(() => {
api.get(`/orphanages/${params.id}`).then(res => {
setOrphaange(res.data);
});
}, [params.id]);
if (!orphanage) {
return <p>Carregando...</p>
}
return (
<div id="page-orphanage">
<Sidebar />
<main>
<div className="orphanage-details">
<img src={orphanage.images[activeImageIndex].url} alt={orphanage.name} />
<div className="images">
{orphanage.images.map((image, index) => {
return (
<button
key={image.id}
className={activeImageIndex === index ? "active" : ""}
type="button"
onClick={() => {
setActiveImageIndex(index);
}}
>
<img src={image.url} alt={orphanage.name} />
</button>
)
})}
</div>
<div className="orphanage-details-content">
<h1>{orphanage.name}</h1>
<p>{orphanage.about}</p>
<div className="map-container">
<Map
center={[orphanage.latitude, orphanage.longitude]}
zoom={16}
style={{ width: '100%', height: 280 }}
dragging={false}
touchZoom={false}
zoomControl={false}
scrollWheelZoom={false}
doubleClickZoom={false}
>
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/>
<Marker interactive={false} icon={mapIcon} position={[orphanage.latitude, orphanage.longitude]} />
</Map>
<footer>
<a target="_blank" rel="noopener noreferrer" href={`https://google.com/maps/dir/?api=1&destination=${orphanage.latitude},${orphanage.longitude}`}>Ver rotas no Google Maps</a>
</footer>
</div>
<hr />
<h2>Instruções para visita</h2>
<p>{orphanage.instructions}</p>
<div className="open-details">
<div className="hour">
<FiClock size={32} color="#15B6D6" />
Segunda à Sexta <br />
{orphanage.opening_hours}
</div>
{orphanage.open_on_weekends ? (
<div className="open-on-weekends">
<FiInfo size={32} color="#39CC83" />
Atendemos <br />
fim de semana
</div>
) : (
<div className="open-on-weekends dont-open">
<FiInfo size={32} color="#FF6690" />
Não Atendemos <br />
fim de semana
</div>
)}
</div>
{/* <button type="button" className="contact-button">
<FaWhatsapp size={20} color="#FFF" />
Entrar em contato
</button> */}
</div>
</div>
</main>
</div>
);
}
Example #21
| Source File: index.tsx From nlw-ecoleta with MIT License | 4 votes |
|
export function CreatePoint() {
const [items, setItems] = useState<Item[]>([]);
const [ufs, setUfs] = useState<string[]>([]);
const [cities, setCities] = useState<string[]>([]);
const [selectedItems, setSelectedItems] = useState<number[]>([]);
const [initialPosition, setInitialPosition] = useState<[number, number]>([0, 0]);
const [selectedFile, setSelectedFile] = useState<File>();
const [formData, setFormData] = useState({
name: '',
email: '',
whatsapp: '',
});
const [selectedUf, setSelectedUf] = useState('0');
const [selectedCity, setSelectedCity] = useState('0');
const [selectedPosition, setSelectedPosition] = useState<[number, number]>([0, 0]);
const history = useNavigate();
useEffect (() => {
navigator.geolocation.getCurrentPosition(position => {
const { latitude, longitude } = position.coords;
setInitialPosition([latitude, longitude]);
});
}, []);
useEffect(() => {
api.get('items').then(response => {
setItems(response.data);
});
}, []);
useEffect(() => {
axios
.get<IBGEUFResponse[]>('https://servicodados.ibge.gov.br/api/v1/localidades/estados')
.then(response => {
const ufInitials = response.data.map(uf => uf.sigla);
setUfs(ufInitials);
});
}, []);
useEffect(() => {
if(selectedUf === '0') {
return;
}
axios
.get<IBGECityResponse[]>(`https://servicodados.ibge.gov.br/api/v1/localidades/estados/${selectedUf}/municipios`)
.then(response => {
const cityNames = response.data.map(city => city.nome);
setCities(cityNames);
});
} , [selectedUf]);
function handleSelectUf(event: ChangeEvent<HTMLSelectElement>) {
const uf = event.target.value;
setSelectedUf(uf);
}
function handleSelectCity(event: ChangeEvent<HTMLSelectElement>) {
const city = event.target.value;
setSelectedCity(city);
}
function handleMapClick(event: LeafletMouseEvent) {
setSelectedPosition([
event.latlng.lat,
event.latlng.lng,
]);
}
function handleInputChange(event: ChangeEvent<HTMLInputElement>){
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
}
function handleSelectItem(id: number) {
const alreadySelected = selectedItems.findIndex(item => item === id);
if (alreadySelected >= 0) {
const filteredItems = selectedItems.filter(item => item !== id);
setSelectedItems(filteredItems);
}
else {
setSelectedItems([ ...selectedItems, id ]);
}
}
async function handleSubmit(event: FormEvent) {
event.preventDefault();
const { name, email, whatsapp } = formData;
const uf = selectedUf;
const city = selectedCity;
const [ latitude, longitude ] = selectedPosition;
const items = selectedItems;
const data = new FormData();
data.append('name', name);
data.append('email', email);
data.append('whatsapp', whatsapp);
data.append('uf', uf);
data.append('city', city);
data.append('latitude', String(latitude));
data.append('longitude', String(longitude));
data.append('items', items.join(','));
if (selectedFile) {
data.append('image', selectedFile);
}
await api.post('points', data);
alert('Ponto de coleta criado.');
history('/');
}
// function LocationMarker() {
// const map = useMapEvents({
// click() {
// map.locate();
// },
// locationfound(e) {
// setSelectedPosition(e.latlng as any);
// map.flyTo(e.latlng, map.getZoom());
// },
// });
// return selectedPosition === null ? null : (
// <Marker position={selectedPosition} />
// );
// }
return (
<div id='page-create-point'>
<header>
<img src={ logo } alt="Ecoleta" />
<Link to='/'>
<FiArrowLeft />
Voltar para home
</Link>
</header>
<form onSubmit={handleSubmit}>
<h1>Cadastro do <br /> ponto de coleta</h1>
<Dropzone onFileUploaded={setSelectedFile} />
<fieldset>
<legend>
<h2> Dados </h2>
</legend>
<div className='field'>
<label htmlFor="name"> Nome da entidade</label>
<input
type="text"
name="name"
id="name"
onChange={handleInputChange}
/>
</div>
<div className="field-group">
<div className='field'>
<label htmlFor="email"> E-mail</label>
<input
type="email"
name="email"
id="email"
onChange={handleInputChange}
/>
</div>
<div className='field'>
<label htmlFor="name"> Whatsapp</label>
<input
type="text"
name="whatsapp"
id="whatsapp"
onChange={handleInputChange}
/>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h2> Endereço </h2>
<span>Selecione o endereço no mapa</span>
</legend>
<MapContainer center={initialPosition} zoom={5} onClick={handleMapClick}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={selectedPosition}></Marker>
</MapContainer>
<div className="field-group">
<div className="field">
<label htmlFor="uf"> Estado (UF)</label>
<select
name="uf"
id="uf"
value={selectedUf}
onChange={handleSelectUf}
>
<option value="0"> Selecione um UF</option>
{ufs.map(uf => (
<option key={uf} value={uf}> {uf}</option>
))}
</select>
</div>
<div className="field">
<label htmlFor="city"> Cidade</label>
<select
name="city"
id="city"
value={selectedCity}
onChange={handleSelectCity}
>
<option value="0"> Selecione uma cidade</option>
{cities.map(city => (
<option key={city} value={city}> {city}</option>
))}
</select>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h2> Itens de coleta </h2>
<span>Selecione um ou mais itens abaixo</span>
</legend>
<ul className='items-grid'>
{items.map(item =>(
<li
key={item.id}
onClick={() => handleSelectItem(item.id)}
className={selectedItems.includes(item.id) ? 'selected' : ''}
>
<img src={item.image_url} alt={item.title}/>
<span>{item.title}</span>
</li>
))}
</ul>
</fieldset>
<button type="submit">Cadastrar ponto de coleta</button>
</form>
</div>
);
}
Example #22
| Source File: index.tsx From nlw-01-omnistack with MIT License | 4 votes |
|
CreatePoint = () => {
const [items, setItems] = useState<Item[]>([]);
const [ufs, setUfs] = useState<string[]>([]);
const [cities, setCities] = useState<string[]>([]);
const [initialPosition, setInitialPosition] = useState<[number, number]>([0, 0]);
const [formData, setFormData] = useState({
name: '',
email: '',
whatsapp: '',
});
const [selectedUf, setSelectedUf] = useState('0');
const [selectedCity, setSelectedCity] = useState('0');
const [selectedItems, setSelectedItems] = useState<number[]>([]);
const [selectedPosition, setSelectedPosition] = useState<[number, number]>([0, 0]);
const [selectedFile, setSelectedFile] = useState<File>();
const history = useHistory();
useEffect(() => {
navigator.geolocation.getCurrentPosition(position => {
const { latitude, longitude } = position.coords;
setInitialPosition([latitude, longitude]);
});
}, []);
useEffect(() => {
api.get('items').then(response => {
setItems(response.data);
});
}, []);
useEffect(() => {
axios.get<IBGEUFResponse[]>('https://servicodados.ibge.gov.br/api/v1/localidades/estados').then(response => {
const ufInitials = response.data.map(uf => uf.sigla);
setUfs(ufInitials);
});
}, []);
useEffect(() => {
if (selectedUf === '0') {
return;
}
axios
.get<IBGECityResponse[]>(`https://servicodados.ibge.gov.br/api/v1/localidades/estados/${selectedUf}/municipios`)
.then(response => {
const cityNames = response.data.map(city => city.nome);
setCities(cityNames);
});
}, [selectedUf]);
function handleSelectUf(event: ChangeEvent<HTMLSelectElement>) {
const uf = event.target.value;
setSelectedUf(uf);
}
function handleSelectCity(event: ChangeEvent<HTMLSelectElement>) {
const city = event.target.value;
setSelectedCity(city);
}
function handleMapClick(event: LeafletMouseEvent) {
setSelectedPosition([
event.latlng.lat,
event.latlng.lng,
])
}
function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
}
function handleSelectItem(id: number) {
const alreadySelected = selectedItems.findIndex(item => item === id);
if (alreadySelected >= 0) {
const filteredItems = selectedItems.filter(item => item !== id);
setSelectedItems(filteredItems);
} else {
setSelectedItems([ ...selectedItems, id ]);
}
}
async function handleSubmit(event: FormEvent) {
event.preventDefault();
const { name, email, whatsapp } = formData;
const uf = selectedUf;
const city = selectedCity;
const [latitude, longitude] = selectedPosition;
const items = selectedItems;
const data = new FormData();
data.append('name', name);
data.append('email', email);
data.append('whatsapp', whatsapp);
data.append('uf', uf);
data.append('city', city);
data.append('latitude', String(latitude));
data.append('longitude', String(longitude));
data.append('items', items.join(','));
if (selectedFile) {
data.append('image', selectedFile)
}
await api.post('points', data);
alert('Ponto de coleta criado!');
history.push('/');
}
return (
<div id="page-create-point">
<header>
<img src={logo} alt="Ecoleta" />
<Link to="/">
<FiArrowLeft />
Voltar para home
</Link>
</header>
<form onSubmit={handleSubmit}>
<h1>Cadastro do <br /> ponto de coleta</h1>
<Dropzone onFileUploaded={setSelectedFile} />
<fieldset>
<header role="legend">
<h2>Dados</h2>
</header>
<div className="field">
<label htmlFor="name">Nome da entidade</label>
<input
type="text"
name="name"
id="name"
onChange={handleInputChange}
/>
</div>
<div className="field-group">
<div className="field">
<label htmlFor="email">E-mail</label>
<input
type="email"
name="email"
id="email"
onChange={handleInputChange}
/>
</div>
<div className="field">
<label htmlFor="whatsapp">Whatsapp</label>
<input
type="text"
name="whatsapp"
id="whatsapp"
onChange={handleInputChange}
/>
</div>
</div>
</fieldset>
<fieldset>
<header role="legend">
<h2>Endereço</h2>
<span>Selecione o endereço no mapa</span>
</header>
<Map center={initialPosition} zoom={15} onClick={handleMapClick}>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={selectedPosition} />
</Map>
<div className="field-group">
<div className="field">
<label htmlFor="uf">Estado (UF)</label>
<select
name="uf"
id="uf"
value={selectedUf}
onChange={handleSelectUf}
>
<option value="0">Selecione uma UF</option>
{ufs.map(uf => (
<option key={uf} value={uf}>{uf}</option>
))}
</select>
</div>
<div className="field">
<label htmlFor="city">Cidade</label>
<select
name="city"
id="city"
value={selectedCity}
onChange={handleSelectCity}
>
<option value="0">Selecione uma cidade</option>
{cities.map(city => (
<option key={city} value={city}>{city}</option>
))}
</select>
</div>
</div>
</fieldset>
<fieldset>
<header role="legend">
<h2>Ítens de coleta</h2>
<span>Selecione um ou mais ítens abaixo</span>
</header>
<ul className="items-grid">
{items.map(item => (
<li
key={item.id}
onClick={() => handleSelectItem(item.id)}
className={selectedItems.includes(item.id) ? 'selected' : ''}
>
<img src={item.image_url} alt={item.title} />
<span>{item.title}</span>
</li>
))}
</ul>
</fieldset>
<button type="submit">
Cadastrar ponto de coleta
</button>
</form>
</div>
);
}
Example #23
| Source File: index.tsx From ecoleta with MIT License | 4 votes |
|
CreatePoint = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
whatsapp: '',
});
const [initialPosition, setInitialPosition] = useState<[number, number]>([
0,
0,
]);
const [ufs, setUfs] = useState<string[]>([]);
const [cities, setCities] = useState<string[]>([]);
const [items, setItems] = useState<Item[]>([]);
const [selectedUf, setSelectedUf] = useState('0');
const [selectedCity, setSelectedCity] = useState('0');
const [selectedItems, setSelectedItems] = useState<number[]>([]);
const [selectedPosition, setSelectedPosition] = useState<[number, number]>([
0,
0,
]);
const [selectedFile, setSelectedFile] = useState<File>();
const history = useHistory();
useEffect(() => {
navigator.geolocation.getCurrentPosition((position) => {
const { latitude, longitude } = position.coords;
setInitialPosition([latitude, longitude]);
});
}, []);
useEffect(() => {
api.get('/items').then((response) => {
setItems(response.data);
});
}, []);
useEffect(() => {
axios
.get<IBGEUFResponse[]>(
'https://servicodados.ibge.gov.br/api/v1/localidades/estados'
)
.then((response) => {
const ufInitials = response.data.map((uf) => uf.sigla);
setUfs(ufInitials);
});
}, []);
useEffect(() => {
if (selectedUf === '0') {
return;
}
axios
.get<IBGECityResponse[]>(
`https://servicodados.ibge.gov.br/api/v1/localidades/estados/${selectedUf}/municipios`
)
.then((response) => {
const cityNames = response.data.map((city) => city.nome);
setCities(cityNames);
});
}, [selectedUf]);
function handleSelectUf(event: ChangeEvent<HTMLSelectElement>) {
const uf = event.target.value;
setSelectedUf(uf);
}
function handleSelectCity(event: ChangeEvent<HTMLSelectElement>) {
const city = event.target.value;
setSelectedCity(city);
}
function handleMapClick(event: LeafletMouseEvent) {
setSelectedPosition([event.latlng.lat, event.latlng.lng]);
}
function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
}
function handleSelectItem(id: number) {
const alreadySelected = selectedItems.findIndex((item) => item === id);
if (alreadySelected >= 0) {
const filteredItems = selectedItems.filter((item) => item !== id);
setSelectedItems(filteredItems);
} else {
setSelectedItems([...selectedItems, id]);
}
}
async function handleSubmit(event: FormEvent) {
event.preventDefault();
const { name, email, whatsapp } = formData;
const uf = selectedUf;
const city = selectedCity;
const [latitude, longitude] = selectedPosition;
const items = selectedItems;
const data = new FormData();
data.append('name', name);
data.append('email', email);
data.append('whatsapp', whatsapp);
data.append('uf', uf);
data.append('city', city);
data.append('latitude', String(latitude));
data.append('longitude', String(longitude));
data.append('items', items.join(','));
if (selectedFile) {
data.append('image', selectedFile);
}
await api.post('/points', data);
alert('Ponto de coleta criado');
history.push('/');
}
return (
<div id="page-create-point">
<header>
<img src={logo} alt="Ecoleta" />
<Link to="/">
<FiArrowLeft />
Voltar para home
</Link>
</header>
<form onSubmit={handleSubmit} autoComplete="off">
<h1>
Cadastro do <br />
ponto de coleta
</h1>
<Dropzone onFileUploaded={setSelectedFile} />
<fieldset>
<legend>
<h2>Dados</h2>
</legend>
<div className="field">
<label htmlFor="name">Nome da entidade</label>
<input
type="text"
name="name"
id="name"
onChange={handleInputChange}
/>
</div>
<div className="field-group">
<div className="field">
<label htmlFor="email">E-mail</label>
<input
type="email"
name="email"
id="email"
onChange={handleInputChange}
/>
</div>
<div className="field">
<label htmlFor="whatsapp">Whatsapp</label>
<input
type="text"
name="whatsapp"
id="whatsapp"
onChange={handleInputChange}
/>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h2>Endereço</h2>
<span>Selecione o endereço no mapa</span>
</legend>
<Map center={initialPosition} zoom={15} onClick={handleMapClick}>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={selectedPosition} />
</Map>
<div className="field-group">
<div className="field">
<label htmlFor="uf">Estado (UF)</label>
<select
name="uf"
id="uf"
value={selectedUf}
onChange={handleSelectUf}
>
<option value="0">Selecione uma UF</option>
{ufs.map((uf) => (
<option key={uf} value={uf}>
{uf}
</option>
))}
</select>
</div>
<div className="field">
<label htmlFor="city">Cidade</label>
<select
name="city"
id="city"
value={selectedCity}
onChange={handleSelectCity}
>
<option value="0">Selecione uma cidade</option>
{cities.map((city) => (
<option key={city} value={city}>
{city}
</option>
))}
</select>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h2>Itens de coleta</h2>
<span>Selecione um ou mais itens abaixo</span>
</legend>
<ul className="items-grid">
{items.map((item) => (
<li
key={item.id}
className={selectedItems.includes(item.id) ? 'selected' : ''}
onClick={() => handleSelectItem(item.id)}
>
<img src={item.image_url} alt={item.title} />
<span>{item.title}</span>
</li>
))}
</ul>
</fieldset>
<button type="submit">Cadastrar ponto de coleta</button>
</form>
</div>
);
}
Example #24
| Source File: index.tsx From ecoleta with MIT License | 4 votes |
|
CreatePoint: React.FC = () => {
const [items, setItems] = useState<Item[]>([]);
const [selectedItems, setSelectedItems] = useState<number[]>([]);
const [ufs, setUfs] = useState<string[]>([]);
const [selectedUf, setSelectedUf] = useState('0');
const [cities, setCities] = useState<string[]>([]);
const [selectedCity, setSelectedCity] = useState('0');
const [selectedPosition, setSelectedPosition] = useState<[number, number]>([0, 0]);
const [initialMapPosition, setInitialMapPosition] = useState<[number, number]>([0, 0]);
const [selectedFile, setSelectedFile] = useState<File>();
const [formData, setFormData] = useState({
name: '',
email: '',
whatsapp: '',
});
const history = useHistory();
useEffect(() => {
navigator.geolocation.getCurrentPosition(position => {
const { latitude, longitude } = position.coords;
setInitialMapPosition([latitude, longitude]);
});
}, []);
useEffect(() => {
api.get('items').then(response => {
setItems(response.data);
});
}, []);
useEffect(() => {
axios
.get<IBGEUFResponse[]>('https://servicodados.ibge.gov.br/api/v1/localidades/estados')
.then(response => {
const ufInitials = response.data.map(uf => uf.sigla);
setUfs(ufInitials);
});
}, []);
useEffect(() => {
if (selectedUf === '0') {
return;
}
axios
.get<IBGECityResponse[]>(`https://servicodados.ibge.gov.br/api/v1/localidades/estados/${selectedUf}/municipios`)
.then(response => {
const cityNames = response.data.map(city => city.nome);
setCities(cityNames);
});
}, [selectedUf]);
function handleSelectUf(event: ChangeEvent<HTMLSelectElement>) {
const uf = event.target.value;
setSelectedUf(uf);
}
function handleSelectCity(event: ChangeEvent<HTMLSelectElement>) {
const city = event.target.value;
setSelectedCity(city);
}
function handleMapClick(event: LeafletMouseEvent) {
setSelectedPosition([
event.latlng.lat,
event.latlng.lng
])
}
function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
}
function handleSelectItem(id: number) {
const alreadSelected = selectedItems.findIndex(item => item === id);
if (alreadSelected >= 0) {
const filteredItems = selectedItems.filter(item => item !== id);
setSelectedItems(filteredItems);
} else {
setSelectedItems([ ...selectedItems, id]);
}
}
async function handleSubmit(event: FormEvent) {
event.preventDefault();
const { name, email, whatsapp } = formData;
const uf = selectedUf;
const city = selectedCity;
const [latitude, longitude] = selectedPosition;
const items = selectedItems;
const data = new FormData();
data.append('name', name);
data.append('email', email);
data.append('whatsapp', whatsapp);
data.append('uf', uf);
data.append('city', city);
data.append('latitude', String(latitude));
data.append('longitude', String(longitude));
data.append('items', items.join(','));
if (selectedFile) {
data.append('image', selectedFile);
}
await api.post('points', data);
alert('Ponto de Coleta Criado!');
history.push('/');
}
return (
<div id="page-create-point">
<header>
<img src={logo} alt="Ecoleta Logo"/>
<Link to="/">
<FiArrowLeft />
Voltar para home
</Link>
</header>
<form onSubmit={handleSubmit}>
<h1>Cadastro do <br />ponto de coleta</h1>
<Dropzone onFileUploaded={setSelectedFile} />
<fieldset>
<legend>
<h2>Dados</h2>
</legend>
<div className="field">
<label htmlFor="name">Nome da entidade</label>
<input
type="text"
name="name"
id="name"
onChange={handleInputChange}
/>
</div>
<div className="field-group">
<div className="field">
<label htmlFor="email">E-mail</label>
<input
type="email"
name="email"
id="email"
onChange={handleInputChange}
/>
</div>
<div className="field">
<label htmlFor="whatsapp">Whatsapp</label>
<input
type="text"
name="whatsapp"
id="whatsapp"
onChange={handleInputChange}
/>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h2>Endereço</h2>
<span>Selecione o endereço no mapa</span>
</legend>
<Map center={initialMapPosition} zoom={15} onClick={handleMapClick}>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={selectedPosition}/>
</Map>
<div className="field-group">
<div className="field">
<label htmlFor="uf">Estado (UF)</label>
<select
name="uf"
id="uf"
value={selectedUf}
onChange={handleSelectUf}
>
<option value="0">Selecione uma UF</option>
{ufs.map(uf => (
<option key={uf} value={uf}>{uf}</option>
))}
</select>
</div>
<div className="field">
<label htmlFor="city">Cidade</label>
<select
name="city"
id="city"
value={selectedCity}
onChange={handleSelectCity}
>
<option value="0">Selecione uma cidade</option>
{cities.map(city => (
<option key={city} value={city}>{city}</option>
))}
</select>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h2>Ítens de coleta</h2>
<span>Selecione um ou mais ítens abaixo</span>
</legend>
<ul className="items-grid">
{items.map(item => (
<li
key={item.id}
onClick={() => handleSelectItem(item.id)}
className={selectedItems.includes(item.id) ? 'selected' : ''}
>
<img src={item.image_url} alt={item.title}/>
<span>{item.title}</span>
</li>
))}
</ul>
</fieldset>
<button type="submit">
Cadastrar ponto de coleta
</button>
</form>
</div>
);
}
Example #25
| Source File: CreateOrphanage.tsx From happy with MIT License | 4 votes |
|
export default function CreateOrphanage() {
const history = useHistory();
const [position, setPosition] = useState({ latitude: 0, longitude: 0 });
const [name, setName] = useState('');
const [about, setAbout] = useState('');
const [instructions, setInstructions] = useState('');
const [opening_hours, setOpeningHours] = useState('');
const [open_on_weekends, setOpenOnWeekends] = useState(true);
const [images, setImages] = useState<File[]>([]);
const [previewImages, setPreviewImages] = useState<PreviewImage[]>([]);
function handleMapClick(event: LeafletMouseEvent) {
const { lat, lng } = event.latlng;
setPosition({
latitude: lat,
longitude: lng
});
}
async function handleSubmit(event: FormEvent) {
event.preventDefault();
const { latitude, longitude } = position;
const data = new FormData();
data.append('name', name);
data.append('about', about);
data.append('latitude', String(latitude));
data.append('longitude', String(longitude));
data.append('instructions', instructions);
data.append('opening_hours', opening_hours);
data.append('open_on_weekends', String(open_on_weekends));
images.forEach(image => {
data.append('images', image);
});
await api.post('/orphanages', data);
alert('Orfanato cadastrado com sucesso!');
history.push('/app');
}
function handleSelectImages(event: ChangeEvent<HTMLInputElement>) {
if (!event.target.files) {
return;
}
const selectedImages = Array.from(event.target.files);
event.target.value = "";
setImages(selectedImages);
const selectedImagesPreview = selectedImages.map(image => {
return { name: image.name, url: URL.createObjectURL(image) };
});
setPreviewImages(selectedImagesPreview);
}
function handleRemoveImage(image: PreviewImage) {
setPreviewImages(
previewImages.map((image) => image).filter((img) => img.url !== image.url)
);
setImages(
images.map((image) => image).filter((img) => img.name !== image.name)
);
}
return (
<div id="page-create-orphanage">
<Sidebar />
<main>
<form onSubmit={handleSubmit} className="create-orphanage-form">
<fieldset>
<legend>Dados</legend>
<Map
center={[-27.2092052, -49.6401092]}
style={{ width: '100%', height: 280 }}
zoom={15}
onclick={handleMapClick}
>
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/>
{position.latitude !== 0 && (
<Marker
interactive={false}
icon={mapIcon}
position={[
position.latitude,
position.longitude
]}
/>
)}
</Map>
<div className="input-block">
<label htmlFor="name">Nome</label>
<input
id="name"
value={name}
onChange={event => setName(event.target.value)}
/>
</div>
<div className="input-block">
<label htmlFor="about">Sobre <span>Máximo de 300 caracteres</span></label>
<textarea
id="name"
maxLength={300}
value={about}
onChange={event => setAbout(event.target.value)}
/>
</div>
<div className="input-block">
<label htmlFor="images">Fotos</label>
<div className="images-container">
{previewImages.map((image) => {
return (
<div key={image.url}>
<span
className="remove-image"
onClick={() => handleRemoveImage(image)}
>
<FiX size={18} color="#ff669d" />
</span>
<img src={image.url} alt={name} className="new-image" />
</div>
);
})}
<label htmlFor="image[]" className="new-image">
<FiPlus size={24} color="#15b6d6" />
</label>
</div>
<input
type="file"
multiple
accept=".png, .jpg, .jpeg"
onChange={handleSelectImages}
id="image[]"
/>
</div>
</fieldset>
<fieldset>
<legend>Visitação</legend>
<div className="input-block">
<label htmlFor="instructions">Instruções</label>
<textarea
id="instructions"
value={instructions}
onChange={event => setInstructions(event.target.value)}
/>
</div>
<div className="input-block">
<label htmlFor="opening_hours">Horário de Funcionamento</label>
<input
id="opening_hours"
value={opening_hours}
onChange={event => setOpeningHours(event.target.value)}
/>
</div>
<div className="input-block">
<label htmlFor="open_on_weekends">Atende fim de semana</label>
<div className="button-select">
<button
type="button"
className={open_on_weekends ? 'active' : ''}
onClick={() => setOpenOnWeekends(true)}
>
Sim
</button>
<button
type="button"
className={!open_on_weekends ? 'active' : ''}
onClick={() => setOpenOnWeekends(false)}
>
Não
</button>
</div>
</div>
</fieldset>
<button className="confirm-button" type="submit">
Confirmar
</button>
</form>
</main>
</div>
);
}
Example #26
| Source File: Maps.tsx From roamjs-com with MIT License | 4 votes |
|
Markers = ({
id,
href,
markers,
}: {
id: string;
href: string;
markers: RoamMarker[];
}) => {
const map = useMap();
const mouseRef = useRef(null);
const openMarker = (marker: LMarker) => () => {
mouseRef.current = marker;
marker.openPopup();
};
const closeMarker = (marker: LMarker) => () => {
mouseRef.current = null;
setTimeout(() => {
if (mouseRef.current !== marker) {
marker.closePopup();
}
}, 100);
};
useEffect(() => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore until there's a better way to grab markers
const leafletMarkers = map._layers as { [key: string]: LMarker };
Object.keys(leafletMarkers).forEach((k) => {
const m = leafletMarkers[k];
m.on({
mouseover: openMarker(m),
mouseout: closeMarker(m),
click: (e) => {
const extractedTag = extractTag(m.options.title);
const pageUid = getPageUidByPageTitle(extractedTag);
if (pageUid) {
if (e.originalEvent.shiftKey) {
openBlockInSidebar(pageUid);
} else {
window.roamAlphaAPI.ui.mainWindow.openPage({
page: { uid: pageUid },
});
}
}
},
});
});
const observer = new MutationObserver((mrs) => {
mrs
.flatMap((mr) => Array.from(mr.addedNodes))
.filter((n) => n.nodeName === "DIV")
.map((n) => n as HTMLDivElement)
.map((n) =>
n.classList.contains("leaflet-popup")
? n
: n.getElementsByClassName("leaflet-popup")[0]
)
.filter((n) => !!n)
.forEach((n) => {
const marker = Object.values(leafletMarkers).find(
(m) =>
n
.querySelector(".roamjs-marker-data")
.getAttribute("data-uid") === m.options.title
);
n.addEventListener("mouseenter", openMarker(marker));
n.addEventListener("mouseleave", closeMarker(marker));
});
mrs
.flatMap((mr) => Array.from(mr.addedNodes))
.map((n) =>
n.parentElement.querySelector<HTMLAnchorElement>(".rm-alias")
)
.filter((n) => !!n)
.forEach((anchor) => {
renderAlias({
p: anchor,
children: anchor.innerText,
blockUid: anchor.href.match(/\/page\/(.*)/)?.[1] || "",
});
});
});
observer.observe(document.getElementById(id), {
childList: true,
subtree: true,
});
return () => observer.disconnect();
});
return (
<>
{markers.map((m, i) => (
<Marker
position={[m.x, m.y]}
icon={MarkerIcon}
key={i}
title={m.uid}
riseOnHover
>
<Popup>
<div
className={"roamjs-marker-data roamjs-block-view"}
id={`roamjs-map-marker-${m.uid}`}
data-uid={m.uid}
style={{ display: "flex" }}
dangerouslySetInnerHTML={{
__html: parseRoamMarked(m.tag),
}}
/>
</Popup>
</Marker>
))}
</>
);
}
Example #27
| Source File: Map.tsx From covid19map with MIT License | 4 votes |
|
Map = ({
center,
zoom,
markers = [],
clusters = {},
onMarkerClick,
maxCases,
outerBounds,
innerBounds,
location
}: {
center: any;
zoom: number;
markers: any[];
clusters: any;
onMarkerClick: any;
maxCases: number;
outerBounds: any;
innerBounds: any;
location: any;
}) => {
const theme = useTheme();
const mapRef = useRef<any>(null);
const [currentLocation, setCurrentLocation] = useState<string>();
const [currentZoom, setCurrentZoom] = useState(100);
useEffect(() => {
mapRef?.current?.leafletElement.fitBounds(innerBounds);
}, [mapRef.current]);
useEffect(() => {
mapRef?.current?.leafletElement.closePopup();
setCurrentLocation('');
}, [location]);
const getRegionIcon = (
className: string,
totalCases: number,
name: string
) => {
const iconSize = 24;
return L.divIcon({
className: `marker ${className}`,
iconSize: [iconSize, iconSize],
html: `<div>${
name === 'Managed Isolation' ? 'MIQ: ' : ''
}${totalCases}</div>`
});
};
const getClusterIcon = (className: string, totalCases: number) => {
const normalise = totalCases / 100;
const iconSize = 24 + normalise * 15;
return L.divIcon({
className: `marker ${className}`,
iconSize: [iconSize, iconSize],
html: `<div></div>`
});
};
const onLocationClick = (name: string) => {
setCurrentLocation(name);
onMarkerClick(name);
};
const onZoomend = () => {
if (mapRef.current) {
setCurrentZoom(mapRef.current?.leafletElement.getZoom());
}
};
return (
<div style={{ position: 'relative' }}>
<LeafletMap
// onClick={() => onLocationClick('')}
ref={mapRef}
maxBounds={outerBounds}
center={center}
zoom={zoom}
maxZoom={7}
minZoom={5}
zoomControl={true}
doubleClickZoom={true}
scrollWheelZoom={true}
dragging={true}
animate={true}
easeLinearity={0.35}
onZoomend={onZoomend}
>
<TileLayer
url="//{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png"
attribution='© <a href="//www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
/>
{markers.map(
(
{
name,
latlng,
boundary,
totalCases,
active,
recovered,
deaths,
inHospital,
level
},
i
) => (
<>
{latlng && (
<FeatureGroup key={i}>
<Marker
position={latlng}
icon={getRegionIcon(
`region ${inHospital > 0 ? 'hospital' : ''}`,
active,
name
)}
zIndexOffset={100}
// onClick={() => {
// onLocationClick(name);
// gtag.event('Marker', 'Map', name);
// }}
/>
<Popup>
<StyledPopup>
<div className="location">{name}</div>
<div className="cases">
{active} active case{active > 1 && 's'}
<br />
{recovered} recovered
<br />
{totalCases} total case{totalCases > 1 && 's'}
{deaths > 0 && (
<>
<br />
{deaths} death{deaths > 1 && 's'}
</>
)}
</div>
{inHospital > 0 && (
<div className="cases">{inHospital} in hospital</div>
)}
</StyledPopup>
</Popup>
{boundary && (
<Polygon
color={currentLocation === name ? 'white' : 'black'}
opacity={currentLocation === name ? 1 : 0.2}
weight={currentLocation === name ? 3 : 1}
fillColor={theme[alertColours[level - 1]]}
// fillOpacity={((active || 0) - -10) / (maxCases + 10 - 1)}
// fillOpacity={(level - 1) / (4 - 1)}
fillOpacity={0.8}
positions={boundary[0]}
// smoothFactor={10}
// onClick={() => {
// onLocationClick(name);
// gtag.event('Region', 'Map', name);
// }}
/>
)}
</FeatureGroup>
)}
</>
)
)}
{Object.keys(clusters).map((regionName: string, j: number) =>
Object.keys(clusters[regionName]).map(
(clustLocName: string, k: number) => {
const { latlng, count, items } = clusters[regionName][
clustLocName
];
return items.filter((x: any) => x.ongoing === 'Yes').length >
0 ? (
<Marker
key={k}
position={latlng}
icon={getClusterIcon('cluster', count)}
// onClick={() => gtag.event('Cluster', 'Map', clustLocName)}
>
<Popup>
<StyledPopup>
<div className="head">
{clustLocName} cluster{items.length > 1 && 's'}
</div>
{items
.filter((x: any) => x.ongoing === 'Yes')
.map(
(
{
name,
totalCases
}: { name: string; totalCases: number },
l: number
) => (
<div className="cluster-desc" key={l}>
<div className="location">{name}</div>
<div className="cases">{totalCases} cases</div>
</div>
)
)}
</StyledPopup>
</Popup>
</Marker>
) : (
<div key={k} />
);
}
)
)}
</LeafletMap>
<Styles currentZoom={currentZoom} />
</div>
);
}
Example #28
| Source File: index.tsx From NLW-1.0 with MIT License | 4 votes |
|
CreatePoint: React.FC = () => {
const [items, setItems] = useState<Item[]>([]);
const [ufs, setUfs] = useState<IBGEUFResponse[]>([]);
const [cities, setCities] = useState<IBGECityResponse[]>([]);
const [formData, setFormData] = useState({
name: '',
email: '',
whatsapp: '',
});
const [selectedFile, setSelectedFile] = useState<File>();
const [selectedItems, setSelectedItems] = useState<number[]>([]);
const [selectedUf, setSelectedUf] = useState<string>('0');
const [selectedCity, setSelectedCity] = useState<string>('0');
const [selectedPosition, setSelectedPosition] = useState<[number, number]>([
0,
0,
]);
const [initialPosition, setInitialPosition] = useState<[number, number]>([
0,
0,
]);
const history = useHistory();
// Get Current Position
useEffect(() => {
navigator.geolocation.getCurrentPosition(
position => {
const { latitude, longitude } = position.coords;
setInitialPosition([latitude, longitude]);
},
() => {
toast.error('❌ Oops! Algo deu errado =/', toastOptions);
},
{
timeout: 30000,
enableHighAccuracy: true,
},
);
}, []);
// Load items
useEffect(() => {
async function loadItems() {
const response = await api.get('/items');
setItems(response.data);
}
loadItems();
}, []);
// Load UFs
useEffect(() => {
async function loadUfs() {
const response = await ibge.get<IBGEUFResponse[]>(
'localidades/estados?orderBy=nome',
);
const ufInitials = response.data.map(uf => {
return {
sigla: uf.sigla,
nome: uf.nome,
};
});
setUfs(ufInitials);
}
loadUfs();
}, []);
// Load Cities
useEffect(() => {
async function loadCities() {
if (selectedUf === '0') return;
const response = await ibge.get<IBGECityResponse[]>(
`localidades/estados/${selectedUf}/municipios`,
);
const cityNames = response.data.map(city => {
return { nome: city.nome };
});
setCities(cityNames);
}
loadCities();
}, [selectedUf]);
function handleSelectUf(event: ChangeEvent<HTMLSelectElement>) {
setSelectedUf(event.target.value);
}
function handleSelectCity(event: ChangeEvent<HTMLSelectElement>) {
setSelectedCity(event.target.value);
}
function handleMapClick(event: LeafletMouseEvent) {
setSelectedPosition([event.latlng.lat, event.latlng.lng]);
}
function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
}
function handleSelectItem(id: number) {
const alreadySelected = selectedItems.findIndex(item => item === id);
if (alreadySelected >= 0) {
const filteredItems = selectedItems.filter(item => item !== id);
setSelectedItems(filteredItems);
} else {
setSelectedItems([...selectedItems, id]);
}
}
// Toastify configurations
const toastOptions = {
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
};
const handleSubmit = useCallback(
async (event: FormEvent) => {
event.preventDefault();
try {
const { name, email, whatsapp } = formData;
const [latitude, longitude] = selectedPosition;
const data = new FormData();
data.append('name', name);
data.append('email', email);
data.append('whatsapp', whatsapp);
data.append('latitude', String(latitude));
data.append('longitude', String(longitude));
data.append('uf', selectedUf);
data.append('city', selectedCity);
data.append('items', selectedItems.join(','));
if (selectedFile) {
data.append('image', selectedFile);
}
await api.post('points', data);
toast('✅ Criado com sucesso!', toastOptions);
history.push('/');
} catch (err) {
toast.error('❌ Erro!', toastOptions);
}
},
[
formData,
selectedCity,
selectedItems,
selectedPosition,
selectedUf,
history,
selectedFile,
],
);
return (
<div id="page-create-point">
<header>
<img src={logo} alt="Ecoleta" />
<Link to="/">
<FiArrowLeft />
Voltar para home
</Link>
</header>
<form onSubmit={handleSubmit}>
<h1>
Cadastro do
<br /> ponto de coleta
</h1>
<Dropzone onFileUploaded={setSelectedFile} />
<fieldset>
<legend>
<h2>Dados</h2>
</legend>
<div className="field">
<label htmlFor="name">Nome da entidade</label>
<input
onChange={handleInputChange}
type="text"
name="name"
id="name"
/>
</div>
<div className="field-group">
<div className="field">
<label htmlFor="email">E-mail</label>
<input
onChange={handleInputChange}
type="text"
name="email"
id="email"
/>
</div>
<div className="field">
<label htmlFor="whatsapp">Whatsapp</label>
<input
onChange={handleInputChange}
type="text"
name="whatsapp"
id="whatsapp"
/>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h2>Endereço</h2>
<span>Selecione o endereço no mapa</span>
</legend>
<Map center={initialPosition} zoom={15} onClick={handleMapClick}>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={selectedPosition} />
</Map>
<div className="field-group">
<div className="field">
<label htmlFor="uf">Estado (UF)</label>
<select onChange={handleSelectUf} name="uf" id="uf">
<option value="0">Selecione uma UF</option>
{ufs?.map(uf => (
<option key={uf.nome} value={uf.sigla}>
{uf.sigla}
</option>
))}
</select>
</div>
<div className="field">
<label htmlFor="city">Cidade</label>
<select onChange={handleSelectCity} name="city" id="city">
<option value="0">Selecione uma cidade</option>
{cities.map(city => (
<option key={city.nome} value={city.nome}>
{city.nome}
</option>
))}
</select>
</div>
</div>
</fieldset>
<fieldset>
<legend>
<h2>Itens de coleta</h2>
<span>Selecione um ou mais itens abaixo</span>
</legend>
<ul className="items-grid">
{items.map(item => (
<li
key={item.id}
onClick={() => handleSelectItem(item.id)}
className={selectedItems.includes(item.id) ? 'selected' : ''}
>
<img src={item.image_url} alt={item.title} />
<span>{item.title}</span>
</li>
))}
</ul>
</fieldset>
<button type="submit">Cadastrar novo ponto de coleta</button>
</form>
</div>
);
}
Example #29
| Source File: index.tsx From NextLevelWeek with MIT License | 4 votes |
|
Orphanage: React.FC = () => {
const params = useParams<IOrphanageParams>();
const [orphanage, setOrphanage] = useState<IOpharnage>();
const [activeImageIndex, setActiveImageIndex] = useState(0);
useEffect(() => {
api.get(`/orphanages/${params.id}`).then(res => {
// console.log(res.data);
setOrphanage(res.data);
});
}, [params.id]);
if (!orphanage) {
return <p>Carregando..</p>;
// Fazer em Shimmer
}
return (
<Container>
<Sidebar />
<Content>
<DetailsContainer>
<img src={orphanage.images[activeImageIndex].url} alt={orphanage.name} />
<ImagesContainer>
{orphanage.images.map((image, index) => {
return (
<ButtonImage
key={image.id}
type="button"
active={activeImageIndex === index}
onClick={() => {
setActiveImageIndex(index);
}}
>
<img src={image.url} alt={orphanage.name} />
</ButtonImage>
);
})}
</ImagesContainer>
<OrphanageDetails>
<h1>{orphanage.name}</h1>
<p>{orphanage.about}</p>
<MapContainer>
<Map
center={[orphanage.latitude, orphanage.longitude]}
zoom={16}
style={{ width: '100%', height: 280 }}
dragging={false}
touchZoom={false}
zoomControl={false}
scrollWheelZoom={false}
doubleClickZoom={false}
>
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/>
<Marker interactive={false} icon={happyMapIcon} position={[orphanage.latitude, orphanage.longitude]} />
</Map>
<footer>
<a target="_blank" rel="noopener noreferrer" href={`https://www.google.com/maps/dir/?api=1&destination=${orphanage.latitude},${orphanage.longitude}`}>Ver rotas no Google Maps</a>
</footer>
</MapContainer>
<hr />
<h2>Instruções para visita</h2>
<p>{orphanage.instructions}</p>
<OpenDetails>
<OpeningHoursContainer>
<FiClock size={32} color="#15B6D6" />
Segunda à Sexta <br />
{orphanage.opening_hours}
</OpeningHoursContainer>
{orphanage.open_on_weekends ? (
<OpenWeekends open={orphanage.open_on_weekends}>
<FiInfo size={32} />
Atendemos <br />
fim de semanada
</OpenWeekends>
) : (
<OpenWeekends open={orphanage.open_on_weekends}>
<FiInfo size={32} />
Não atendemos <br />
no fim de semanada
</OpenWeekends>
)
}
<button type="button">
<FaWhatsapp size={20} color="#FFF" />
Entrar em contato
</button>
</OpenDetails>
</OrphanageDetails>
</DetailsContainer>
</Content>
</Container>
);
}
