mirror of
https://github.com/pocket-id/pocket-id.git
synced 2026-10-06 17:59:03 +02:00
40 lines
757 B
TypeScript
40 lines
757 B
TypeScript
import { Column, Row, Section, Text } from 'react-email';
|
|
import { colors, fonts, radius } from './theme';
|
|
|
|
interface CodeBoxProps {
|
|
code: string;
|
|
}
|
|
|
|
export const CodeBox = ({ code }: CodeBoxProps) => (
|
|
<Section style={boxStyle}>
|
|
<Row>
|
|
<Column style={cellStyle}>
|
|
<Text style={codeStyle}>{code}</Text>
|
|
</Column>
|
|
</Row>
|
|
</Section>
|
|
);
|
|
|
|
const boxStyle = {
|
|
margin: '8px 0 0 0',
|
|
backgroundColor: colors.muted,
|
|
border: `1px solid ${colors.border}`,
|
|
borderRadius: radius.box
|
|
};
|
|
|
|
const cellStyle = {
|
|
padding: '20px 16px',
|
|
textAlign: 'center' as const
|
|
};
|
|
|
|
const codeStyle = {
|
|
margin: 0,
|
|
fontFamily: fonts.mono,
|
|
fontSize: '32px',
|
|
lineHeight: '40px',
|
|
fontWeight: 600,
|
|
letterSpacing: '8px',
|
|
paddingLeft: '8px',
|
|
color: colors.foreground
|
|
};
|