Port over more UI elements.

src/components/ui/Tip.tsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { Info } from "@styled-icons/feather";
+import { Children } from "../../types/Preact";
+
+export const TipBase = styled.div`
+	display: flex;
+    padding: 12px;
+    overflow: hidden;
+    align-items: center;
+
+    font-size: 14px;
+    border-radius: 7px;
+    background: var(--primary-header);
+    border: 2px solid var(--secondary-header);
+
+    a {
+        cursor: pointer;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+    
+    svg {
+        flex-shrink: 0;
+        margin-right: 10px;
+    }
+`;
+
+export function Tip(props: { children: Children }) {
+    return (
+        <TipBase>
+            <Info size={20} strokeWidth={2} />
+            <span>{ props.children }</span>
+        </TipBase>
+    )
+}