From d8a18f2744d80d4cb2a48830974f8ded30d6cdfd Mon Sep 17 00:00:00 2001
From: Rodolfo Ruiz <rodolfo.ruiz@heathus.com>
Date: Wed, 14 May 2025 20:07:36 -0600
Subject: [PATCH] feat: add the header

---
 src/App.jsx                  |  9 ++++--
 src/components/AppHeader.jsx | 55 ++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 src/components/AppHeader.jsx

diff --git a/src/App.jsx b/src/App.jsx
index d43415f..cc5a2f2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
+import AppHeader from './components/AppHeader';
 
 import './App.css'
 
@@ -17,17 +18,19 @@ function App() {
 
       <Background imageName='background.jpg' opacity = {0.65} />
 
-      <AppBar position="static" sx={{ backgroundColor: '#000000a0' }}>
+      <AppHeader zone={zone} />
+
+      {/* <AppBar position="static" sx={{ backgroundColor: '#000000a0' }}>
         <Toolbar>
           <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
             <img src={fendiLogo} alt="Fendi logo" style={{ height: 40 }} />
           </IconButton>
           <Typography variant="h6" sx={{ flexGrow: 1 }}>
-            Fendi Home Experience
+            Fendi Casa Experience
           </Typography>
           <Button color="inherit">Login</Button>
         </Toolbar>
-      </AppBar>
+      </AppBar> */}
 
     </>
   )
diff --git a/src/components/AppHeader.jsx b/src/components/AppHeader.jsx
new file mode 100644
index 0000000..ac2e259
--- /dev/null
+++ b/src/components/AppHeader.jsx
@@ -0,0 +1,55 @@
+import fendiLogo from '/favicon.png'
+import { AppBar, Toolbar, Typography, InputBase, IconButton, Box } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+
+export default function AppHeader({ zone = 'public' }) {
+  const isPrivate = zone === 'private';
+  const isRestricted = zone === 'restricted';
+  const isPublic = zone === 'public';
+
+  return (
+    <AppBar position="static" backgroundColor={isPrivate ? "primary" : isRestricted ? "secondary" : "transparent"} sx={{ backgroundColor: '#000000a0' }}>
+      <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
+        <Box display="flex" alignItems="center">
+          <IconButton edge="start" color="inherit">
+           <img src={fendiLogo} alt="Fendi logo" style={{ height: 40 }} />
+          </IconButton>
+          <Typography variant="h6" noWrap sx={{ ml: 1 }}>
+            {isPrivate ? "Private" : isRestricted ? "Restricted" : "Fendi Casa Experience"}
+          </Typography>
+        </Box>
+
+        {/* Search only visible for restricted or private zones */}
+        {(isRestricted || isPrivate || isPublic) && (
+          <Box sx={{ position: 'relative', display: { xs: 'none', md: 'flex' } }}>
+            <SearchIcon sx={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)' }} />
+            <InputBase
+              placeholder="Search…"
+              sx={{
+                pl: 4,
+                pr: 2,
+                py: 0.5,
+                borderRadius: 1,
+                backgroundColor: '#000000a0',
+                color: 'gray',
+                width: { md: '300px', lg: '400px' }
+              }}
+            />
+          </Box>
+        )}
+        
+        {/* Login button only visible for public zone */}
+        {isPublic && (
+          <Box>
+            <IconButton color="inherit">
+              <Typography variant="button" color="inherit">
+                Login
+              </Typography>
+            </IconButton>
+          </Box>
+        )}
+
+      </Toolbar>
+    </AppBar>
+  );
+}
\ No newline at end of file