fix: footer linkedin data, integrated from payload

src/components/Footer.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { FaClock, FaFacebook, FaFax, FaMapMarkerAlt, FaPhone } from "react-icons/fa";
+import { FaClock, FaFacebook, FaFax, FaLinkedin, FaMapMarkerAlt, FaPhone } from "react-icons/fa";
 import ScrollToTop from "./ScrollToTop";
 import { fetchContact } from "@/services/payload/contact";
 
@@ -30,7 +30,7 @@ export default async function Footer() {
               <FaMapMarkerAlt className="text-2xl text-gray-300" />
               <div className="leading-tight">
                 <a
-                  href="https://www.google.com/maps/place/5151+AZ-90,+Sierra+Vista,+AZ+85635"
+                  href={contact?.location?.href ?? ""}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-lg text-white"
@@ -43,13 +43,27 @@ export default async function Footer() {
             </li>
             <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
               <FaPhone className="text-2xl text-gray-300" />
-              <span className="text-lg">{contact?.phone ?? ""}</span>
+              <a
+                href={`tel:${contact?.phone ?? ""}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-lg text-white"
+              >
+                {contact?.phone ?? ""}
+              </a>
             </li>
             <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
               <FaFax className="text-2xl text-gray-300" />
-              <span className="text-lg">Fax: {contact?.fax ?? ""}</span>
+              <a
+                href={`tel:${contact?.fax ?? ""}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-lg text-white"
+              >
+                Fax: {contact?.fax ?? ""}
+              </a>
             </li>
-            <li className="flex items-center space-x-4">
+            <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
               <FaFacebook className="text-2xl text-gray-300" />
               <a
                 href={contact?.facebook ?? ""}
@@ -60,6 +74,17 @@ export default async function Footer() {
                 Facebook
               </a>
             </li>
+            <li className="flex items-center space-x-4">
+              <FaLinkedin className="text-2xl text-gray-300" />
+              <a
+                href={contact?.linkedin ?? ""}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-lg text-white"
+              >
+                Linkedin
+              </a>
+            </li>
           </ul>
         </div>
 
@@ -119,6 +144,11 @@ export function FooterSkeleton() {
               <div className="h-2 bg-gray-300 rounded flex-1"></div>
               <div className="h-2 bg-gray-300 rounded flex-1"></div>
             </li>
+            <li className="flex items-center space-x-4">
+              <FaLinkedin className="text-2xl text-gray-300" />
+              <div className="h-2 bg-gray-300 rounded flex-1"></div>
+              <div className="h-2 bg-gray-300 rounded flex-1"></div>
+            </li>
           </ul>
         </div>
 

src/globals/Contacts.ts

@@ -54,6 +54,11 @@ export const Contacts: GlobalConfig = {
       label: "Facebook Link",
       type: "text",
     },
+    {
+      name: "linkedin",
+      label: "Linkedin Link",
+      type: "text",
+    },
     {
       name: "hours",
       label: "Business Hours",

src/payload-types.ts

@@ -945,6 +945,7 @@ export interface Contact {
   phone?: string | null;
   fax?: string | null;
   facebook?: string | null;
+  linkedin?: string | null;
   hours?:
     | {
         hour?: string | null;
@@ -990,6 +991,7 @@ export interface ContactsSelect<T extends boolean = true> {
   phone?: T;
   fax?: T;
   facebook?: T;
+  linkedin?: T;
   hours?:
     | T
     | {