BernardoWaldhelm/desafio-react-e-typescript-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/challenge #1

Merged
BernardoWaldhelm merged 38 commits from feature/challenge into main 2023-01-15 15:25:18 +00:00
Conversation 0 Commits 38 Files Changed 83 +60 -54
8 changed files with 60 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0a00b8819e - Show all commits

13
src/components/Header/Header.tsx
View File

@ -1,13 +0,0 @@
import { HeaderMobile } from "./HeaderMobile/HeaderMobile"
import { HeaderDesktop } from './HeaderDesktop/HeaderDesktop'
const Header = () => {
return (
<>
<HeaderDesktop />
<HeaderMobile />
</>
)
}
export { Header }

32
src/components/Header/HeaderDesktop/HeaderDesktop.tsx
View File

@ -1,32 +0,0 @@
import logo from '../../../assets/imgs/m3-acdemy-logo.png'
import cart from '../../../assets/imgs/cart-icon-header.png'
import styles from './HeaderDesktop.module.scss'
const HeaderDesktop = () => {
return (
<header className={styles['header']}>
<div className={styles['header-top']}>
<img src={logo} alt="Logo M3" className={styles['header-top__logo']}/>
<input placeholder='Buscar...' className={styles['header-top__input']}/>
<div className={styles['header-top__log-cart']}>
<a href='/' className={styles['header-top__log']}>
ENTRAR
</a>
<a href='/' className={styles['header-top__cart']}>
<img src={cart} alt='Img do Carrinho' />
</a>
</div>
</div>
<div className={styles['header-bottom']}>
<nav className={styles['header-bottom__list']}>
<a href="/" className={styles['header-bottom__list__items-menu']}>CURSOS</a>
<a href="/" className={styles['header-bottom__list__items-menu']}>SAIBA MAIS</a>
<a href="/" className={styles['header-bottom__list__items-menu']}>INSTITUCIONAIS</a>
</nav>
</div>
</header>
)
}
export { HeaderDesktop }

13
src/components/organisms/Header/Header.tsx Normal file
View File

@ -0,0 +1,13 @@
import { HeaderMobile } from "./HeaderMobile/HeaderMobile";
import { HeaderDesktop } from "./HeaderDesktop/HeaderDesktop";
const Header = () => {
return (
<>
<HeaderDesktop />
<HeaderMobile />
</>
);
};
export { Header };

4
src/components/Header/HeaderDesktop/HeaderDesktop.module.scss → src/components/organisms/Header/HeaderDesktop/HeaderDesktop.module.scss
View File

@ -1,4 +1,4 @@
@import '../../../variaveis';
@import '../../../../variaveis';
.header {
width: 100%;
@ -39,7 +39,7 @@
width: 25%;
height: 12px;
background-image: url("../../../assets/imgs/search-icon-header.png");
background-image: url("../../../../assets/imgs/search-icon-header.png");
background-size: 18px;
background-repeat: no-repeat;
background-position: bottom 50% right 16px;

38
src/components/organisms/Header/HeaderDesktop/HeaderDesktop.tsx Normal file
View File

@ -0,0 +1,38 @@
import logo from "../../../../assets/imgs/m3-acdemy-logo.png";
import cart from "../../../../assets/imgs/cart-icon-header.png";
import styles from "./HeaderDesktop.module.scss";
const HeaderDesktop = () => {
return (
<header className={styles["header"]}>
<div className={styles["header-top"]}>
<img src={logo} alt="Logo M3" className={styles["header-top__logo"]} />
<input placeholder="Buscar..." className={styles["header-top__input"]} />
<div className={styles["header-top__log-cart"]}>
<a href="/" className={styles["header-top__log"]}>
ENTRAR
</a>
<a href="/" className={styles["header-top__cart"]}>
<img src={cart} alt="Img do Carrinho" />
</a>
</div>
</div>
<div className={styles["header-bottom"]}>
<nav className={styles["header-bottom__list"]}>
<a href="/" className={styles["header-bottom__list__items-menu"]}>
CURSOS
</a>
<a href="/" className={styles["header-bottom__list__items-menu"]}>
SAIBA MAIS
</a>
<a href="/" className={styles["header-bottom__list__items-menu"]}>
INSTITUCIONAIS
</a>
</nav>
</div>
</header>
);
};
export { HeaderDesktop };

4
src/components/Header/HeaderMobile/HeaderMobile.module.scss → src/components/organisms/Header/HeaderMobile/HeaderMobile.module.scss
View File

@ -1,4 +1,4 @@
@import '../../../variaveis';
@import '../../../../variaveis';
.header-mobile {
display: none;
@ -37,7 +37,7 @@
height: 12px;
margin-top: 25px;
background-image: url("../../../assets/imgs/search-icon-header.png");
background-image: url("../../../../assets/imgs/search-icon-header.png");
background-size: 18px;
background-repeat: no-repeat;
background-position: bottom 50% right 16px;

8
src/components/Header/HeaderMobile/HeaderMobile.tsx → src/components/organisms/Header/HeaderMobile/HeaderMobile.tsx
View File

@ -2,10 +2,10 @@ import { useEffect, useState } from "react";
import styles from "./HeaderMobile.module.scss";
import { MenuMobile } from "../../molecules/MenuMobile/MenuMobile";
import hamburger from "../../../assets/imgs/menu-hamburger-header.png";
import logo from "../../../assets/imgs/m3-acdemy-logo.png";
import cart from "../../../assets/imgs/cart-icon-header.png";
import { MenuMobile } from "../../../molecules/MenuMobile/MenuMobile";
import hamburger from "../../../../assets/imgs/menu-hamburger-header.png";
import logo from "../../../../assets/imgs/m3-acdemy-logo.png";
import cart from "../../../../assets/imgs/cart-icon-header.png";
const HeaderMobile = () => {
const [menuIsVisible, setMenuIsVisible] = useState(false);

2
src/pages/Home.tsx
View File

@ -1,6 +1,6 @@
import styles from "./Home.module.scss";
import { Header } from "../components/Header/Header";
import { Header } from "../components/organisms/Header/Header";
import { BreadCrumbs } from "../components/molecules/Breadcrumbs/Breadcrumbs";
import { Main } from "../components/Main/Main";
import { ButtonsFixeds } from "../components/Atoms/ButtonsFixed/ButtonsFixed";