Port over more UI elements.

src/components/ui/Overline.tsx

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components';
+import { Children } from '../../types/Preact';
+
+interface Props {
+    block?: boolean;
+    error?: Children;
+    children?: Children;
+    type?: "default" | "subtle" | "error";
+}
+
+const OverlineBase = styled.div<Omit<Props, 'children' | 'error'>>`
+    display: inline;
+    margin: 0.4em 0;
+    margin-top: 0.8em;
+
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--foreground);
+    text-transform: uppercase;
+
+    ${ props => props.type === 'subtle' && css`
+        font-size: 12px;
+        color: var(--secondary-foreground);
+    ` }
+
+    ${ props => props.type === 'error' && css`
+        font-size: 12px;
+        font-weight: 400;
+        color: var(--error);
+    ` }
+
+    ${ props => props.block && css`display: block;` }
+`;
+
+export function Overline(props: Props) {
+    return (
+        <OverlineBase {...props}>
+            { props.children }
+            { props.children && props.error && <> &middot; </> }
+            { props.error && (
+                <Overline type="error">
+                    { props.error }
+                </Overline>
+            ) }
+        </OverlineBase>
+    )
+}