57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import Card from '@mui/material/Card';
|
|
import CardActions from '@mui/material/CardActions';
|
|
import CardContent from '@mui/material/CardContent';
|
|
import Divider from '@mui/material/Divider';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import type { Icon } from '@phosphor-icons/react/dist/lib/types';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export interface HelperWidgetProps {
|
|
action: React.ReactNode;
|
|
description: string;
|
|
icon: Icon;
|
|
label: string;
|
|
title: string;
|
|
}
|
|
|
|
export function HelperWidget({ action, description, icon: Icon, label, title }: HelperWidgetProps): React.JSX.Element {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
<Stack spacing={2}>
|
|
<div>
|
|
<Stack
|
|
direction="row"
|
|
spacing={1}
|
|
sx={{
|
|
alignItems: 'center',
|
|
border: '1px solid var(--mui-palette-divider)',
|
|
borderRadius: 1.5,
|
|
boxShadow: 'var(--mui-shadows-8)',
|
|
display: 'inline-flex',
|
|
p: '6px 12px',
|
|
}}
|
|
>
|
|
<Icon fontSize="var(--icon-fontSize-md)" />
|
|
<Typography variant="subtitle2">{t(label)}</Typography>
|
|
</Stack>
|
|
</div>
|
|
<Stack spacing={1}>
|
|
<Typography variant="h6">{t(title)}</Typography>
|
|
<Typography color="text.secondary" variant="body2">
|
|
{t(description)}
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
</CardContent>
|
|
<Divider />
|
|
<CardActions>{action}</CardActions>
|
|
</Card>
|
|
);
|
|
}
|