import React, { useState, useRef, useEffect, useMemo } from "react";
|
import {
|
useTranslate,
|
useRecordContext,
|
SimpleShowLayout,
|
DateField,
|
} from 'react-admin';
|
import { Card, CardContent, Box, Typography, Grid } from '@mui/material';
|
import StatusField from "./StatusField";
|
import AccessTimeIcon from '@mui/icons-material/AccessTime';
|
|
const BasicAside = () => {
|
const translate = useTranslate();
|
const record = useRecordContext();
|
|
return (
|
<Box width={400} display={{ xs: 'none', lg: 'block' }}>
|
{record && (
|
<Box ml={2}>
|
<Card>
|
<CardContent>
|
<Typography variant="h6" gutterBottom>
|
{translate('common.edit.side.title')}
|
</Typography>
|
<Grid container rowSpacing={2} columnSpacing={1}>
|
<Grid item xs={12} display="flex" gap={1}>
|
<StatusField label="Status" />
|
</Grid>
|
<Grid item xs={12} display="flex" gap={1}>
|
<AccessTimeIcon fontSize="small" color="disabled" />
|
<Box flexGrow={1}>
|
<Typography variant="body2">
|
{translate('common.field.createTime')}
|
</Typography>
|
<DateField
|
record={record}
|
source="createTime"
|
showTime
|
/>
|
</Box>
|
</Grid>
|
<Grid item xs={12} display="flex" gap={1}>
|
<AccessTimeIcon fontSize="small" color="disabled" />
|
<Box flexGrow={1}>
|
<Typography variant="body2">
|
{translate('common.field.updateTime')}
|
</Typography>
|
<DateField
|
record={record}
|
source="updateTime"
|
showTime
|
/>
|
</Box>
|
</Grid>
|
</Grid>
|
</CardContent>
|
</Card>
|
</Box>
|
)}
|
</Box>
|
);
|
}
|
|
export default BasicAside;
|
