Split up main content route component

This commit is contained in:
jeffvli 2023-05-31 01:13:54 -07:00
parent fa0a21a021
commit e7c7eb3ec0
7 changed files with 409 additions and 286 deletions

View file

@ -0,0 +1,33 @@
import styled from 'styled-components';
export const ResizeHandle = styled.div<{
isResizing: boolean;
placement: 'top' | 'left' | 'bottom' | 'right';
}>`
position: absolute;
top: ${(props) => props.placement === 'top' && 0};
right: ${(props) => props.placement === 'right' && 0};
bottom: ${(props) => props.placement === 'bottom' && 0};
left: ${(props) => props.placement === 'left' && 0};
z-index: 90;
width: 4px;
height: 100%;
cursor: ew-resize;
opacity: ${(props) => (props.isResizing ? 1 : 0)};
&:hover {
opacity: 0.7;
}
&::before {
position: absolute;
top: ${(props) => props.placement === 'top' && 0};
right: ${(props) => props.placement === 'right' && 0};
bottom: ${(props) => props.placement === 'bottom' && 0};
left: ${(props) => props.placement === 'left' && 0};
width: 1px;
height: 100%;
background-color: var(--sidebar-handle-bg);
content: '';
}
`;

View file

@ -8,3 +8,4 @@ export * from './mutations/create-favorite-mutation';
export * from './mutations/delete-favorite-mutation';
export * from './mutations/set-rating-mutation';
export * from './components/filter-bar';
export * from './components/resize-handle';