diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index fd36f9494..725dd6f24 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -3,4 +3,4 @@
///
// 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.
diff --git a/apps/web/src/app/profile/page.tsx b/apps/web/src/app/profile/page.tsx
index 3fd2d27c7..922976456 100644
--- a/apps/web/src/app/profile/page.tsx
+++ b/apps/web/src/app/profile/page.tsx
@@ -9,7 +9,11 @@ const ProfilePage = async () => {
redirect("/")
}
- return
+ return (
+ <>
+
+ >
+ )
}
export default ProfilePage
diff --git a/apps/web/src/components/molecules/ProfileMolecules/BioDisplay.tsx b/apps/web/src/components/molecules/ProfileMolecules/BioDisplay.tsx
new file mode 100644
index 000000000..4e766cd36
--- /dev/null
+++ b/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 = ({ quote, name, year, className }) => {
+ return (
+
+
{quote}
+
+ - {name} {year}
+
+
+ )
+}
+
+export default QuoteDisplay
diff --git a/apps/web/src/components/molecules/ProfileMolecules/PersonalInfo.tsx b/apps/web/src/components/molecules/ProfileMolecules/PersonalInfo.tsx
new file mode 100644
index 000000000..54b6cc3f9
--- /dev/null
+++ b/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 = ({ user, className }) => {
+ console.log("PersonalInfo")
+ console.log(user)
+ return (
+
+
+
+ {user.name}
+
+
{user.name}
+
{user.email}
+
+ {/* */}
+
+ )
+}
+
+export default PersonalInfo
diff --git a/apps/web/src/components/molecules/ProfileMolecules/StudyProgressionBox.tsx b/apps/web/src/components/molecules/ProfileMolecules/StudyProgressionBox.tsx
new file mode 100644
index 000000000..add13c1ad
--- /dev/null
+++ b/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 = ({ className }) => {
+ // TODO: Implement dynamic way of getting grade
+ const startYear = 2022
+ const grade = 3
+
+ return (
+
+
{grade}. klasse
+
Studiesett: {startYear}
+
+
+
+
+ )
+}
+
+export default StudyProgressionBox
diff --git a/apps/web/src/components/organisms/ProfileComponents/ProfileInfoBox.tsx b/apps/web/src/components/organisms/ProfileComponents/ProfileInfoBox.tsx
new file mode 100644
index 000000000..f745387c8
--- /dev/null
+++ b/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 = ({ 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 (
+
+
+
+
+ {bio && (
+
+
+
+ )}
+
+
+
+
+ )
+}
+
+export default ProfileInfoBox
diff --git a/apps/web/src/components/views/ProfileView/index.tsx b/apps/web/src/components/views/ProfileView/index.tsx
index 208bbb3db..e01c3d863 100644
--- a/apps/web/src/components/views/ProfileView/index.tsx
+++ b/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