site_8g/src/components/Tabs/index.tsx

"use client";
import { Tabs } from "antd-mobile";
import { FC, PropsWithChildren, ReactNode } from "react";
import styles from "./style.module.scss";
interface Item {
    id: number | string;
    name?: string | ReactNode;
    content?: number;
    render?: ReactNode;
    headerRender?: () => ReactNode;
}
interface Props {
    items: Item[];
    activeKey?: string;
    onChanage?: (key?: string) => void;
}
// <Badge
//   className={"flex items-center justify-center text-[20px]"}
//   content={tab.content > 0 ? tab.content : null}
//   style={{
//     "--right": "-10px",
//     "--top": "8px",
//     width: "20px",
//     height: "20px",
//   }}
//   color={"#ff311b"}
// >
//   {tab.name}
// </Badge>
const Transactions: FC<PropsWithChildren<Props>> = (props) => {
    const { items, activeKey, onChanage } = props;

    const tabChange = (key: string) => {
        if (typeof onChanage === "function") {
            onChanage(key);
        }
    };

    console.log(activeKey);

    return (
        <Tabs
            style={{
                "--active-line-color": "#fb8910",
                "--active-title-color": "#fb8910",
                "--active-line-height": "3px",
                // @ts-ignore
                "--adm-color-border": "none",
            }}
            activeKey={activeKey}
            onChange={tabChange}
            activeLineMode="full"
        >
            {items.map((tab) => {
                return (
                    <Tabs.Tab
                        key={tab.id}
                        className={styles.badge}
                        title={
                            // <Badge
                            //     content={tab.content > 0 ? tab.content : null}
                            //     style={{
                            //         "--right": "-0.1rem",
                            //         "--top": "8px",
                            //     }}
                            //     color={"#ff311b"}
                            // >
                            //     {tab.name}
                            // </Badge>
                            <>
                                {!tab?.headerRender && (
                                    <div style={{ position: "relative" }}>
                                        {tab.name}
                                        {!!tab.content && (
                                            <div
                                                className={`mr-[0.1rem] flex h-[0.15rem] w-[0.15rem] items-center justify-center text-[#fff]`}
                                                style={{
                                                    position: "absolute",
                                                    borderRadius: "0.075rem",
                                                    backgroundColor: "#ff311b",
                                                    fontSize: "0.1rem",
                                                    top: "-0.02rem",
                                                    right: "-0.24rem",
                                                }}
                                            >
                                                {tab.content}
                                            </div>
                                        )}
                                    </div>
                                )}
                                {tab?.headerRender && tab.headerRender()}
                            </>
                        }
                    >
                        {tab.render}
                    </Tabs.Tab>
                );
            })}
        </Tabs>
    );
};

export default Transactions;