Move client profile to header

src/components/client-form/client-form.tsx

@@ -4,12 +4,18 @@ import { Profile } from '@/types';
 import { useEffect, useState } from 'react';
 import { retrieveApiRequest, RetrieveResponse } from '@/pages/api/retrieve';
 import Card from '../card/card';
+import Portal from '../portal/portal';
 
 const ClientForm = () => {
   const [profile, setProfile] = useState<Profile>(
     Object.keys(PROFILES)[0] as Profile,
   );
   const [destinations, setDestinations] = useState<RetrieveResponse[]>();
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
 
   function retrieveRelevantDestinations() {
     retrieveApiRequest().then((response) => {
@@ -32,17 +38,19 @@ const ClientForm = () => {
       <Header />
       <div className="w-[1200px] m-auto pt-2 flex justify-between">
         <div className="w-fit">
-          <label className="mr-4">Perfil usuario:</label>
-          <select
-            className="border-2 p-2"
-            onChange={(e) => setProfile(e.currentTarget.value as Profile)}
-          >
-            {Object.entries(PROFILES).map((profile) => (
-              <option key={profile[0]} value={profile[0]}>
-                {profile[1]}
-              </option>
-            ))}
-          </select>
+        {isMounted && (
+            <Portal>
+                <select
+                    className="mb-2 iberia-bg-color text-white font-bold"
+                    onChange={(e) => setProfile(e.currentTarget.value as Profile)}
+                >
+                {Object.entries(PROFILES).map((profile) => (
+                  <option key={profile[0]} value={profile[0]}>
+                    {profile[1]}
+                  </option>
+                ))}
+                </select>
+            </Portal>)}
         </div>
       </div>
       {destinations != null && (

src/components/header/header.tsx

@@ -1,7 +1,7 @@
-import styles from './header.module.css';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import styles from './header.module.css';
 
 const routes = [
   {
@@ -20,27 +20,30 @@ const Header = () => {
   return (
     <div className={styles.header__wrapper + ' iberia-bg-color p-4'}>
       <div className="w-[1200px] m-auto flex justify-between items-end">
-        <Image
-          src="/iberia-logo.png"
-          alt="Iberia logo"
-          width={180}
-          height={40}
-        />
-        <div className="pb-2 text-white">
-          {routes.map((route, index) => (
-            <span key={route.name}>
-              <Link
-                href={route.href}
-                className={router.asPath === route.href ? 'font-bold' : ''}
-              >
-                {route.name}
-              </Link>
-              {index < routes.length - 1 && (
-                <span className="mx-2 text-white">|</span>
-              )}
-            </span>
-          ))}
+        <div className="flex gap-12 items-center">
+          <Image
+              src="/iberia-logo.png"
+              alt="Iberia logo"
+              width={180}
+              height={40}/>
+          <div className="mb-2 text-white">
+            {routes.map((route, index) => (
+              <span key={route.name}>
+                <Link
+                  href={route.href}
+                  className={router.asPath === route.href ? 'font-bold' : ''}
+                >
+                  {route.name}
+                </Link>
+                {index < routes.length - 1 && (
+                  <span className="mx-2 text-white">|</span>
+                )}
+              </span>
+            ))}
+          </div>
         </div>
+        {/* <span className="text-white w-8">({profile})</span> */}
+        <div className="mb-2" id="profile-form"></div>
       </div>
     </div>
   );

src/components/portal/portal.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const Portal = ({ children }) => {
+  const portalRoot = typeof document !== 'undefined' ? document.getElementById('profile-form') : null;
+  return portalRoot ? ReactDOM.createPortal(children, portalRoot) : null;
+};
+export default Portal;

src/pages/admin/index.tsx

@@ -1,12 +1,12 @@
 import Header from '@/components/header/header';
 import { DESTINATIONS, ENGINES, PROFILES } from '@/constants';
-import { useEffect, useState } from 'react';
-import { useLocalStorage } from 'usehooks-ts';
+import { generateApiRequest } from '@/pages/api/generate';
+import { saveApiRequest } from '@/pages/api/save';
 import { Engine, LocalStorageImgUrls, Profile } from '@/types';
 import { addUrl } from '@/utils';
+import { useEffect, useState } from 'react';
+import { useLocalStorage } from 'usehooks-ts';
 import styles from './index.module.css';
-import { saveApiRequest } from '@/pages/api/save';
-import { generateApiRequest } from '@/pages/api/generate';
 
 function getPrompt(profileKey: Profile, destination: string): string {
   const profile = PROFILES[profileKey];
@@ -82,7 +82,7 @@ const AdminPage = () => {
 
   return (
     <>
-      <Header />
+      <Header/>
       <div className="w-[1200px] m-auto pt-2">
         <h1>Página de administración de Gen-AI</h1>
         <div className="pt-2 flex justify-between">