frondend/components/Aboutus/Map.tsx

"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