Header component

src/api/index.js

@@ -9,3 +9,7 @@ const url = 'https://store.itmarck.com'
 export const client = createDirectus(url, { globals: { fetch } })
   .with(authentication('json', { storage }))
   .with(rest())
+
+export function buildImageUrl(imageId) {
+  return `${url}/assets/${imageId}`
+}

src/components/Header/index.jsx

@@ -1,15 +1,17 @@
 import './Header.css'
 
-function Header() {
+function Header(props) {
+  const { title, subtitle, avatar, onAvatarClick } = props
   return (
     <section className="Header">
-      <p className="Header__title">Mi cielito</p>
+      <p className="Header__title">{title}</p>
       <div>
-        <p className="Header__name">Luis Barboza</p>
+        <p className="Header__name">{subtitle}</p>
         <img
           className="Header__img"
-          src="https://img.freepik.com/foto-gratis/collage-fondo-programacion_23-2149901782.jpg?w=996&t=st=1709668841~exp=1709669441~hmac=115e1de9393fffe964ebf0bd2fc31b12602b03077f87a6fd6306c1103629e657"
+          src={avatar}
           alt=""
+          onClick={onAvatarClick}
         />
       </div>
     </section>

src/pages/Home/index.jsx

@@ -1,13 +1,20 @@
+import { buildImageUrl } from '../../api'
 import Details from '../../components/Details'
 import Dropdown from '../../components/Dropdown'
 import Header from '../../components/Header'
 import ProductList from '../../components/ProductList'
 import Scanner from '../../components/Scanner'
+import { useGlobalStore } from '../../store'
 import './Home.css'
 function Home() {
+  const { user } = useGlobalStore()
+  const avatar = buildImageUrl(user?.avatar)
+  const name = user?.first_name + ' ' + user?.last_name
+  const title = 'Mi cielo'
+
   return (
     <div className="Home">
-      <Header />
+      <Header title={title} subtitle={name} avatar={avatar} />
       <Dropdown />
       <Scanner />
       <ProductList />