98 lines
4.0 KiB
TypeScript
98 lines
4.0 KiB
TypeScript
"use client"
|
|
import React,{useEffect} from 'react'
|
|
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
|
|
import Loading from '../Loading'
|
|
import Link from 'next/link'
|
|
import { SettingsProps } from '@/types';
|
|
import { HiLocationMarker } from "react-icons/hi";
|
|
import { MdEmail } from "react-icons/md";
|
|
import { FaPhone } from "react-icons/fa6";
|
|
import mailgo from "mailgo";
|
|
const containerStyle = {
|
|
width: '100%',
|
|
height: '100%'
|
|
};
|
|
const Map = ({ settings }: { settings: SettingsProps }) => {
|
|
const center = {
|
|
lat: settings.latitude,
|
|
lng: settings.longitude,
|
|
};
|
|
|
|
useEffect(() => {
|
|
mailgo();
|
|
}, []);
|
|
|
|
return (
|
|
<div className='relative flex flex-col w-full h-auto items-center pb-30 bg-[#F6E8E9]'>
|
|
<div className='flex-col flex w-[80vw] h-[40vw] items-center rounded-lg overflow-hidden'>
|
|
<LoadScript googleMapsApiKey="AIzaSyBp6yD01sMuqJh2_OqmTjIUQa24Ykhn3Bo" loadingElement={<Loading />}>
|
|
<GoogleMap
|
|
mapContainerStyle={containerStyle}
|
|
zoom={18}
|
|
center={center}
|
|
>
|
|
<Marker key={"1"} position={center}
|
|
// icon={{ url: '/images/smalllogo.png', scaledSize: new window.google.maps.Size(40, 40) }}
|
|
/>
|
|
</GoogleMap>
|
|
</LoadScript>
|
|
</div>
|
|
<div className="flex justify-start w-[80vw] mt-10 mb-32">
|
|
<div className="flex flex-col lg:flex-row justify-between w-[70vw] ">
|
|
<div className='flex flex-row'>
|
|
<div className='flex h-6 w-6 min-w-[1.5rem] min-h-[1.5rem] justify-center items-center rounded-full bg-mainColor'>
|
|
<HiLocationMarker className='text-white' size={12} />
|
|
</div>
|
|
|
|
<div className='flex flex-col ml-3'>
|
|
<p>
|
|
{"地址"}
|
|
</p>
|
|
<button className='text-gray-700 hover:text-mainColor text-left'
|
|
onClick={() => { window.open(`https://maps.google.com/?q=${settings.latitude},${settings.longitude}`, '_blank') }}>
|
|
{settings.address}
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div className='flex flex-row'>
|
|
<div className='flex h-6 w-6 items-center justify-center rounded-full bg-mainColor'>
|
|
<MdEmail className='text-white' size={12} />
|
|
</div>
|
|
<div className='flex flex-col ml-3'>
|
|
<p>
|
|
{"電郵"}
|
|
</p>
|
|
<Link href={`mailto:${settings.email}`}>
|
|
<p className='text-gray-700 hover:text-mainColor'>
|
|
{settings.email}
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
|
|
</div>
|
|
<div className='flex flex-row'>
|
|
|
|
<div className='flex h-6 w-6 items-center justify-center rounded-full bg-mainColor'>
|
|
<FaPhone className='text-white' size={12} />
|
|
</div>
|
|
<div className='flex flex-col ml-3'>
|
|
<p>
|
|
{"電話"}
|
|
</p>
|
|
<Link href={`tel:${settings.phone}`}>
|
|
<p className='text-gray-700 hover:text-mainColor'>
|
|
{settings.phone}
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Map
|