Move client profile to header

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

@@ -1,11 +1,12 @@
 import Header from '@/components/header/header';
 import { DESTINATIONS, PROFILES } from '@/constants';
+import { RetrieveResponse, retrieveApiRequest } from '@/pages/api/retrieve';
 import { LocalStorageImgUrls, Profile } from '@/types';
+import { getLocalStorageKey } from '@/utils';
 import { useEffect, useState } from 'react';
-import { retrieveApiRequest, RetrieveResponse } from '@/pages/api/retrieve';
 import { useLocalStorage } from 'usehooks-ts';
-import { getLocalStorageKey } from '@/utils';
 import Card from '../card/card';
+import Portal from '../portal/portal';
 
 
 const ClientForm = () => {
@@ -19,6 +20,11 @@ const ClientForm = () => {
   );
   const [relevantUrls, setRelevantUrls] = useState<string[]>([]);
   const [destinations, setDestinations] = useState<RetrieveResponse[]>();
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
 
   function retrieveRelevantUrls() {
     retrieveApiRequest()
@@ -45,7 +51,7 @@ const ClientForm = () => {
 
   return (
     <>
-      <Header />
+      <Header/>
       <div className="w-[1200px] m-auto pt-2 flex justify-between">
         <div className="w-fit">
           <label className="mr-4">Destino:</label>
@@ -59,15 +65,17 @@ const ClientForm = () => {
           </select>
         </div>
         <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">

src/pages/admin/login.tsx

@@ -1,5 +1,5 @@
 import Header from "@/components/header/header";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
 
 const AdminLoginPage = () => {
   const router = useRouter();