sketch playback component

2026-08-20 22:49:18 +00:00 · 2021-03-24 14:08:33 +01:00
parent 84a698acaa
commit d5721f0479
4 changed files with 105 additions and 2 deletions
@@ -0,0 +1,50 @@
+import { Button } from '@chakra-ui/button';
+import style from './PlaybackControl.module.css';
+import Countdown from '../../common/components/countdown/Countdown';
+
+export default function PlaybackControl() {
+  return (
+    <div className={style.mainContainer}>
+      <div className={style.timeContainer}>
+        <div className={style.timer}>
+          <Countdown time={15} small />
+        </div>
+        <Button width={50} colorScheme='blackAlpha' className={style.minu1}>
+          -1
+        </Button>
+        <Button width={50} colorScheme='blackAlpha' className={style.plus1}>
+          +1
+        </Button>
+        <Button width={50} colorScheme='blackAlpha' className={style.minu5}>
+          -5
+        </Button>
+        <Button width={50} colorScheme='blackAlpha' className={style.plus5}>
+          +5
+        </Button>
+      </div>
+
+      <div className={style.playbackContainer}>
+        <Button width={120} colorScheme='green' className={style.start}>
+          Start
+        </Button>
+        <Button width={120} colorScheme='orange' className={style.pause}>
+          Pause
+        </Button>
+        <Button width={120} colorScheme='yellow' className={style.reset}>
+          Reset
+        </Button>
+      </div>
+      <div className={style.trackContainer}>
+        <Button width={100} colorScheme='blackAlpha' className={style.prev}>
+          Prev
+        </Button>
+        <Button width={100} colorScheme='blackAlpha' className={style.next}>
+          Next
+        </Button>
+        <Button width={100} colorScheme='blackAlpha' className={style.reset}>
+          Roll
+        </Button>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,43 @@
+.mainContainer {
+  width: 90%;
+  display: flex;
+  margin: 0 auto;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.timeContainer {
+  display: grid;
+  gap: 5px;
+  grid-template-areas:
+    'timer plus1 plus5'
+    'timer minu1 minu5';
+  grid-template-columns: auto 50px 50px;
+}
+
+.timer {
+  grid-area: timer;
+}
+
+.plus1 {
+  grid-area: plus1;
+}
+
+.plus5 {
+  grid-area: plus5;
+}
+
+.minu1 {
+  grid-area: minu1;
+}
+
+.minu5 {
+  grid-area: minu5;
+}
+
+.playbackContainer, .trackContainer {
+  display: flex;
+  justify-content: space-evenly;
+  padding-top: 0.5em;
+
+}