123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218 |
- import * as React from 'react';
- import PropTypes from 'prop-types';
- import Tabs from '@mui/material/Tabs';
- import Tab from '@mui/material/Tab';
- import Typography from '@mui/material/Typography';
- import Box from '@mui/material/Box';
- import Breadcrumbs from "../components/Breadcrumbs";
- import {useState} from "react";
- import {Container, Grid, useMediaQuery} from "@mui/material";
- import FacebookIcon from "@mui/icons-material/Facebook";
- import InstagramIcon from "@mui/icons-material/Instagram";
- import TwitterIcon from "@mui/icons-material/Twitter";
- import YouTubeIcon from "@mui/icons-material/YouTube";
- import Social from "../components/SocialLink";
- import GoogleMap from "../components/GoogleMap";
- const defaultAddress = {
- 'NEW YORK': {
- phones: ['212-371-8500', '212-371-8555'],
- address: '9 East 40th Street, 3rd Floor, New York City',
- email: ['newyork@gmail.com'],
- "social networks": [
- {icon: FacebookIcon, url: 'https://www.facebook.com/'},
- {icon: InstagramIcon, url: 'https://www.instagram.com/'},
- {icon: TwitterIcon, url: 'https://twitter.com/home'},
- {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
- ],
- coordinates: {
- lat: 40.751936,
- lng: -73.981081
- }
- },
- 'TOKYO':{
- phones: ['212-371-8500', '212-371-8555'],
- address: 'Япония, 〒162-0044 Tokyo, Shinjuku City, Kikuicho, 20−110 エヌエフ喜久井町',
- email: ['tokyo@gmail.com'],
- "social networks": [
- {icon: FacebookIcon, url: 'https://www.facebook.com/'},
- {icon: InstagramIcon, url: 'https://www.instagram.com/'},
- {icon: TwitterIcon, url: 'https://twitter.com/home'},
- {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
- ],
- coordinates: {
- lat: 35.704015,
- lng: 139.721445
- }
- },
- 'LONDON':{
- phones: ['212-371-8500', '212-371-8555'],
- address: 'Randolph St, London NW1 0TL, Great Britain',
- email: ['london@gmail.com'],
- "social networks": [
- {icon: FacebookIcon, url: 'https://www.facebook.com/'},
- {icon: InstagramIcon, url: 'https://www.instagram.com/'},
- {icon: TwitterIcon, url: 'https://twitter.com/home'},
- {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
- ],
- coordinates: {
- lat: 51.541663,
- lng: -0.136698
- }
- },
- 'PARIS':{
- phones: ['212-371-8500', '212-371-8555'],
- address: '22 Pass. Hébrard, 75010 Paris, France',
- email: ['paris@gmail.com'],
- "social networks": [
- {icon: FacebookIcon, url: 'https://www.facebook.com/'},
- {icon: InstagramIcon, url: 'https://www.instagram.com/'},
- {icon: TwitterIcon, url: 'https://twitter.com/home'},
- {icon: YouTubeIcon, url: 'https://www.youtube.com/'},
- ],
- coordinates: {
- lat: 48.873213,
- lng: 2.373185
- }
- },
- }
- function TabPanel(props) {
- const { children, value, index, ...other } = props;
- return (
- <div
- role="tabpanel"
- hidden={value !== index}
- id={`simple-tabpanel-${index}`}
- aria-labelledby={`simple-tab-${index}`}
- {...other}
- >
- {value === index && (
- <Box sx={{ p: 3 }}>
- {children}
- </Box>
- )}
- </div>
- );
- }
- TabPanel.propTypes = {
- children: PropTypes.node,
- index: PropTypes.number.isRequired,
- value: PropTypes.number.isRequired,
- };
- function a11yProps(index) {
- return {
- id: `simple-tab-${index}`,
- 'aria-controls': `simple-tabpanel-${index}`,
- };
- }
- const AddressItem = ({item}) => {
- return (
- <>
- <Grid padding='50px 40px !important' item xs={12} md={6}>
- <Typography
- variant="h5"
- letterSpacing="2px"
- marginBottom='40px'
- >
- {item[0].toString()}
- </Typography>
- <Grid color="#616161" container spacing={2}>
- <Grid marginBottom='30px' item xs={12} sm={6}>
- <Typography
- fontSize='13px'
- fontWeight='300'
- marginBottom='15px'
- >
- PHONES
- </Typography>
- {item[1].phones.map((i, index) => <Typography key={index} lineHeight='1.7em' fontWeight='400' variant="body1">{i.toString()}</Typography>)}
- </Grid>
- <Grid marginBottom='30px' item xs={12} sm={6}>
- <Typography
- fontSize='13px'
- fontWeight='300'
- marginBottom='15px'
- >
- ADDRESS
- </Typography>
- <Typography lineHeight='1.7em' fontWeight='400' variant="body1">{item[1].address}</Typography>
- </Grid>
- <Grid marginBottom='30px' item xs={12} sm={6}>
- <Typography
- fontSize='13px'
- fontWeight='300'
- marginBottom='15px'
- >
- EMAIL
- </Typography>
- {item[1].email.map(i => <Typography key={i.toString()} lineHeight='1.7em' fontWeight='400' variant="body1">{i.toString()}</Typography>)}
- </Grid>
- <Grid marginBottom='30px' item xs={12} sm={6}>
- <Typography
- fontSize='13px'
- fontWeight='300'
- marginBottom='15px'
- >
- SOCIAL NETWORKS
- </Typography>
- {(item[1]["social networks"] || []).map(item =>
- <Social key={item.url} Icon={item.icon} link={item.url}/>
- )}
- </Grid>
- </Grid>
- </Grid>
- </>
- )
- }
- const Contact = ({address=defaultAddress}) => {
- const matches = useMediaQuery('(max-width:768px)');
- const matches2 = useMediaQuery('(max-width:420px)');
- const [value, setValue] = useState(0);
- const handleChange = (event, newValue) => {
- setValue(newValue);
- };
- return (
- <>
- <Breadcrumbs links={['contact']}/>
- <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
- <Container maxWidth="lg">
- <Box sx={{ width: '100%' }}>
- <Box sx={{ color: "#616161" }}>
- <Tabs
- value={value}
- onChange={handleChange}
- aria-label="contact"
- textColor="inherit"
- variant={matches2 ? "scrollable" : "standard"}
- TabIndicatorProps={{style: {background:'#616161', height: '1px'}}}
- sx={{fontWeight: 300, marginBottom: '30px'}}
- centered
- >
- {Object.keys(address).map((value, index) => {
- return <Tab key={index} sx={{borderBottom: '1px solid #dedede'}} label={value.toString()} {...a11yProps(index)} />
- })}
- </Tabs>
- </Box>
- {Object.entries(address).map((item, index) => {
- return (
- <TabPanel key={index} value={value} index={index}>
- <Grid sx={{backgroundColor: '#fff', padding: '0px 0px', marginLeft: '-10px'}} container spacing={2}>
- <AddressItem key={index} item={item} />
- <Grid sx={{padding: '0px 0px !important', position: 'relative', height: matches ? '300px': '500px'}} item xs={12} md={6}>
- <GoogleMap lat={item[1].coordinates.lat} lng={item[1].coordinates.lng} key={index} />
- </Grid>
- </Grid>
- </TabPanel>
- )
- })}
- </Box>
- </Container>
- </main>
- </>
- )
- }
- export default Contact
|