29247d5dfa
* docs: add jsdoc * feat: change enums to as const objects * chore(test): add themeColors.test.ts * fix: fix tests and bugs with strings.ts util * fix: path alias imports and tsconfig file bug * fix: remove --max-warnings 0
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
import Text from '../Text/Text';
|
|
|
|
interface Props {
|
|
titleText: string;
|
|
bodyText: string;
|
|
}
|
|
|
|
/**
|
|
* A maybe reusable InfoCard component that follows the design system of the extension.
|
|
* @returns
|
|
*/
|
|
export function InfoCard({ titleText, bodyText }: React.PropsWithChildren<Props>): JSX.Element {
|
|
return (
|
|
<div
|
|
className='w-50 flex flex-col items-start justify-center border rounded p-4'
|
|
style={{
|
|
border: '1px solid #D6D2C4',
|
|
background: '#FFF', // White
|
|
}}
|
|
>
|
|
<div className='flex flex-col items-start self-stretch gap-1.5'>
|
|
<Text
|
|
variant='h4'
|
|
as='span'
|
|
style={{
|
|
color: '#F8971F', // Orange
|
|
}}
|
|
>
|
|
{titleText}
|
|
</Text>
|
|
<Text
|
|
variant='small'
|
|
as='span'
|
|
style={{
|
|
color: '#333F48', // Black
|
|
}}
|
|
>
|
|
{bodyText}
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|