38 lines
995 B
TypeScript
38 lines
995 B
TypeScript
/** @format */
|
|
|
|
import { useState } from "react";
|
|
import { tabsContent } from "@/constants/tabs";
|
|
import SectionTitle from "../section-title/SectionTitle";
|
|
import TabCard from "../tab-card/TabCard";
|
|
import style from "./resources.module.less";
|
|
|
|
const Resources = () => {
|
|
const [activeTab, setActiveTab] = useState(0);
|
|
return (
|
|
<section className={style.resources}>
|
|
<SectionTitle margin={"large"}>帮助您充分利用资源</SectionTitle>
|
|
<div className={style.tabTitlesContainer}>
|
|
{tabsContent.map((item, index) => {
|
|
return (
|
|
<p
|
|
key={item.key}
|
|
className={`${style.tabTitle} ${
|
|
index === activeTab && style.tabTitleActive
|
|
}`}
|
|
onClick={() => setActiveTab(index)}>
|
|
{item.title}
|
|
</p>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className={style.tabInfoContainer}>
|
|
{tabsContent[activeTab].cards.map((card: any) => {
|
|
return <TabCard key={card.key} {...card} />;
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Resources;
|