import { Tabs } from "antd";
import React from "react";

const themes = [
  {
    key: "default",
    image: require("@/assets/mindmap/bd_caihong.svg").default,
  },
  {
    key: "theme3",
    image: require("@/assets/mindmap/theme3_2.svg").default,
  },
  {
    key: "default1",
    image: require("@/assets/mindmap/bd_caihong.svg").default,
  },
  {
    key: "theme4",
    image: require("@/assets/mindmap/theme3_2.svg").default,
  },
];
export default function Theme() {
  return (
    <Tabs>
      <Tabs.TabPane key="1" tab="风格">
        <div
          className={`
          flex
          flex-wrap
          px-8px
          gap-5
          justify-between
          `}
        >
          {themes.map((item) => (
            <div className={`
              h-60px
              bg-white
              inline-flex
              rounded-4px
              flex
              items-center
              justify-center
              border-1px
              border-solid
              border-#e6ebf5
              cursor-pointer
            `} key={item.key}>
              <img src={item.image} className="h-full" />
            </div>
          ))}
        </div>
      </Tabs.TabPane>
    </Tabs>
  );
}
