move files

frontend/src/components/Labeled.tsx

@@ -0,0 +1,16 @@
+import {FC, ReactElement} from 'react';
+import {Label, Tooltip} from '@fluentui/react-components';
+
+export const Labeled: FC<{ label: string; desc?: string, content: ReactElement }> = ({label, desc, content}) => {
+  return (
+    <div className="grid grid-cols-2 items-center">
+      {desc ?
+        <Tooltip content={desc} showDelay={0} hideDelay={0} relationship="description">
+          <Label>{label}</Label>
+        </Tooltip> :
+        <Label>{label}</Label>
+      }
+      {content}
+    </div>
+  );
+};

frontend/src/components/Section.tsx

@@ -0,0 +1,21 @@
+import {FC, ReactElement} from 'react';
+import {Card, Text} from '@fluentui/react-components';
+
+export const Section: FC<{
+  title: string; desc?: string, content: ReactElement, outline?: boolean
+}> =
+  ({title, desc, content, outline = true}) => {
+    return (
+      <Card size="small" appearance={outline ? 'outline' : 'subtle'}>
+        <div className="flex flex-col gap-5">
+          <div className="flex flex-col gap-1">
+            <Text weight="medium">{title}</Text>
+            {desc && <Text size={100}>{desc}</Text>}
+          </div>
+        </div>
+        <div className="overflow-y-auto overflow-x-hidden p-1">
+          {content}
+        </div>
+      </Card>
+    );
+  };

frontend/src/components/ToolTipButton.tsx

@@ -0,0 +1,10 @@
+import React, {FC, ReactElement} from 'react';
+import {Button, Tooltip} from '@fluentui/react-components';
+
+export const ToolTipButton: FC<{ text?: string, desc: string, icon?: ReactElement }> = ({text, desc, icon}) => {
+  return (
+    <Tooltip content={desc} showDelay={0} hideDelay={0} relationship="label">
+      <Button icon={icon}>{text}</Button>
+    </Tooltip>
+  );
+};