45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { styled } from '@mui/material/styles';
|
|
import GridViewSharpIcon from '@mui/icons-material/GridViewSharp';
|
|
import ReorderSharpIcon from '@mui/icons-material/ReorderSharp';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import React from 'react';
|
|
|
|
import { VIEW_STYLE_GRID, VIEW_STYLE_LIST } from '@staticcms/core/constants/collectionViews';
|
|
|
|
import type { CollectionViewStyle } from '@staticcms/core/constants/collectionViews';
|
|
|
|
const ViewControlsSection = styled('div')`
|
|
margin-left: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
`;
|
|
|
|
interface ViewStyleControlPros {
|
|
viewStyle: CollectionViewStyle;
|
|
onChangeViewStyle: (viewStyle: CollectionViewStyle) => void;
|
|
}
|
|
|
|
const ViewStyleControl = ({ viewStyle, onChangeViewStyle }: ViewStyleControlPros) => {
|
|
return (
|
|
<ViewControlsSection>
|
|
<IconButton
|
|
color={viewStyle === VIEW_STYLE_LIST ? 'primary' : 'default'}
|
|
aria-label="list view"
|
|
onClick={() => onChangeViewStyle(VIEW_STYLE_LIST)}
|
|
>
|
|
<ReorderSharpIcon />
|
|
</IconButton>
|
|
<IconButton
|
|
color={viewStyle === VIEW_STYLE_GRID ? 'primary' : 'default'}
|
|
aria-label="grid view"
|
|
onClick={() => onChangeViewStyle(VIEW_STYLE_GRID)}
|
|
>
|
|
<GridViewSharpIcon />
|
|
</IconButton>
|
|
</ViewControlsSection>
|
|
);
|
|
};
|
|
|
|
export default ViewStyleControl;
|