62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { Component, Show } from "solid-js";
|
|
import { Handlers } from "../../types";
|
|
import "./Controls.css";
|
|
|
|
import { state } from "../../state";
|
|
|
|
const Controls: Component<{ handlers: Handlers }> = (props) => {
|
|
return (
|
|
<div class="controls">
|
|
<button
|
|
class="controls__button controls__button--first"
|
|
onClick={props.handlers.first}
|
|
title="FIRST"
|
|
>
|
|
<i class="las la-angle-double-left"></i>
|
|
</button>
|
|
<button
|
|
class="controls__button"
|
|
onClick={props.handlers.prev}
|
|
title="PREV"
|
|
>
|
|
<i class="las la-angle-left"></i>
|
|
</button>
|
|
<button
|
|
class="controls__button"
|
|
onClick={props.handlers.togglePlay}
|
|
title={state.playing ? "PAUSE" : "PLAY"}
|
|
>
|
|
<Show when={!state.playing} fallback={<i class="las la-pause"></i>}>
|
|
<i class="las la-play"></i>
|
|
</Show>
|
|
</button>
|
|
<button
|
|
class="controls__button controls__button--next"
|
|
onClick={props.handlers.next}
|
|
title="NEXT"
|
|
>
|
|
<i class="las la-angle-right"></i>
|
|
</button>
|
|
<button
|
|
class="controls__button controls__button--last"
|
|
onClick={props.handlers.last}
|
|
title="LAST"
|
|
>
|
|
<i class="las la-angle-double-right"></i>
|
|
</button>
|
|
<button onClick={props.handlers.flip} title="FLIP" class="flip__button">
|
|
<i
|
|
classList={{
|
|
rotated: state.boardConfig.flipped,
|
|
las: true,
|
|
"la-sync": true,
|
|
rotatable: true,
|
|
}}
|
|
></i>
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Controls;
|