28 lines
726 B
TypeScript
28 lines
726 B
TypeScript
|
import { Box, Text } from "@saleor/macaw-ui/next";
|
||
|
|
|
||
|
|
interface SectionWithDescriptionProps {
|
||
|
|
title: string;
|
||
|
|
description?: React.ReactNode;
|
||
|
|
children?: React.ReactNode;
|
||
|
|
}
|
||
|
|
export const SectionWithDescription = (props: SectionWithDescriptionProps) => {
|
||
|
|
return (
|
||
|
|
<Box display={"grid"} gridTemplateColumns={{ desktop: 3, mobile: 1 }} gap={6}>
|
||
|
|
<Box>
|
||
|
|
<Text variant="heading" display="block">
|
||
|
|
{props.title}
|
||
|
|
</Text>
|
||
|
|
{props.description}
|
||
|
|
</Box>
|
||
|
|
{!!props.children && (
|
||
|
|
<Box
|
||
|
|
gridColumnStart={{ desktop: "2", mobile: "1" }}
|
||
|
|
gridColumnEnd={{ desktop: "4", mobile: "1" }}
|
||
|
|
>
|
||
|
|
{props.children}
|
||
|
|
</Box>
|
||
|
|
)}
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|