diff --git a/frontend/components/layout/ContentContainer.tsx b/frontend/components/layout/ContentContainer.tsx new file mode 100644 index 000000000..eed06bf44 --- /dev/null +++ b/frontend/components/layout/ContentContainer.tsx @@ -0,0 +1,42 @@ +// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center) +// SPDX-FileCopyrightText: 2023 Netherlands eScience Center +// +// SPDX-License-Identifier: Apache-2.0 + +type ContentContainerProps = { + element?: 'section' | 'article' | 'main' | 'div' + className?: string + children: JSX.Element | JSX.Element[] +} + +export default function ContentContainer(props: ContentContainerProps) { + // basic container alignment - for lg + breakpoints + const classes = `px-4 lg:container lg:mx-auto ${props.className ?? ''}` + + switch (props?.element) { + case 'section': + return ( +
+ {props.children} +
+ ) + case 'article': + return ( +
+ {props.children} +
+ ) + case 'main': + return ( +
+ {props.children} +
+ ) + default: + return ( +
+ {props.children} +
+ ) + } +} diff --git a/frontend/components/software/overview/SoftwareHighlights.tsx b/frontend/components/software/overview/SoftwareHighlights.tsx index b6ae472db..6e03e3535 100644 --- a/frontend/components/software/overview/SoftwareHighlights.tsx +++ b/frontend/components/software/overview/SoftwareHighlights.tsx @@ -6,6 +6,7 @@ // // SPDX-License-Identifier: Apache-2.0 +import ContentContainer from '~/components/layout/ContentContainer' import {HighlightsCarousel} from './highlights/HighlightsCarousel' import {SoftwareHighlight} from '~/components/admin/software-highlights/apiSoftwareHighlights' @@ -20,6 +21,13 @@ export default function SoftwareHighlights({highlights}: { highlights: SoftwareH return (
+ +
+ Software Highlights +
+
)