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

refactor: começando a componentizar e adicionando structure de AtomicDesign

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-12 14:28:30 -03:00
parent 8cfdea00b6
commit 712be8609c
9 changed files with 57 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ButtonsFixed/ButtonsFixed.module.scss → src/components/Atoms/ButtonsFixed/ButtonsFixed.module.scss
View File

@ -1,4 +1,4 @@
@import '../../variaveis';
@import '../../../variaveis';
.buttons-fixeds {
position: fixed;
@ -31,7 +31,7 @@
border: none;
border-radius: 100%;
background: transparent;
background-image: url('../../assets/imgs/logo-top.png');
background-image: url('../../../assets/imgs/logo-top.png');
background-repeat: no-repeat;
background-size: 66px 66px;
width: 66px;

22
src/components/ButtonsFixed/ButtonsFixed.tsx → src/components/Atoms/ButtonsFixed/ButtonsFixed.tsx
View File

@ -1,31 +1,29 @@
import styles from "./ButtonsFixed.module.scss";
import styles from "./ButtonsFixed.module.scss"
import wpp from '../../assets/imgs/logo-whatsapp.png'
import wpp from "../../../assets/imgs/logo-whatsapp.png";
const ButtonsFixeds = () => {
const scrollTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
})
}
behavior: "smooth",
});
};
return (
<section className={styles["buttons-fixeds"]}>
<ul className={styles["buttons-fixeds__list"]}>
<li className={styles["buttons-fixeds__list__item"]}>
<a href="http://wa.me/5522999644229" target='_blank' rel="noopener noreferrer">
<a href="http://wa.me/5522999644229" target="_blank" rel="noopener noreferrer">
<img src={wpp} alt="Logo Whatsapp" />
</a>
</li>
<li className={styles["buttons-fixeds__list__item"]} >
<li className={styles["buttons-fixeds__list__item"]}>
<button onClick={scrollTop}></button>
</li>
</ul>
</section>
)
}
);
};
export {ButtonsFixeds}
export { ButtonsFixeds };

28
src/components/Breadcrumbs/Breadcrumbs.tsx
View File

@ -1,28 +0,0 @@
import styles from './Breadcrumbs.module.scss'
import home from '../../assets/imgs/icon-home.png'
import seta from '../../assets/imgs/arrow-point-to-right.png'
const BreadCrumbs = () => {
return (
<section className={styles['breadcrumbs']}>
<ul className={styles['breadcrumbs__list']}>
<li className={styles['breadcrumbs__list__item']}>
<a className={styles['breadcrumbs__list__item__home']} href="/" rel='noreferrer' >
<img src={home} alt="Logo Home" />
</a>
</li>
<li className={styles['breadcrumbs__list__seta']}>
<img src={seta} alt="Logo Home" />
</li>
<li className={styles['breadcrumbs__list__link']}>
<a href="/" rel='noreferrer' >
Institucional
</a>
</li>
</ul>
</section>
)
}
export { BreadCrumbs }

2
src/components/Header/HeaderMobile/HeaderMobile.tsx
View File

@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import styles from "./HeaderMobile.module.scss";
import { MenuMobile } from "../../MenuMobile/MenuMobile";
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";

2
src/components/Breadcrumbs/Breadcrumbs.module.scss → src/components/molecules/Breadcrumbs/Breadcrumbs.module.scss
View File

@ -1,4 +1,4 @@
@import '../../variaveis';
@import '../../../variaveis';
.breadcrumbs {
padding: 29px 100px;

32
src/components/molecules/Breadcrumbs/Breadcrumbs.tsx Normal file
View File

@ -0,0 +1,32 @@
import styles from "./Breadcrumbs.module.scss";
import home from "../../../assets/imgs/icon-home.png";
import seta from "../../../assets/imgs/arrow-point-to-right.png";
const BreadCrumbs = () => {
return (
<section className={styles["breadcrumbs"]}>
<ul className={styles["breadcrumbs__list"]}>
<li className={styles["breadcrumbs__list__item"]}>
<a
className={styles["breadcrumbs__list__item__home"]}
href="/"
rel="noreferrer"
>
<img src={home} alt="Logo Home" />
</a>
</li>
<li className={styles["breadcrumbs__list__seta"]}>
<img src={seta} alt="Logo Home" />
</li>
<li className={styles["breadcrumbs__list__link"]}>
<a href="/" rel="noreferrer">
Institucional
</a>
</li>
</ul>
</section>
);
};
export { BreadCrumbs };

2
src/components/MenuMobile/MenuMobile.scss → src/components/molecules/MenuMobile/MenuMobile.scss
View File

@ -1,4 +1,4 @@
@import '../../variaveis.scss';
@import '../../../variaveis.scss';
.container-menu {
position: absolute;

2
src/components/MenuMobile/MenuMobile.tsx → src/components/molecules/MenuMobile/MenuMobile.tsx
View File

@ -1,6 +1,6 @@
import "./MenuMobile.scss";
import close from "../../assets/imgs/close-menu-mobile.png";
import close from "../../../assets/imgs/close-menu-mobile.png";
import { useEffect } from "react";
interface MenuMobileProps {

19
src/pages/Home.tsx
View File

@ -1,22 +1,21 @@
import styles from './Home.module.scss'
import { Header } from '../components/Header/Header';
import { BreadCrumbs } from '../components/Breadcrumbs/Breadcrumbs';
import { Main } from '../components/Main/Main';
import { ButtonsFixeds } from '../components/ButtonsFixed/ButtonsFixed';
import { Footer } from '../components/Footer/Footer';
import styles from "./Home.module.scss";
import { Header } from "../components/Header/Header";
import { BreadCrumbs } from "../components/molecules/Breadcrumbs/Breadcrumbs";
import { Main } from "../components/Main/Main";
import { ButtonsFixeds } from "../components/Atoms/ButtonsFixed/ButtonsFixed";
import { Footer } from "../components/Footer/Footer";
function Home() {
return (
<div className={styles['home']}>
<div className={styles["home"]}>
<Header />
<BreadCrumbs />
<Main/>
<Main />
<ButtonsFixeds />
<Footer />
</div>
);
}
export {Home};
export { Home };