35 lines
1.5 KiB
TypeScript
35 lines
1.5 KiB
TypeScript
import ScrollReveal from '@/components/ScrollReveal';
|
|
import styles from './index.module.css';
|
|
|
|
type Data = {
|
|
title: string;
|
|
backgroundImage: string;
|
|
items: {
|
|
largeTitle: string;
|
|
title: string;
|
|
}[];
|
|
}
|
|
export default function HonorGrids({ data }: { data: Data }) {
|
|
return (
|
|
<section className={styles.honorGrids} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
|
|
<div className={styles.honorGridsTitle}>{data.title}</div>
|
|
|
|
<div className={styles.honorGridsItems}>
|
|
{data.items.map((item, index) => (
|
|
<ScrollReveal preset="slideUp" amount={0.2} delay={index * 0.2}>
|
|
<div className={styles.honorGridsItem} key={item.title}>
|
|
<div className={styles.honorGridsItemBgleft}
|
|
style={{ backgroundImage: "url(/images/icons/honor-left.png)" }}
|
|
></div>
|
|
<div className={styles.honorGridsItemLargeTitle}>{item.largeTitle}</div>
|
|
<div className={`${styles.honorGridsItemTitle} ${styles.honorGridsItemLargeTitle ? styles.honorGridsItemLargeTitleContent : ""}`}>{item.title}</div>
|
|
<div className={styles.honorGridsItemBgright}
|
|
style={{ backgroundImage: "url(/images/icons/honor-right.png)" }}
|
|
></div>
|
|
</div>
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
} |