feat(WEB-170): edit profile view

components/MyProfile/Field/field.module.css

@@ -0,0 +1,47 @@
+.container {
+  align-content: flex-start;
+  align-items: center;
+  display: grid;
+  gap: 0.4rem 1.7rem;
+  grid-template-areas:
+    "icon label"
+    "icon content";
+  grid-template-columns: auto 1fr;
+  justify-content: flex-start;
+}
+
+.icon {
+  align-items: center;
+  background-color: var(--some-white-color, #fff);
+  border-radius: 50%;
+  display: flex;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  grid-area: icon;
+  height: 3rem;
+  justify-content: center;
+  line-height: 1.9rem;
+  width: 3rem;
+}
+
+.label,
+.content {
+  font-family: var(--ff-fira-sans);
+  font-weight: 400;
+  letter-spacing: -1.5%;
+  line-height: 2.4rem;
+}
+
+.label {
+  color: var(--some-black-color, #404040);
+  grid-area: label;
+  font-size: 1.6rem;
+}
+
+.content {
+  color: var(--some-black-color, #000);
+  grid-area: content;
+  font-size: 1.8rem;
+  justify-self: stretch;
+}

components/MyProfile/Field/index.tsx

@@ -0,0 +1,26 @@
+import styles from "./field.module.css"
+
+export default function Field(props: React.HtmlHTMLAttributes<HTMLDivElement>) {
+  return <div {...props} className={styles.container} />
+}
+
+function Icon({ children }: React.PropsWithChildren) {
+  return <span className={styles.icon}>{children}</span>
+}
+
+function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return <label {...props} className={styles.label} />
+}
+
+function TextLabel({ children }: React.PropsWithChildren) {
+  return <span className={styles.label}>{children}</span>
+}
+
+function Content({ children }: React.PropsWithChildren) {
+  return <div className={styles.content}>{children}</div>
+}
+
+Field.Content = Content
+Field.Icon = Icon
+Field.Label = Label
+Field.TextLabel = TextLabel