aquameta-widget/data/widget.component/slide-container/js

Widget rendering framework built on top of Aquameta

import html from '/db/widget/core/html.js';
import styled from '/db/widget/dep/styled-components.js';
import Centered from '/db/widget/component/centered.js';
import Slide from '/db/widget/component/slide.js';
import Constrained from '/db/widget/component/constrained.js';

const disabledColorFn = ({disabled, theme}) => disabled
  ? theme.colors.verylight
  : theme.colors.light;

const disabledHoverColorFn = ({disabled, theme}) => disabled
  ? ''
  : theme.colors.dark;

const Container = styled.div`
  display: flex;
  padding: 20px 0;
  width: 100%;
`;

const ControlSection = styled.section`
  display: inline-block;
  flex: 1;
  height: ${({theme}) => theme.height};
`;

const Button = styled.div`
  color: ${disabledColorFn};
  ${ControlSection}:hover & {
    color: ${disabledHoverColorFn};
    text-decoration: underline;
  }
`;

export default function SlideContainer(props){
  return html`
    <${Container} className=${props.className || ''}>
      <${ControlSection} onClick=${props.previous}>
        ${!(props.previousDisabled) && html`
          <${Centered} height=${'560px'}>
            <${Button}>${'<'} Previous<//>
          <//>
        `}
      <//>
      <${Constrained}>
        <${Slide} slide=${props.slide}/>
      <//>
      <${ControlSection} onClick=${props.next}>
        ${!(props.nextDisabled) && html`
          <${Centered} height=${'560px'}>
            <${Button}>Next ${'>'}<//>
          <//>
        `}
      <//>
    <//>
  `;
}