From 4e87fe5de2ac662f6e5e116c1af68c811dfeea14 Mon Sep 17 00:00:00 2001
From: luis <luisbarboz.17@gmail.com>
Date: Mon, 11 Mar 2024 22:59:43 -0500
Subject: [PATCH] Pass props to the elements componentnet header

---
 src/api/index.js                |  4 ++++
 src/components/Header/index.jsx | 10 ++++++----
 src/pages/Home/index.jsx        |  9 ++++++++-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index a8ef287..de8d758 100644
--- a/src/api/index.js
+++ b/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}`
+}
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index fdc29a4..e986a31 100644
--- a/src/components/Header/index.jsx
+++ b/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>
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
index 41d6b5f..17e34fb 100644
--- a/src/pages/Home/index.jsx
+++ b/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 />