28 lines
No EOL
922 B
TypeScript
28 lines
No EOL
922 B
TypeScript
import classNames from 'classnames'
|
|
import styles from "./styles.module.scss"
|
|
|
|
export type BackgroundColor = "soft" | "off-white" | undefined
|
|
|
|
type SectionProps = {
|
|
backgroundColor?: BackgroundColor
|
|
children?: React.ReactNode;
|
|
padding?: "small" | "medium" | "large"
|
|
paddingBottom?: "small" | "medium" | "large"
|
|
}
|
|
|
|
export const Section = ({ children, backgroundColor, padding = "large", paddingBottom }: SectionProps) => {
|
|
return (
|
|
<section className={classNames({
|
|
[styles.large]: padding == "large",
|
|
[styles.medium]: padding == "medium",
|
|
[styles.small]: padding == "small",
|
|
[styles.largeBottom]: paddingBottom == "large",
|
|
[styles.mediumBottom]: paddingBottom == "medium",
|
|
[styles.smallBottom]: paddingBottom == "small",
|
|
[styles.shade2]: backgroundColor === "soft",
|
|
[styles.shade3]: backgroundColor === "off-white"
|
|
})}>
|
|
{children}
|
|
</section>
|
|
)
|
|
} |