-
-
Notifications
You must be signed in to change notification settings - Fork 656
/
FeatureOverviewSidePanelDetails.tsx
44 lines (39 loc) · 1.24 KB
/
FeatureOverviewSidePanelDetails.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import { IFeatureToggle } from 'interfaces/featureToggle';
import { styled } from '@mui/material';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { formatDateYMD } from 'utils/formatDate';
import { parseISO } from 'date-fns';
const StyledContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
padding: theme.spacing(3),
fontSize: theme.fontSizes.smallBody,
}));
const StyledLabel = styled('span')(({ theme }) => ({
color: theme.palette.text.secondary,
marginRight: theme.spacing(1),
}));
interface IFeatureOverviewSidePanelDetailsProps {
feature: IFeatureToggle;
header: React.ReactNode;
}
export const FeatureOverviewSidePanelDetails = ({
feature,
header,
}: IFeatureOverviewSidePanelDetailsProps) => {
const { locationSettings } = useLocationSettings();
return (
<StyledContainer>
{header}
<div data-loading>
<StyledLabel>Created at:</StyledLabel>
<span>
{formatDateYMD(
parseISO(feature.createdAt),
locationSettings.locale
)}
</span>
</div>
</StyledContainer>
);
};