feat: two factor authentication segment in preferences with mocked state (#600)

app/assets/javascripts/preferences/components/Content.tsx

@@ -0,0 +1,28 @@
+import { FunctionComponent } from 'preact';
+
+export const Title: FunctionComponent = ({ children }) => (
+  <h2 className="text-base m-0 mb-1">{children}</h2>
+);
+
+export const Subtitle: FunctionComponent = ({ children }) => (
+  <h4 className="font-medium text-sm m-0 mb-1">{children}</h4>
+);
+
+export const Text: FunctionComponent = ({ children }) => (
+  <p className="text-xs">{children}</p>
+);
+
+export const Button: FunctionComponent<{ label: string; link: string }> = ({
+  label,
+  link,
+}) => (
+  <a
+    target="_blank"
+    className="block bg-default color-text rounded border-solid border-1 
+    border-gray-300 px-4 py-2 font-bold text-sm fit-content mt-3
+    focus:bg-contrast hover:bg-contrast "
+    href={link}
+  >
+    {label}
+  </a>
+);