refactor: subscript clock

apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.scss

@@ -2,3 +2,7 @@ sup.period {
   top: -1em;
   font-size: 0.4em;
 }
+
+.subscript {
+  font-size: 0.75em;
+}

apps/client/src/features/viewers/common/superscript-time/SuperscriptTime.tsx

@@ -9,17 +9,32 @@ interface SuperscriptTimeProps {
 }
 
 /**
- * @description receives a string like 12:00 AM and adds the period part to the superscript
+ * When the timer includes seconds, we want to split it from the rest
+ */
+function getTimerParts(time: string) {
+  if (time.length !== 8) {
+    return [time, ''];
+  }
+
+  return [time.slice(0, 5), time.slice(5)];
+}
+
+/**
+ * Receives a time string and formats it with a subscript or superscript
+ * @example 12:00 AM -> AM becomes a superscript
+ * @example 12:00:10 -> the seconds become a subscript
  */
 export default function SuperscriptTime(props: SuperscriptTimeProps) {
   const { time, className, style } = props;
 
   // we assume anything after space is a period tag
   const [timeString, period] = time.split(' ');
+  const [mainTime, subscript] = getTimerParts(timeString);
 
   return (
     <div className={className} style={style}>
-      {timeString}
+      {mainTime}
+      {subscript && <span className='subscript'>{subscript}</span>}
       {period && <sup className='period'>{period}</sup>}
     </div>
   );