|
@@ -1,8 +1,9 @@
|
|
|
"use client";
|
|
|
import { NavigateItem } from "@/api/home";
|
|
|
+import Box from "@/components/Box";
|
|
|
import React from "react";
|
|
|
-import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
import "swiper/css";
|
|
|
+import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
|
|
interface Props {
|
|
|
data: NavigateItem[];
|
|
@@ -10,15 +11,30 @@ interface Props {
|
|
|
|
|
|
const NavigateBar: React.FC<Props> = ({ data }) => {
|
|
|
return (
|
|
|
- <div>
|
|
|
- <Swiper>
|
|
|
+ <div className="pt-[.1rem]">
|
|
|
+ <Swiper spaceBetween={15} slidesPerView={4.5}>
|
|
|
{data.map((item) => {
|
|
|
return (
|
|
|
- <SwiperSlide>
|
|
|
- <div>
|
|
|
- <img src={item?.img} alt={item?.name} />
|
|
|
- <div>{item.name}</div>
|
|
|
- </div>
|
|
|
+ <SwiperSlide key={item.id}>
|
|
|
+ <Box
|
|
|
+ pl={false}
|
|
|
+ pt={false}
|
|
|
+ pr={false}
|
|
|
+ pb={false}
|
|
|
+ action={item.action_type}
|
|
|
+ actionData={item.action_params}
|
|
|
+ >
|
|
|
+ <div className="flex flex-col items-center justify-center">
|
|
|
+ <img
|
|
|
+ src="https://static.tiktokjakjkl.icu/bcwin/ff52a50b-801b-4737-bb24-b6323385da4c.png" //{item?.icon_url}
|
|
|
+ alt={item?.name}
|
|
|
+ className="aspect-[1/1] max-w-[100%] rounded-[50%]"
|
|
|
+ />
|
|
|
+ <div className="mt-[.06rem] text-[.1rem] text-[#fff]">
|
|
|
+ {item.name}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Box>
|
|
|
</SwiperSlide>
|
|
|
);
|
|
|
})}
|