feat(WEB-154): my profile view

components/MyProfile/LabelAndIcon/index.tsx

@@ -0,0 +1,25 @@
+import styles from "./lai.module.css"
+
+export default function LabelAndIcon({ children }: React.PropsWithChildren) {
+  return (
+    <div className={styles.container}>
+      {children}
+    </div>
+  )
+}
+
+function Icon({ children }: React.PropsWithChildren) {
+  return <span className={styles.icon}>{children}</span>
+}
+
+function Label({ children }: React.PropsWithChildren) {
+  return <span className={styles.label}>{children}</span>
+}
+
+function Content({ children }: React.PropsWithChildren) {
+  return <span className={styles.content}>{children}</span>
+}
+
+LabelAndIcon.Icon = Icon
+LabelAndIcon.Label = Label
+LabelAndIcon.Content = Content

components/MyProfile/LabelAndIcon/lai.module.css

@@ -0,0 +1,45 @@
+.container {
+  align-content: flex-start;
+  align-items: center;
+  display: grid;
+  gap: 0.4rem 1.7rem;
+  grid-template-areas:
+    "icon label"
+    "icon content";
+  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;
+}