sketch playback component

src/common/components/countdown/Countdown.jsx

@@ -10,12 +10,14 @@ function display(seconds) {
   else return [hours, minutes, seconds % 60].map(format).join(':');
 }
 
-export default function Countdown({ time }) {
+export default function Countdown({ time, small }) {
   const [counter, setCounter] = useState(time);
 
   useEffect(() => {
     counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
   }, [counter]);
 
-  return <div className={styles.countdownClock}>{display(counter)}</div>;
+  return <div
+  className={small ? styles.countdownClockSmall : styles.countdownClock}
+  >{display(counter)}</div>;
 }

src/common/components/countdown/Countdown.module.css

@@ -8,4 +8,12 @@
   text-align: center;
   letter-spacing: 0.125em;
   line-height: 0.9;
+}
+
+.countdownClockSmall {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 6em;
+  text-align: center;
+  letter-spacing: 0.125em;
+  line-height: 0.9;
 }

src/features/control/PlaybackControl.jsx

@@ -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>
+  );
+}

src/features/control/PlaybackControl.module.css

@@ -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;
+
+}