feat(WEB-154): my profile view

components/MyProfile/Card/Title/index.tsx

@@ -0,0 +1,21 @@
+import { headingVariants } from "./variants"
+
+import type { HeadingProps } from "@/types/components/myPages/myProfile/card/title"
+
+export default function Title({
+  as,
+  children,
+  className = "",
+  level = "h1",
+  uppercase = false,
+  weight,
+}: HeadingProps) {
+  const Hx = level
+  const classNames = headingVariants({
+    className,
+    text: uppercase ? "uppercase" : undefined,
+    type: as ?? level,
+    weight,
+  })
+  return <Hx className={classNames}>{children}</Hx>
+}

components/MyProfile/Card/Title/title.module.css

@@ -0,0 +1,68 @@
+.heading {
+  color: var(--some-black-color, #2E2E2E);
+  /* font-family: var(--ff-brandon-text); */
+  letter-spacing: 6%;
+  margin: 0;
+  padding: 0;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.h1 {
+  font-size: 2.5rem;
+  line-height: 3.5rem;
+}
+
+.h2 {
+  font-size: 1.3rem;
+  line-height: 1.6rem;
+}
+
+.h3 {
+  font-size: 1.8rem;
+}
+
+.h4 {
+  font-size: 1.6rem;
+}
+
+.h5 {
+  font-size: 1.3rem;
+}
+
+.h6 {
+  font-size: 1rem;
+}
+
+.light {
+  font-weight: 300;
+}
+
+.regular {
+  font-weight: 400;
+}
+
+.medium {
+  font-weight: 500;
+}
+
+.semiBold {
+  font-weight: 600;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.black {
+  font-weight: 900;
+}
+
+/* @media screen and (min-width: 950px) {
+  .h1 {
+    font-size: 3.8rem;
+    line-height: 4.5rem;
+  }
+} */

components/MyProfile/Card/Title/variants.ts

@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./title.module.css"
+
+const config = {
+  variants: {
+    text: {
+      uppercase: styles.uppercase,
+    },
+    type: {
+      h1: styles.h1,
+      h2: styles.h2,
+      h3: styles.h3,
+      h4: styles.h4,
+      h5: styles.h5,
+      h6: styles.h6,
+    },
+    weight: {
+      light: styles.light,
+      regular: styles.regular,
+      medium: styles.medium,
+      semiBold: styles.semiBold,
+      bold: styles.bold,
+      black: styles.black,
+    },
+  },
+  defaultVariants: {
+    type: "h1",
+    weight: "medium",
+  },
+} as const
+
+export const headingVariants = cva(styles.heading, config)

components/MyProfile/Card/card.module.css

@@ -0,0 +1,6 @@
+.card {
+  background-color: var(--some-grey-color, #F2F2F2);
+  border-radius: 0.4rem;
+  min-height: 15.6rem;
+  padding: 3.8rem;
+}

components/MyProfile/Card/index.tsx

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority"
+
+import Title from "./Title"
+
+import styles from "./card.module.css"
+
+import type { CardProps } from "@/types/components/myPages/myProfile/card/card"
+
+const cardStyles = cva(styles.card)
+
+export default function Card({ className, tag = "section", ...props }: CardProps) {
+  const Cmp = tag
+  return <Cmp className={cardStyles({ className })} {...props} />
+}
+
+Card.Title = Title