updated

components/Aboutus/Map.tsx

@@ -0,0 +1,96 @@
+"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 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'
+                                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