1
1
mirror of https://github.com/theoludwig/theoludwig.git synced 2024-12-08 00:44:30 +01:00
.profile/components/design/Section/index.tsx
2021-04-18 01:56:23 +02:00

63 lines
1.6 KiB
TypeScript

import { forwardRef } from 'react'
import { ShadowContainer } from '../ShadowContainer'
import { SectionHeading } from './SectionHeading'
type SectionProps = React.ComponentPropsWithRef<'section'> & {
heading?: string
description?: string
isMain?: boolean
withoutShadowContainer?: boolean
}
export const Section = forwardRef<HTMLElement, SectionProps>((props, ref) => {
const {
children,
heading,
description,
isMain = false,
withoutShadowContainer = false,
...rest
} = props
if (isMain) {
return (
<ShadowContainer style={{ marginTop: 50 }}>
<section ref={ref} {...rest}>
{heading != null && <SectionHeading>{heading}</SectionHeading>}
<div className='container-fluid'>{children}</div>
</section>
</ShadowContainer>
)
}
if (withoutShadowContainer) {
return (
<section ref={ref} {...rest}>
{heading != null && <SectionHeading>{heading}</SectionHeading>}
<div className='container-fluid'>{children}</div>
</section>
)
}
return (
<section ref={ref} {...rest}>
{heading != null && (
<SectionHeading style={{ ...(description != null && { margin: 0 }) }}>
{heading}
</SectionHeading>
)}
{description != null && (
<p style={{ marginTop: 7 }} className='text-center'>
{description}
</p>
)}
<ShadowContainer>
<div className='container-fluid'>
<div className='row row-padding'>{children}</div>
</div>
</ShadowContainer>
</section>
)
})