Duration and size tags

src-web/components/core/DurationTag.tsx

@@ -0,0 +1,25 @@
+interface Props {
+  millis: number;
+}
+
+export function DurationTag({ millis }: Props) {
+  let num;
+  let unit;
+
+  if (millis > 1000 * 60) {
+    num = millis / 1000 / 60;
+    unit = 'min';
+  } else if (millis > 1000) {
+    num = millis / 1000;
+    unit = 's';
+  } else {
+    num = millis;
+    unit = 'ms';
+  }
+
+  return (
+    <>
+      {Math.round(num * 10) / 10} {unit}
+    </>
+  );
+}

src-web/components/core/SizeTag.tsx

@@ -0,0 +1,28 @@
+interface Props {
+  contentLength: number;
+}
+
+export function SizeTag({ contentLength }: Props) {
+  let num;
+  let unit;
+
+  if (contentLength > 1000 * 1000 * 1000) {
+    num = contentLength / 1000 / 1000 / 1000;
+    unit = 'GB';
+  } else if (contentLength > 1000 * 1000) {
+    num = contentLength / 1000 / 1000;
+    unit = 'MB';
+  } else if (contentLength > 1000) {
+    num = contentLength / 1000;
+    unit = 'KB';
+  } else {
+    num = contentLength;
+    unit = 'B';
+  }
+
+  return (
+    <>
+      {Math.round(num * 10) / 10} {unit}
+    </>
+  );
+}