Create profile info component (#1041)

apps/web/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/web/src/app/profile/page.tsx

@@ -9,7 +9,11 @@ const ProfilePage = async () => {
     redirect("/")
   }
 
-  return <ProfilePoster user={session.user} />
+  return (
+    <>
+      <ProfilePoster user={session.user} />
+    </>
+  )
 }
 
 export default ProfilePage

apps/web/src/components/molecules/ProfileMolecules/BioDisplay.tsx

@@ -0,0 +1,21 @@
+import type { FC } from "react"
+
+type QuoteDisplayProps = {
+  quote: string
+  name: string
+  year: number
+  className?: string
+}
+
+const QuoteDisplay: FC<QuoteDisplayProps> = ({ quote, name, year, className }) => {
+  return (
+    <div className={`px-16 items-center justify-center ${className}`}>
+      <p className="text-slate-10">{quote}</p>
+      <p className="text-slate-10">
+        - {name} {year}
+      </p>
+    </div>
+  )
+}
+
+export default QuoteDisplay

apps/web/src/components/molecules/ProfileMolecules/PersonalInfo.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Avatar, AvatarFallback, AvatarImage, Button } from "@dotkomonline/ui"
+import type { User } from "next-auth"
+import Link from "next/link"
+import type { FC } from "react"
+
+type PersonalInfoProps = {
+  user: User
+  className?: string
+}
+
+const PersonalInfo: FC<PersonalInfoProps> = ({ user, className }) => {
+  console.log("PersonalInfo")
+  console.log(user)
+  return (
+    <div className={`flex flex-col items-center justify-center gap-3 ${className}`}>
+      <Avatar className="w-40 h-auto opacity-60">
+        <AvatarImage src={user.image} alt="UserAvatar" />
+        <AvatarFallback className="w-40 h-40">{user.name}</AvatarFallback>
+      </Avatar>
+      <p className="text-lg">{user.name}</p>
+      <p className="text-lg text-slate-10">{user.email}</p>
+      <Button variant="gradient" className="self-auto">
+        <Link href="/settings">Profil Innstillinger</Link>
+      </Button>
+      {/* <ChangeAvatar {...user} /> */}
+    </div>
+  )
+}
+
+export default PersonalInfo

apps/web/src/components/molecules/ProfileMolecules/StudyProgressionBox.tsx

@@ -0,0 +1,24 @@
+import type { FC } from "react"
+import StudentProgress from "../StudentProgress/StudentProgress"
+
+type StudyProgressionBoxProps = {
+  className?: string
+}
+
+const StudyProgressionBox: FC<StudyProgressionBoxProps> = ({ className }) => {
+  // TODO: Implement dynamic way of getting grade
+  const startYear = 2022
+  const grade = 3
+
+  return (
+    <div className={`flex flex-col items-center justify-center gap-3 ${className ?? ""}`}>
+      <p>{grade}. klasse</p>
+      <p>Studiesett: {startYear}</p>
+      <div className="transform scale-90">
+        <StudentProgress year={grade} />
+      </div>
+    </div>
+  )
+}
+
+export default StudyProgressionBox

apps/web/src/components/organisms/ProfileComponents/ProfileInfoBox.tsx

@@ -0,0 +1,36 @@
+import BioDisplay from "@/components/molecules/ProfileMolecules/BioDisplay"
+import PersonalInfo from "@/components/molecules/ProfileMolecules/PersonalInfo"
+import StudyProgressionBox from "@/components/molecules/ProfileMolecules/StudyProgressionBox"
+import type { User } from "next-auth"
+import type { FC } from "react"
+
+type ProfileInfoBoxProps = {
+  user: User
+}
+
+const ProfileInfoBox: FC<ProfileInfoBoxProps> = ({ user }) => {
+  const lineStyle = "flex flex-1 border-r border-slate-7 justify-center items-center last:border-r-0"
+  const bio = true // TODO: Implement fetching bio from user, setting to false if no bio
+
+  return (
+    <div className="border-slate-7 mt-9 min-w-[970px] rounded-xl left-0 z-0 w-full border flex flex-row justify-evenly py-16">
+      <div className={`min-w-[340px] ${lineStyle}`}>
+        <PersonalInfo user={user} />
+      </div>
+      {bio && (
+        <div className={`min-w-[220px] ${lineStyle}`}>
+          <BioDisplay
+            quote="Most people call me Ho Lee, but you can call me anytime <3. "
+            name="Ho Lee Fuk"
+            year={2024}
+          />
+        </div>
+      )}
+      <div className={`min-w-[410px] ${lineStyle}`}>
+        <StudyProgressionBox />
+      </div>
+    </div>
+  )
+}
+
+export default ProfileInfoBox

apps/web/src/components/views/ProfileView/index.tsx

@@ -1,8 +1,22 @@
+import ProfileInfoBox from "@/components/organisms/ProfileComponents/ProfileInfoBox"
 import type { NextPage } from "next"
 import type { User } from "next-auth"
 
 const ProfilePoster: NextPage<{ user: User }> = ({ user }) => {
-  return <div className="w-full p-3 mt-3 flex justify-center border-2 rounded-lg">ProfilePoster</div>
+  return (
+    <>
+      <div className="border-slate-7 left-0 z-0 w-full border-b">
+        <div className="flex flex-row gap-96 py-5">
+          <div className="flex flex-col">
+            <p className="mt-4 text-3xl font-bold border-b-0">Min profil</p>
+            <p className="text-slate-9 pt-2">Oversikt over din profil</p>
+          </div>
+        </div>
+      </div>
+
+      <ProfileInfoBox user={user} />
+    </>
+  )
 }
 
 export default ProfilePoster