Implemented update UI

2 files changed, 46 insertions, 0 deletions

diff --git a/client/src/components/BiometricCard/BiometricCard.jsx b/client/src/components/BiometricCard/BiometricCard.jsx
new file mode 100644
index 0000000..ff5271f
--- /dev/null
+++ b/client/src/components/BiometricCard/BiometricCard.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import EditButton from '../EditButton/EditButton'
+import styles from './BiometricCard.module.css'
+
+const BiometricCard = ({ label, onclick }) => {
+  return (
+    <div className={styles.formone}>
+      <div className={styles.input}>
+        <div className={styles.input__container}>
+          <div className={styles.input__edit}>
+            <div className={styles.input__field}>{label}</div>
+            <EditButton onClick={onclick} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BiometricCard
diff --git a/client/src/components/BiometricCard/BiometricCard.module.css b/client/src/components/BiometricCard/BiometricCard.module.css
new file mode 100644
index 0000000..ca6f46a
--- /dev/null
+++ b/client/src/components/BiometricCard/BiometricCard.module.css
@@ -0,0 +1,26 @@
+.input {
+    display: flex;
+    justify-content: center;
+    font-family: 'Barlow';
+    font-size: var(--font-medium-s);
+  }
+  
+  .input__container {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .input__edit{
+    display: flex;
+    flex-direction: row;
+  }
+  
+  .input__field {
+    width: 300px;
+    margin: 10px 0px;
+    padding: 18px 10px;
+    border: 3px solid;
+    border-radius: 10px;
+    font-size: 1rem;
+    text-align: center;
+  }
\ No newline at end of file