fix header bug & change Customer and Service Typescripts error

src/app/(home)/components/Customer/index.tsx

@@ -10,9 +10,21 @@ import { GoChevronLeft, GoChevronRight } from "react-icons/go";
 import styles from "./customer.module.css";
 import { fetchCustomers } from "@/lib/cms";
 
+interface CustomerType {
+  id: number;
+  name?: string | null;
+  avatar?: string | null;
+  title?: string | null;
+  content?: string | null;
+  order?: number | null;
+  status?: string | null;
+  createTime?: Date | null;
+  updateTime?: Date | null;
+}
+
 export default function Services() {
   const [swiperRef, setSwiperRef] = useState<SwiperClass | null>(null);
-  const [customerList, setCustomerList] = useState(null);
+  const [customerList, setCustomerList] = useState<CustomerType[] | null>(null);
 
   const slideToNext = () => {
     swiperRef?.slideNext();
@@ -24,7 +36,8 @@ export default function Services() {
 
   useEffect(() => {
     fetchCustomers().then(({ data: list }) => {
-      setCustomerList(list);
+      const records = [...list?.records];
+      setCustomerList(records);
     });
   }, []);
 
@@ -49,13 +62,13 @@ export default function Services() {
               slidesPerView={isMobile ? 1 : 2}
               onSwiper={setSwiperRef}
             >
-              {customerList?.records?.map((item, index) => {
+              {customerList?.map((item, index) => {
                 return (
                   <SwiperSlide key={index}>
                     <div className={styles["col-md-5"]}>
                       <div className={styles["card-item"]}>
                         <div className={styles["circle-box"]}>
-                          <Image alt="avatar" width={96} height={96} className={styles.img} src={item.avatar} />
+                          <Image alt="avatar" width={96} height={96} className={styles.img} src={item.avatar!} />
                         </div>
                         <div className={styles["card-content"]}>
                           <div className={styles.group}>

src/app/(home)/components/Services/index.tsx

@@ -1,10 +1,31 @@
-import React from "react";
+"use client";
+
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
 import styles from "./services.module.css";
 import { fetchServiceProducts } from "@/lib/cms";
 
-export default async function Service() {
-  const { data: servicesList } = await fetchServiceProducts();
+interface ServiceType {
+  id: number;
+  fileUrl?: string | null;
+  icon?: string | null;
+  title?: string | null;
+  desc?: string | null;
+  order?: number | null;
+  status?: string | null;
+  createTime?: Date | null;
+  updateTime?: Date | null;
+}
+
+const Service: React.FC = () => {
+  const [serviceList, setServiceList] = useState<ServiceType[] | null>(null);
+
+  useEffect(() => {
+    fetchServiceProducts().then(({ data: list }) => {
+      const records = [...list?.records];
+      setServiceList(records);
+    });
+  }, []);
 
   return (
     <div className={styles.services}>
@@ -17,7 +38,7 @@ export default async function Service() {
         </div>
         <div className={styles["service-details"]}>
           <div className={styles.row}>
-            {servicesList?.records?.map((item, index) => {
+            {serviceList?.map((item, index) => {
               return (
                 <div className={styles["col-md-4"]} key={index}>
                   <a href={item.fileUrl}>
@@ -37,4 +58,6 @@ export default async function Service() {
       </div>
     </div>
   );
-}
+};
+
+export default Service;

src/components/Header/header.module.css

@@ -290,6 +290,10 @@
   display: none;
 }
 
+.nav-content {
+  display: none;
+}
+
 @media screen and (max-width: 767px) {
   .nav {
     display: none;