Amandaalmeida/desafio-react-e-typescript-amanda-almeida
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(module): Adiciona css module

Browse Source
This commit is contained in:
amanda almeida 2022-12-31 14:47:38 -03:00
parent b6fa9fa949
commit 33a01ca436
9 changed files with 96 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Header.tsx
View File

@ -7,6 +7,8 @@ import Link from "./Link";
import HeaderLinks from "./HeaderLinks";
import MenuMobile from "./menuMobile";
import styles from "../styles/header.module.scss";
const Header = () => {
const [isActive, setIsActive] = useState(false);
const activeMenuMobile = () => {
@ -14,12 +16,12 @@ const Header = () => {
};
return (
<header className="page-header">
<div className="page-header__container">
<section className="page-header__container-top">
<div className="page-header__menu">
<header className={styles["page-header"]}>
<div className={styles["page-header__container"]}>
<section className={styles["page-header__container-top"]}>
<div className={styles["page-header__menu"]}>
<button
className="page-header__menu-button"
className={styles["page-header__menu-button"]}
aria-label="Menu"
onClick={activeMenuMobile}
>
@ -27,28 +29,34 @@ const Header = () => {
</button>
<MenuMobile
className={
isActive
? "page-header__menu-mobile active"
: "page-header__menu-mobile"
isActive ? styles["active"] : styles["page-header__menu-mobile"]
}
onClick={activeMenuMobile}
/>
</div>
<a className="page-header__logo" href="/">
<a className={styles["page-header__logo"]} href="/">
<img src={Logo} alt="" />
</a>
<SearchBar />
<div className="page-header__container-login">
<div className={styles["page-header__container-login"]}>
<Link link="/" text="ENTRAR" />
<a href="/" aria-label="Carrinho" className="page-header__cart">
<img src={Cart} alt="" className="page-header__cart-image" />
<a
href="/"
aria-label="Carrinho"
className={styles["page-header__cart"]}
>
<img
src={Cart}
alt=""
className={styles["page-header__cart-image"]}
/>
</a>
</div>
</section>
<section className="page-header__container-bottom-mobile">
<section className={styles["page-header__container-bottom-mobile"]}>
<SearchBar />
</section>
<section className="page-header__container-bottom">
<section className={styles["page-header__container-bottom"]}>
<HeaderLinks />
</section>
</div>

4
src/components/Link.tsx
View File

@ -1,3 +1,5 @@
import styles from "../styles/header.module.scss";
export interface LinkProps {
link: string;
text: string;
@ -5,7 +7,7 @@ export interface LinkProps {
const Link = (props: LinkProps) => {
return (
<a href={props.link} className="link">
<a href={props.link} className={styles["link"]}>
{props.text}
</a>
);

12
src/components/SearchBar.tsx
View File

@ -1,14 +1,20 @@
import iconBusca from "../assets/img/IconBusca.png";
import styles from "../styles/header.module.scss";
const SearchBar = () => {
return (
<div className="page-header__busca">
<div className={styles["page-header__busca"]}>
<input
className="page-header__busca-input"
className={styles["page-header__busca-input"]}
type="text"
placeholder="Buscar..."
/>
<img src={iconBusca} alt="logo M3" className="page-header__busca-icon" />
<img
src={iconBusca}
alt="logo M3"
className={styles["page-header__busca-icon"]}
/>
</div>
);
};

10
src/components/menuMobile.tsx
View File

@ -2,6 +2,8 @@ import iconExit from "../assets/img/iconExit.png";
import Link from "./Link";
import HeaderLinks from "./HeaderLinks";
import styles from "../styles/menuMobile.module.scss";
interface MenuMobileProps {
className: string;
onClick: React.MouseEventHandler;
@ -10,11 +12,11 @@ interface MenuMobileProps {
const MenuMobile = (props: MenuMobileProps) => {
return (
<div className={props.className}>
<div className="page-header__menu-mobile--container">
<div className="page-header__menu-mobile--header">
<div className={styles["page-header__menu-mobile--container"]}>
<div className={styles["page-header__menu-mobile--header"]}>
<Link link="/" text="ENTRAR" />
<button
className="page-header__menu-mobile--button-exit"
className={styles["page-header__menu-mobile--button-exit"]}
aria-label="exit"
type="submit"
onClick={props.onClick}
@ -22,7 +24,7 @@ const MenuMobile = (props: MenuMobileProps) => {
<img src={iconExit} alt="" />
</button>
</div>
<div className="page-header__menu-mobile--links">
<div className={styles["page-header__menu-mobile--links"]}>
<HeaderLinks />
</div>
</div>

3
src/global.scss
View File

@ -1,3 +0,0 @@
@import './styles/variables.scss';
@import './styles/reset.scss';
@import './styles/header.scss';

2
src/index.tsx
View File

@ -1,5 +1,5 @@
import ReactDOM from "react-dom";
import "./global.scss";
import "./styles/global.scss";
import Home from "./pages/Home";
const App = () => {

2
src/styles/reset.scss → src/styles/global.scss
View File

@ -1,3 +1,5 @@
@import './variables.scss';
* {
padding: 0;
margin: 0;

63
src/styles/header.scss → src/styles/header.module.scss
View File

@ -1,3 +1,5 @@
@import './variables.scss';
.page-header {
display: flex;
flex-direction: column;
@ -94,57 +96,28 @@
cursor: pointer;
}
&__menu-mobile {
position: absolute;
top: 0;
left: 0;
background: rgba(69, 69, 69, 0.7);
width: 100%;
height: 100%;
z-index: 50;
display: none;
&--container {
height: 585px;
background: $white;
width: 96.5%;
}
&--header {
display: flex;
justify-content: space-between;
align-items: center;
background: $black;
padding: 31px 16px;
}
&--button-exit {
background: transparent;
border: 0;
outline: 0;
cursor: pointer;
}
&--links {
display: flex;
flex-direction: column;
align-self: start;
gap: 12px;
padding: 31px 0 0 16px;
.link {
color: #C4C4C4;
}
}
}
&__container-bottom-mobile {
padding: 0 16px 25px;
}
&__menu-mobile {
display: none;
}
.active {
position: absolute;
top: 0;
left: 0;
background: rgba($gray, 0.702);
width: 100%;
height: 100%;
z-index: 50;
display: block;
.link {
color: $gray-600;
}
}
@media screen and (min-width: 2500px) {

35
src/styles/menuMobile.module.scss Normal file
View File

@ -0,0 +1,35 @@
@import './variables.scss';
.page-header {
&__menu-mobile {
&--container {
height: 585px;
background: $white;
width: 96.5%;
}
&--header {
display: flex;
justify-content: space-between;
align-items: center;
background: $black;
padding: 31px 16px;
}
&--button-exit {
background: transparent;
border: 0;
outline: 0;
cursor: pointer;
}
&--links {
display: flex;
flex-direction: column;
align-self: start;
gap: 12px;
padding: 31px 0 0 16px;
}
}
}