mirror of
https://github.com/theoludwig/theoludwig.git
synced 2024-12-08 00:44:30 +01:00
67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
import { ShadowContainer } from '../ShadowContainer'
|
|
import { SectionHeading } from './SectionHeading'
|
|
|
|
type SectionProps = React.ComponentPropsWithRef<'section'> & {
|
|
heading?: string
|
|
description?: string
|
|
isMain?: boolean
|
|
withoutShadowContainer?: boolean
|
|
}
|
|
|
|
export const Section: React.FC<SectionProps> = (props) => {
|
|
const {
|
|
children,
|
|
heading,
|
|
description,
|
|
isMain = false,
|
|
withoutShadowContainer = false,
|
|
...rest
|
|
} = props
|
|
|
|
if (isMain) {
|
|
return (
|
|
<div className='w-full px-3'>
|
|
<ShadowContainer style={{ marginTop: 50 }}>
|
|
<section {...rest}>
|
|
{heading != null ? (
|
|
<SectionHeading>{heading}</SectionHeading>
|
|
) : null}
|
|
<div className='w-full px-3'>{children}</div>
|
|
</section>
|
|
</ShadowContainer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (withoutShadowContainer) {
|
|
return (
|
|
<section {...rest}>
|
|
{heading != null ? <SectionHeading>{heading}</SectionHeading> : null}
|
|
<div className='w-full px-3'>{children}</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<section {...rest}>
|
|
{heading != null ? (
|
|
<SectionHeading
|
|
style={{ ...(description != null ? { margin: 0 } : {}) }}
|
|
>
|
|
{heading}
|
|
</SectionHeading>
|
|
) : null}
|
|
{description != null ? (
|
|
<p style={{ marginTop: 7 }} className='text-center'>
|
|
{description}
|
|
</p>
|
|
) : null}
|
|
<div className='w-full px-3'>
|
|
<ShadowContainer>
|
|
<div className='w-full px-16 py-4 leading-8'>{children}</div>
|
|
</ShadowContainer>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|