cce2fbc3d5
* Bump macaw version * Make channels section expandable based on override setting * Add margins to dangerous section, improve copy * Add padding between section header and its description * Limit width of provider selection boxes * Use proper variant of the button * More whitespace between description and box in the sections * Remove text * Revert "Make channels section expandable based on override setting" This reverts commit e107c5e990b4110156043ed494fb0054bd936654. * Add changelog * Improve grammar Co-authored-by: Adrian Pilarczyk <admin@peelar.dev> --------- Co-authored-by: Adrian Pilarczyk <admin@peelar.dev>
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { Box, Button, Text } from "@saleor/macaw-ui/next";
|
|
import { BoxWithBorder } from "../../../components/box-with-border";
|
|
import { defaultPadding } from "../../../components/ui-defaults";
|
|
import { BoxFooter } from "../../../components/box-footer";
|
|
|
|
interface ProviderSelectionBoxProps {
|
|
providerName: string;
|
|
providerLogo?: React.ReactNode;
|
|
providerDescription: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export const ProviderSelectionBox = (props: ProviderSelectionBoxProps) => {
|
|
return (
|
|
<BoxWithBorder __maxWidth={350} display="flex" flexDirection="column">
|
|
<Box padding={defaultPadding} flexGrow="1">
|
|
<Box
|
|
display="flex"
|
|
gap={2}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
paddingBottom={defaultPadding}
|
|
>
|
|
{props.providerLogo}
|
|
<Text variant="heading">{props.providerName}</Text>
|
|
</Box>
|
|
<Text>{props.providerDescription}</Text>
|
|
</Box>
|
|
<BoxFooter>
|
|
<Button onClick={props.onClick}>Choose</Button>
|
|
</BoxFooter>
|
|
</BoxWithBorder>
|
|
);
|
|
};
|