"use client"; import Box from "@/components/Box"; import { FC, PropsWithChildren, ReactNode, useRef } from "react"; import { Swiper, SwiperClass, SwiperSlide } from "swiper/react"; import { Category, GameListRep } from "@/api/home"; import { CardProps } from "@/components/Card/Card"; import GroupCard, { GroupProps } from "@/components/Card/GroupCard"; import clsx from "clsx"; import { useTranslations } from "next-intl"; import styles from "./style.module.scss"; type TodoHandler = (item: Category) => void; interface SwiperGroupProps extends GroupProps, CardProps { group: Category; page?: number; // style bg?: boolean; visibleTitle?: boolean; // todos visibleTodos?: boolean; todoHandler?: TodoHandler; // icon offsetX?: number; offsetY?: number; // SwiperSlide slideRender?: (data: GameListRep[]) => ReactNode; } const HomeSwiper: FC> = (props) => { const { group, page = 3, todoHandler, bg = true, visibleTitle = true, visibleTodos = true, slideRender, ...other } = props; const t = useTranslations("HomePage"); const swiperRef = useRef(null); const bodyClass = clsx( styles.gameContainer, // "mb-[0.11rem]", "pt-[0.08rem]" // "pb-[0.11rem]", ); if (!group.game_list) return; const lineNum = page * group.line_num; const gameList = group.game_list.slice(0, group.line_config_amount); const swiperData = Array(gameList.length ? Math.ceil(gameList.length / lineNum) : 0) .fill(0) .map((_, index) => { const showData = gameList .slice(index * lineNum, index * lineNum + lineNum) .map((subItem) => ({ ...subItem, category_name: group.category_name })); return { key: index, data: showData, }; }); console.log(swiperData); const prev = () => { swiperRef.current!.slidePrev(); }; const next = () => { swiperRef.current!.slideNext(); }; const iconClass = clsx(styles.mainLeftIcon, "pro-iconfont", `pro-${group.icon}`); return (
{visibleTitle && (
{!group.image && (
{group.category_name}
{/*
{t("gameTag")}
*/}
)} {group.image && (
{group.category_name}
{/*
{t("gameTag")}
*/}
)} {/* */}
{visibleTodos && (
todoHandler && todoHandler(group)}> {/* Todos */}
Todo
{group.to_tal}
)} {/*
*/}
)} { swiperRef.current = swiper; }} loop > {swiperData?.map((data, index) => { return ( {slideRender ? ( slideRender(data.data) ) : ( )} ); })}
); }; export default HomeSwiper;