refactor: finish view directory migration

apps/client/src/views/common/superscript-time/SuperscriptPeriod.tsx

@@ -0,0 +1,23 @@
+import './SuperscriptTime.scss';
+
+interface SuperscriptPeriodProps {
+  time: string;
+  className?: string;
+}
+
+/**
+ * Receives a time string and formats periods (am/pm) as superscript
+ * @example 12:00 AM -> AM becomes a superscript
+ * @example 12:00:10 -> no formatting changes applied
+ */
+export default function SuperscriptPeriod({ time, className }: SuperscriptPeriodProps) {
+  // we assume anything after space is a period tag
+  const [timeString, period] = time.split(' ');
+
+  return (
+    <div className={className}>
+      {timeString}
+      {period && <sup className='period'>{period}</sup>}
+    </div>
+  );
+}

apps/client/src/views/common/superscript-time/SuperscriptTime.scss

@@ -0,0 +1,8 @@
+sup.period {
+  top: -1em;
+  font-size: 0.5em;
+}
+
+.subscript {
+  font-size: 0.75em;
+}

apps/client/src/views/common/superscript-time/SuperscriptTime.tsx

@@ -0,0 +1,39 @@
+import { CSSProperties } from 'react';
+
+import './SuperscriptTime.scss';
+
+interface SuperscriptTimeProps {
+  time: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * 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({ time, className, style }: SuperscriptTimeProps) {
+  // 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}>
+      {mainTime}
+      {subscript && <span className='subscript'>{subscript}</span>}
+      {period && <sup className='period'>{period}</sup>}
+    </div>
+  );
+}