feat: google map

La-Fresca · Aug 9, 2024 · ae6eb30 · ae6eb30
1 parent 97b7a0e
commit ae6eb30
Showing 1 changed file with 80 additions and 83 deletions.
diff --git a/src/components/User/Checkout/index.tsx b/src/components/User/Checkout/index.tsx
@@ -1,12 +1,23 @@
 import { Button } from '@nextui-org/react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 function index() {
   const navigate = useNavigate();
+
+  const [isEditable, setIsEditable] = useState(false);
+
+  const handleButtonClick = () => {
+    setIsEditable((prev) => !prev);
+  };
+
   return (
     <section
       className="bg-white py-8 antialiased dark:bg-foodbg dark:border dark:border-foodbg backdrop-blur-md rounded-2xl md:py-16"
-      style={{boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.12)', backgroundColor: 'rgba(255, 255, 255, 0.01)'}}
+      style={{
+        boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.12)',
+        backgroundColor: 'rgba(255, 255, 255, 0.01)',
+      }}
     >
       <form action="#" className="mx-auto max-w-screen-xl px-4 2xl:px-0">
         <ol className="items-center flex w-full max-w-2xl text-center text-sm font-medium text-gray-500 dark:text-white sm:text-base">
@@ -89,96 +100,67 @@ function index() {
               <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                 <div>
                   <label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
-                    {' '}
                     First name*
                   </label>
                   <input
                     type="text"
-                    id="your_name"
+                    id="first_name"
                     className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
                     placeholder="Bonnie Green"
                     required
+                    disabled={!isEditable}
                     style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
                   />
                 </div>
 
                 <div>
                   <label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
-                    {' '}
                     Last name*
                   </label>
                   <input
                     type="text"
-                    id="your_name"
+                    id="last_name"
                     className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
                     placeholder="Bonnie Green"
                     required
+                    disabled={!isEditable}
                     style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
                   />
                 </div>
 
                 <div>
                   <label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
-                    {' '}
                     Street address*
                   </label>
                   <input
                     type="text"
-                    id="your_name"
+                    id="street_address"
                     className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
                     placeholder="Street Address"
                     required
+                    disabled={!isEditable}
                     style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
                   />
                 </div>
 
                 <div>
                   <label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
-                    {' '}
                     City*
                   </label>
                   <input
                     type="text"
-                    id="your_name"
+                    id="city"
                     className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
                     placeholder="City"
                     required
+                    disabled={!isEditable}
                     style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
                   />
                 </div>
 
-                {/* <div>
-                  <div className="mb-2 flex items-center gap-2">
-                    <label className="block text-sm font-medium text-foodbg dark:text-white">
-                      {' '}
-                      Province*{' '}
-                    </label>
-                  </div>
-                  <select
-                    id="select-country-input-3"
-                    className="block w-full rounded-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"
-                    style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
-                  >
-                    <option hidden selected>
-                      Province
-                    </option>
-                    <option value="W">Westrn</option>
-                    <option value="E">Eastern</option>
-                    <option value="N">Northern</option>
-                    <option value="S">Southern</option>
-                    <option value="C">Central</option>
-                    <option value="NW">North Western</option>
-                    <option value="NC">North Central</option>
-                    <option value="U">Uva</option>
-                    <option value="S">Sabaragamuwa</option>
-                  </select>
-                </div> */}
-
-                {/* phone number */}
                 <div>
                   <label className="mb-2 block text-sm font-medium text-foodbg dark:text-white">
-                    {' '}
-                    Phone Number*{' '}
+                    Phone Number*
                   </label>
                   <div className="flex items-center">
                     <div
@@ -220,53 +202,66 @@ function index() {
 
                           <path d="M35.1 12.7c-.1-1.7 0-3.7-2.2-3.8c-.9-.1-1.1.3-1.5.4c-.3 0-1.1.1-1.1.1l.1.8c0 .1-1.2 1.6-.1 2.7c.9.9 3.1.9 4.1 1.7c.7.5 1.4 1.8 1.4 1.8s0-.9-.2-1.4c-.1-.8-.4-1.7-.5-2.3"></path>
 
-                          <path d="M61.8 28.7c-.8 0-1.5-.1-2.2-.1c.3.2-.8-3.5-.2-4c.7-.6.2-4.2-.4-5c0-.1 0-.3.1-.4c-.3-.7-.7-1.4-1.1-2c-1.1-.4-2-1.1-2.4.5c-.4-.5-1.5-1.6-2.2-1.3c-.1.4-.2.8-.4 1.2c-.5.2-2.3-.8-3.3-.6c0 2-1.2 1.2-2.6 1.9c-2.6 1.2-1.3-1.1-3-1.1c-3.2 0 1.3 4.9 2.1 5.4c.1-.2-.3-.6 0-.8c0 0 1.1.9 1.1.6c.1-.3.1-.6.3-.8c.3.5 2.6 3.2 2.1 3.7c-.1.1-2.3-.1-2.3-.1c.1-.2.2-.7.2-.8c-.7-.7-2-.8-2.7-.6c-.6.2-1.7 1-1.8 2c.4-.1 1.8-.5 2-.3c.1.1-.4.8-.4.9c.6 0 1.8.3 2.1.3c.1-.2.3-.5.4-.7c.3.4.5.8.8 1.3c.3.2.9-1.8 1.5-.4c.2.5-4.9 5.3-5.2 7.1c-.2 1 0 2 .4 2.9c-.9-1-3.3-3.7-3.9-3.4c-1.5.8-.2 5.4.5 6.3c.8 1.1 5.5 3.8 5.5.2c0-.2-.2-.5-.4-.9c1.1.7 2.5 1.3 3.1 2c.7.8 1.3 3 1.2 4.2c-.3 2.9-4.8.2-4.8 3.4c0-.4 4.4.2 4.7-.1c.7-.5 2.9 1.2 2.5-1.2c-.4-2.4 2.5-1.3 2.5-3.2c0-1-3.1.2-1.4-2.5c.7-1 .2-2.4 1-1.3c1.3 1.6 3.4.5 5.7-.7c.7-2.6 1.1-5.3 1.1-8.1c0-1.3-.1-2.4-.2-3.5"></path>
-
-                          <path d="M40 41.8c-.2.7-1.2-3.1-1-3.3c.4.1.7.1 1.1.1c.3-.2-.7-.7-1.6-1c.8 0 1.5-.3 1.5-.5s-.4-.4-1.1-.5c.6-.1 1-.3 1-.5s-.5-.4-1.2-.5c.7-.1 1.3-.3 1.3-.5s-.3-.4-.8-.5c.6-.1 1-.3 1-.6c0-.2-.3-.4-.8-.5c.5-.1.9-.2 1.2-.3c1.7-1.8-.5-3-.5-1.1c0 .8-2.2.5-2.6.3c-.4-.2-.2-.4 0-.7c.4.2 2.2.5 2.3-2.1c.1-1.1.1-16.3 1.5-16.3c-5.9-.3-3.3 14.6-3.8 17.9c-.4-.7-2.1.1-1.6 1.2c.3.6 1 .9 1.7 1.1c-.5.1-.9.3-.9.5s.3.4.8.5c-.6.1-1 .3-1 .5s.5.4 1.2.5c-.7.1-1.3.3-1.3.5s.5.4 1.1.5c-.6.1-1 .3-1 .5s.3.4.8.5c-.4.1-.6.3-.6.6l1.2.6c0 .8-.4 2.5-.7 3.3c-.1-.3-.4-.4-.6-.5c-1.3.1 1 1.6 1 1.5c0 .5-.5.4-.7.7c0 0 1.6 1 1.6 1.2c.2-.2 1.5-1.1 1.6-1.2c-.2-.2-.7-.4-.7-.7c0-.2 1.3-.5 1.4-.9c.1-.4-.7-.8-.8-.3"></path>
+                          <path d="M61.8 28.7c-.8 0-1.5-.1-2.2-.1c.3.2-.8-3.5-.2-4c.7-.6.2-4.2-.4-5c0-.1 0-.3.1-.4c-.3-.7-.7-1.4-1.1-2c-1.1-.4-2-1.1-2.4.5c-.4-.5-1.5-1.6-2.2-1.3c-.1.4-.2.8-.4 1.2c-.5.2-2.3-.8-3.3-.6c0 2-1.2 1.2-2.6 1.9c-2.6 1.2-1.3-1.1-3-1.1c-3.2 0 1.3 4.9 2.1 5.4c.1-.2-.3-.6 0-.8c0 0 1.1.9 1.1.6c.1-.3.1-.6.3-.8c.3.5 2.6 3.2 2.1 3.7c-.1.1-2.3-.1-2.3-.1c.1-.2.2-.7.2-.8c-.7-.7-2-.8-2.7-.6c-.6.2-1.7 1-1.8 2c.4-.1 1.8-.5 2-.3c.2.2-.3 1.3-.4 1.5c-1.1 1.6-.6.5-.8 1.7c-.2 1.3-.2 2.3 0 3.5c.3 2.5.5 3.4.4 6.1c-.2 5.3-1.4 4.4-1.3 7.7c.1 1.9.6 4 .9 5.9c.2 1 .1 2.3 1 2.6c.5.2 1.1-.2 1.5.1c.5.4.1 1.4.4 1.8c.4.5 2 .4 2.3.9c.5.9.1 2.2.3 3.1c.2.9.4 2.2.9 3.1c.4.8 1.2 1.5 2 2c.7.4 1.7 1.1 2.4 1.4c.6.2 1.7 0 2.4.1c.6.1 1.1.4 1.5.9c.8.8 2.1 1.8 3.2 1.8c.7 0 2-.7 2-1.6c0-1.1-1.8-.6-1.8-2.6c0-1.4.5-2.6-.3-3.8c-.6-.9-2-2.1-2.8-3.2c-.5-.7-.5-1.5-1.1-2.2c-.5-.7-2.6-1.4-3-2.1c-.1-.2-.2-.8-.1-1c.2-.5.4-.9.6-1.4c1.2-3 .7-2.2 1.1-5.3c.4-2.8.6-5.6.6-8.5c0-2.2 1.6-4.7 1.8-7c.2-2 .6-3.8 1.4-5.7c.7-1.7 2-4.3 1.9-6.1c0-1.6-.4-3.2-1.4-4.4c-.2-.3-.5-.3-.7-.5c-.5-.3-.6-1-.9-1.5c-.4-.7-.4-1.7-.5-2.4c0-.5 0-1-.3-1.4c-.2-.4-1.1-1.5-1.7-1.6c-.3 0-.7 0-1-.1z"></path>
                         </g>
+
+                        <path
+                          fill="#fff"
+                          d="M54.9 37.6c-.2.1-2.2-.5-2.4-.5c-.2 0-1.4-1-1.6-1.1c-.2-.1-1.7-.4-1.7-.3c.1.1 1.2 2.7 1.3 2.7c0 0-2.3 1-2.4 1.3c0 .1.5 1.4.7 1.4c.1 0 2.6-1 2.7-1c.1 0 1.1.4 1.3.6c.2.2 1.3 2.2 1.4 2.2c.1 0 1.2-1.1 1.3-1.4c.1-.3-1.2-2.5-1.4-2.7c-.1-.2-.9-.7-.9-.7l2.6-1.4c0-.1-.7-1.4-.9-1.4z"
+                        ></path>
+                      </svg>
+                      +61
+                      <svg
+                        className="h-2.5 w-2.5"
+                        aria-hidden="true"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 10 6"
+                      >
+                        <path
+                          stroke="currentColor"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="m1 1 4 4 4-4"
+                        />
                       </svg>
-                      +94
-                    </div>
-                    <div className="relative w-full">
-                      <input
-                        type="text"
-                        id="phone-input"
-                        className="block w-full border border-s-0 rounded-e-lg border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg p-2.5 text-sm dark:text-white outline-none focus:dark:border-white hover:dark:border-white duration-200"pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
-                        placeholder="12-3456789"
-                        required
-                        style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
-                      />
                     </div>
+                    <input
+                      type="text"
+                      id="phone_number"
+                      className="rounded-e-lg border border-[rgba(0,0,0,0.3)] hover:border-foodbg focus:border-foodbg dark:border-foodbg dark:bg-foodbg block w-full p-2.5 text-sm text-gray-900 outline-none dark:text-white focus:dark:border-white hover:dark:border-white duration-200"
+                      placeholder="Phone Number"
+                      required
+                      disabled={!isEditable}
+                      style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
+                    />
                   </div>
                 </div>
+              </div>
 
-                {/* <div className="sm:col-span-2">
-                  <button
-                    type="submit"
-                    className="flex w-full items-center justify-center gap-2 rounded-lg border dark:border-foodbg dark:bg-foodbg hover:dark:border-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-700 duration-200"
-                    style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
-                  >
-                    <svg
-                      className="h-5 w-5"
-                      aria-hidden="true"
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M5 12h14m-7 7V5"
-                      />
-                    </svg>
-                    Add new address
-                  </button>
-                </div> */}
+              <div
+                className="w-[100%] h-[200px] rounded-xl bg-foodbg"
+                style={{ backgroundColor: 'rgba(255, 255, 255, 0.05)' }}
+              >
+                <iframe
+                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d632.9410776134524!2d79.86108248734442!3d6.9020645252537935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae25963120b1509%3A0x2db2c18a68712863!2sUniversity%20of%20Colombo%20School%20of%20Computing%20(UCSC)!5e0!3m2!1sen!2slk!4v1723190413279!5m2!1sen!2slk"
+                  width="600"
+                  height="450"
+                  style={{ border: 0 }}
+                  allowFullScreen
+                  loading="lazy"
+                  referrerPolicy="no-referrer-when-downgrade"
+                  className="rounded-xl h-[200px] w-[100%]"
+                ></iframe>
               </div>
+
+              <button
+                onClick={handleButtonClick}
+                className="bg-foodbg text-white px-4 py-2 rounded-lg mt-4"
+              >
+                {isEditable ? 'Save' : 'Edit'}
+              </button>
             </div>
 
             {/* Card details */}
@@ -396,23 +391,25 @@ function index() {
                     Subtotal
                   </dt>
                   <dd className="text-base font-medium text-gray-900 dark:text-white">
-                  Rs. 0
+                    Rs. 0
                   </dd>
                 </dl>
 
                 <dl className="flex items-center justify-between gap-4 py-3">
                   <dt className="text-base font-normal text-gray-500 dark:text-gray-400">
                     Savings
                   </dt>
-                  <dd className="text-base font-medium text-green-500">0</dd>
+                  <dd className="text-base font-medium text-green-500">
+                    Rs. 0
+                  </dd>
                 </dl>
 
                 <dl className="flex items-center justify-between gap-4 py-3">
                   <dt className="text-base font-normal text-gray-500 dark:text-gray-400">
                     Delivery fee
                   </dt>
                   <dd className="text-base font-medium text-gray-900 dark:text-white">
-                  Rs. 0
+                    Rs. 0
                   </dd>
                 </dl>
 
@@ -421,7 +418,7 @@ function index() {
                     Total
                   </dt>
                   <dd className="text-base font-bold text-gray-900 dark:text-white">
-                  Rs. 0
+                    Rs. 0
                   </dd>
                 </dl>
               </div>