Use client

lib/client/LoadingSpinner.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from "react";
 
 export default function LoadingSpinner() {

lib/client/media.ts

@@ -1,20 +1,4 @@
-export interface ProfileData {
-  id: string;
-  name: string;
-  image: string;
-  profile: {
-    location: string;
-    gender: string;
-    personalityType: string;
-    conflictStyle: string;
-    description: string;
-    contactInfo: string;
-    intellectualInterests: { interest?: { name?: string, id?: string } }[];
-    causeAreas: { causeArea?: { name?: string, id?: string } }[];
-    desiredConnections: { connection?: { name?: string, id?: string } }[];
-    promptAnswers: { prompt?: string; answer?: string, id?: string }[];
-  };
-}
+'use client';
 
 export async function parseImage(img: string, setImage: any, batch = false) {
   if (!img) {

lib/client/profile.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Image from "next/image";
 import {pStyle} from "@/lib/client/constants";
 import {useEffect, useState} from "react";
@@ -192,6 +194,16 @@ export function getProfile(url: string, header: any = null) {
               )
             }
 
+            {
+              userData?.profile?.introversion && (
+                <div>
+                  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider"> Introversion </h2>
+                  < p
+                    className="mt-1 capitalize"> {userData.profile.introversion}% </p>
+                </div>
+              )
+            }
+
             {
               userData?.profile?.personalityType && (
                 <div>

lib/client/schema.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export interface ProfileData {
   id: string;
   name: string;