canary-template2/src/components/Services.tsx

import { Card, CardDescription, CardHeader, CardTitle } from "./ui/card";
import { MagnifierIcon, WalletIcon, ChartIcon } from "./Icons";
import cubeLeg from "../assets/cube-leg.png";
import {useEffect, useState} from "react";
import {extractSubstring} from "@/services/api.ts";
import axios from "axios";

interface ServiceProps {
  title: string;
  content: string;
  icon: JSX.Element;
}
let serviceList: ServiceProps[] = [];
const iconList = [<MagnifierIcon/>, <WalletIcon/>, <ChartIcon/>];
// const serviceList: ServiceProps[] = [
//   {
//     title: "Code Collaboration",
//     description:
//       "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
//     icon: <ChartIcon />,
//   },
//   {
//     title: "Project Management",
//     description:
//       "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
//     icon: <WalletIcon />,
//   },
//   {
//     title: "Task Automation",
//     description:
//       "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt est nostrum omnis ab sapiente.",
//     icon: <MagnifierIcon />,
//   },
// ];

export const Services = () => {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    // 使用 axios 进行 API 调用
    const fetchData = async () => {
      try {
        const websiteCode = extractSubstring(window.location.pathname);
        const response = await axios.get('/api/website/template/getWebsiteByWebsiteCode', {
          params: {
            websiteCode: websiteCode
          }
        });
        const userWebsiteId = response.data.data.id;
        const response2 = await axios.get('/api/website/template/blogs', {
          params: {
            userWebsiteId: userWebsiteId
          }
        });
        serviceList = response2.data.data.map((item, index) => {
          return {
            title: item.name,
            content: item.content.substring(0, 200) + '...',
            icon: iconList[index % iconList.length],
          }
        })
      } catch (err) {
        console.error('Error fetching data:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();

  }, []);
  // 处理加载和错误状态
  if (loading) {
    return <div>Loading...</div>;
  }
  return (
    <section id="services" className="container py-24 sm:py-32">
      <div className="grid lg:grid-cols-[1fr,1fr] gap-8 place-items-center">
        <div>
          <h2 className="text-3xl md:text-4xl font-bold">
            <span className="bg-gradient-to-b from-primary/60 to-primary text-transparent bg-clip-text">
              Blog
            </span>
          </h2>

          <p className="text-muted-foreground text-xl mt-4 mb-8 ">
            Latest blog.
          </p>

          <div className="flex flex-col gap-8">
            {serviceList.map(({ icon, title, content }: ServiceProps) => (
              <Card key={title}>
                <CardHeader className="space-y-1 flex md:flex-row justify-start items-start gap-4">
                  <div className="mt-1 bg-primary/20 p-1 rounded-2xl">
                    {icon}
                  </div>
                  <div>
                    <CardTitle>{title}</CardTitle>
                    <CardDescription className="text-md mt-2">
                      {content}
                    </CardDescription>
                  </div>
                </CardHeader>
              </Card>
            ))}
          </div>
        </div>

        <img
          src={cubeLeg}
          className="w-[300px] md:w-[500px] lg:w-[600px] object-contain"
          alt="About services"
        />
      </div>
    </section>
  );
};