saleor-apps-redis_apl/apps/emails-and-messages/src/components/section-with-description.tsx
Krzysztof Wolski b1bc467da6 WIP
2023-04-26 09:47:11 +02:00

27 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>
);
};