From f95ee80e15da19db613046f56c499263797219b3 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Sun, 1 Jan 2023 20:20:54 -0300
Subject: [PATCH] refactor(header): created more split components

---
 src/template/Header/index.tsx | 69 ++++++++++++++++++++---------------
 1 file changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/template/Header/index.tsx b/src/template/Header/index.tsx
index 85f97d3..04db0ef 100644
--- a/src/template/Header/index.tsx
+++ b/src/template/Header/index.tsx
@@ -21,6 +21,44 @@ export function Search({ ...props }: SearchProps) {
 	)
 }
 
+interface ContainerBottomProps {
+	isOpen: boolean
+	handleClose: () => void
+}
+
+const ContainerBottom = ({ isOpen, handleClose }: ContainerBottomProps) => {
+	return (
+		<div
+			className={`${css.menu} ${isOpen ? css.active : ''}`}
+			data-jsx="target"
+		>
+			<div className={css['menu-content']}>
+				<div className={css['actions-bottom']}>
+					<a href="/">Entrar</a>
+					<button
+						onClick={handleClose}
+						className={css.close}
+						type="button"
+						data-jsx="event"
+					>
+						<img src={closeIcon} alt="ícone do botão para fechar o menu" />
+					</button>
+				</div>
+
+				<ul className={css.list}>
+					{['Cursos', 'Saiba Mais', 'Institucionais'].map((item, index) => {
+						return (
+							<li key={'header-bottom-list-' + index}>
+								<a href="/">{item}</a>
+							</li>
+						)
+					})}
+				</ul>
+			</div>
+		</div>
+	)
+}
+
 export const Header = () => {
 	const [isOpenMenu, setIsOpenMenu] = useState(false)
 
@@ -75,36 +113,7 @@ export const Header = () => {
 					<Search className={`${css.search} ${css['search-bottom-content']}`} />
 				</div>
 
-				<div
-					className={`${css.menu} ${isOpenMenu ? css.active : ''}`}
-					data-jsx="target"
-				>
-					<div className={css['menu-content']}>
-						<div className={css['actions-bottom']}>
-							<a href="/">Entrar</a>
-							<button
-								onClick={handleClose}
-								className={css.close}
-								type="button"
-								data-jsx="event"
-							>
-								<img src={closeIcon} alt="ícone do botão para fechar o menu" />
-							</button>
-						</div>
-
-						<ul className={css.list}>
-							<li>
-								<a href="/">Cursos</a>
-							</li>
-							<li>
-								<a href="/">Saiba Mais</a>
-							</li>
-							<li>
-								<a href="/">Institucionais</a>
-							</li>
-						</ul>
-					</div>
-				</div>
+				<ContainerBottom isOpen={isOpenMenu} handleClose={handleClose} />
 			</nav>
 		</header>
 	)