refactor(header): created more split components

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>
 	)