Initial profile refactor of layout and config

2021-09-12 05:03:58 -04:00
parent 3dbb963e4e
commit 55d48057da
13 changed files with 383 additions and 170 deletions
--- a/app/web/src/components/KeyValue/KeyValue.tsx
+++ b/app/web/src/components/KeyValue/KeyValue.tsx
@@ -0,0 +1,54 @@
+import Svg from 'src/components/Svg/Svg'
+
+interface KeyValueType {
+  keyName: string
+  children: React.ReactNode
+  hide?: boolean
+  canEdit?: boolean
+  onEdit?: () => void
+  isEditable?: boolean
+  bottom?: boolean
+  className?: string
+}
+
+const KeyValue = ({
+    keyName,
+    children,
+    hide = false,
+    canEdit = false,
+    onEdit,
+    isEditable = false,
+    bottom = false,
+    className = "",
+  } : KeyValueType) => {
+    if (!children || hide) return null
+    return (
+      <div className={"flex flex-col " + className}>
+        <div className={"text-ch-blue-400 font-fira-code flex items-center leading-4 text-sm whitespace-nowrap " + (bottom ? "order-2" : "")}>
+          {keyName}
+          {canEdit &&
+            (isEditable ? (
+              <button
+                className="font-fira-sans items-center ml-4 grid grid-flow-col-dense p-px px-2 gap-2 bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 rounded-sm border border-ch-purple-400"
+                id="rename-button"
+                onClick={onEdit}
+              >
+                <Svg
+                  name="check"
+                  className="w-6 h-6 text-ch-purple-500"
+                  strokeWidth={3}
+                />
+                <span>Update</span>
+              </button>
+            ) : (
+              <button onClick={onEdit}>
+                <Svg name="pencil-solid" className="h-4 w-4 ml-4 mb-2" />
+              </button>
+            ))}
+        </div>
+        <div className={"text-ch-gray-300 " + (bottom ? "mb-1" : "mt-1")}>{children}</div>
+      </div>
+    )
+  }
+
+  export default KeyValue