mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-04 23:14:56 +01:00
a861cc6dae
Co-authored-by: Guillaume Roux <guillaumeroux123@gmail.com> Co-authored-by: Frederik Bolding <frederik.bolding@gmail.com>
57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useI18nContext } from '../../../../hooks/useI18nContext';
|
|
import {
|
|
ALIGN_ITEMS,
|
|
BORDER_RADIUS,
|
|
BORDER_STYLE,
|
|
COLORS,
|
|
SIZES,
|
|
TEXT,
|
|
} from '../../../../helpers/constants/design-system';
|
|
import Box from '../../../ui/box';
|
|
import { Icon, Text } from '../../../component-library';
|
|
|
|
export const SnapDelineator = ({ snapName, children }) => {
|
|
const t = useI18nContext();
|
|
|
|
return (
|
|
<Box
|
|
className="snap-delineator__wrapper"
|
|
borderStyle={BORDER_STYLE.SOLID}
|
|
borderColor={COLORS.BORDER_MUTED}
|
|
borderRadius={BORDER_RADIUS.LG}
|
|
>
|
|
<Box
|
|
className="snap-delineator__header"
|
|
alignItems={ALIGN_ITEMS.CENTER}
|
|
backgroundColor={COLORS.INFO_MUTED}
|
|
paddingLeft={2}
|
|
paddingRight={2}
|
|
paddingTop={1}
|
|
paddingBottom={1}
|
|
>
|
|
<Icon name="snaps-filled" color={COLORS.INFO_DEFAULT} size={SIZES.SM} />
|
|
<Text
|
|
variant={TEXT.BODY_SM}
|
|
color={COLORS.INFO_DEFAULT}
|
|
className="snap-delineator__header__text"
|
|
marginLeft={1}
|
|
marginTop={0}
|
|
marginBottom={0}
|
|
>
|
|
{t('contentFromSnap', [snapName])}
|
|
</Text>
|
|
</Box>
|
|
<Box className="snap-delineator__content" padding={4}>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
SnapDelineator.propTypes = {
|
|
snapName: PropTypes.string,
|
|
children: PropTypes.ReactNode,
|
|
};
|