49 lines
2.2 KiB
TypeScript
49 lines
2.2 KiB
TypeScript
import { useState } from 'react';
|
|
import styles from './index.module.css';
|
|
import TopTabs from './TopTabs';
|
|
|
|
type Data = {
|
|
tabItems: {
|
|
icon?: string;
|
|
tabName?: string;
|
|
contentTitle?: string;
|
|
contentSubtitle?: string;
|
|
contentText?: string;
|
|
content?: string;
|
|
/** 以 mockData 为准 */
|
|
sideImage?: string;
|
|
path?: string;
|
|
}[]
|
|
backgroundImage?: string;
|
|
titleDirection?: 'row' | 'column';
|
|
}
|
|
|
|
export default function TopTabsSection({ data, className }: { data: Data, className?: string }) {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
return (
|
|
<section className={`${styles.topTabsSection} ${className}`} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
|
|
<TopTabs data={data} activeIndex={activeIndex} setActiveIndex={setActiveIndex} />
|
|
<div className={styles.topTabsContent}>
|
|
<div className={styles.topTabsContentLeft}>
|
|
<div className={styles.topTabsContentLeftHead}>
|
|
{
|
|
data.tabItems[activeIndex].icon && (
|
|
<img src={data.tabItems[activeIndex].icon} alt="" style={{ width: '100px', height: '100px' }} />
|
|
)
|
|
}
|
|
<div className={`${styles.topTabsContentLeftTitle} ${data.titleDirection === 'column' ? styles.columnCenter : ''}`}>
|
|
<div className={styles.topTabsContentLeftTitleMain}>{data.tabItems[activeIndex].contentTitle}</div>
|
|
<div className={styles.topTabsContentLeftTitleSub}>{data.tabItems[activeIndex].contentSubtitle}</div>
|
|
</div>
|
|
</div>
|
|
<p className={styles.topTabsContentLeftDesc}>
|
|
{data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content}
|
|
</p>
|
|
</div>
|
|
<div className={styles.topTabsContentRight}>
|
|
<img src={data.tabItems[activeIndex].sideImage} alt="side-image" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
} |