feat: Timeline UI (#2830)

web/src/icons/Next.jsx

@@ -0,0 +1,13 @@
+
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function Next({ className = '' }) {
+  return (
+    <svg className={`fill-current ${className}`} style="width:24px;height:24px" viewBox="0 0 24 24">
+      <path d="M4,5V19L11,12M18,5V19H20V5M11,5V19L18,12" />
+    </svg>
+  );
+}
+
+export default memo(Next);

web/src/icons/Pause.jsx

@@ -0,0 +1,13 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function Pause({ className = '' }) {
+  return (
+    <svg height='24' viewBox='0 0 24 24' width='24' className={className}>
+      <path d='M0 0h24v24H0V0z' fill='none' />
+      <path d='M6 19h4V5H6v14zm8-14v14h4V5h-4z' className='fill-current' />
+    </svg>
+  );
+}
+
+export default memo(Pause);

web/src/icons/Play.jsx

@@ -0,0 +1,12 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function Play({ className = '' }) {
+  return (
+    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+      <path fill="currentColor" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
+    </svg>
+  );
+}
+
+export default memo(Play);

web/src/icons/Previous.jsx

@@ -0,0 +1,12 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function Previous({ className = '' }) {
+  return (
+    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
+      <path fill="currentColor" d="M20,5V19L13,12M6,5V19H4V5M13,5V19L6,12" />
+    </svg>
+  );
+}
+
+export default memo(Previous);