├── README.md
├── flex-app
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.jsx
│ ├── components
│ │ ├── Card.jsx
│ │ ├── Footer.jsx
│ │ ├── header
│ │ │ ├── Logo.jsx
│ │ │ └── index.jsx
│ │ └── menu-mobile
│ │ │ └── index.jsx
│ ├── index.js
│ ├── pages
│ │ ├── about
│ │ │ ├── Banner.jsx
│ │ │ ├── Text.jsx
│ │ │ ├── Title.jsx
│ │ │ └── index.jsx
│ │ └── main
│ │ │ ├── Title.jsx
│ │ │ ├── display
│ │ │ ├── background.svg
│ │ │ └── index.jsx
│ │ │ ├── form
│ │ │ ├── Quantity.jsx
│ │ │ ├── Select.jsx
│ │ │ └── index.jsx
│ │ │ └── index.jsx
│ ├── routes.jsx
│ └── styles
│ │ ├── index.css
│ │ └── tailwind.css
└── tailwind.config.js
└── fxapp.gif
/README.md:
--------------------------------------------------------------------------------
1 | # :straight_ruler: Flexbox Simulator 1.0 :triangular_ruler:
2 |
3 |
4 | Aplicação desenvolvida utilizando React e Tailwind CSS, e tem como objetivo simular as principais funcionalidades do Flexbox. Por estar na
5 | Versão 1.0, o Flexbox Simulator entrega a base desse poderoso modelo de layout da Web CSS3. A escolha de um framework CSS (Tailwind CSS) para
6 | desenvolvimento da interface da aplicação, se deu pelo desejo de me aprimorar os meus conhecimento no mesmo.
7 |
10 |
11 |
16 | React
17 | JavaScript
18 | Tailwind CSS
19 |
20 |
21 | ## Instalação: :rocket:
22 |
23 | Realize o download ou clone do repositório na sua máquina. Na pasta raíz, rode o comando `yarn` ou `npm install` para instalar as dependências do projeto.
24 |
25 | Após, rode o comando `yarn start` ou `npm start` para ver a aplicação em execução em `http://localhost:3000`. FlexApp - React
17 |
18 |
19 | You need to enable JavaScript to run this app.
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/flex-app/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ChristopherHauschild/flexbox-app-react/6cba0d0f08c64ae835d941914d5a8c3048bd8043/flex-app/public/logo192.png
--------------------------------------------------------------------------------
/flex-app/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ChristopherHauschild/flexbox-app-react/6cba0d0f08c64ae835d941914d5a8c3048bd8043/flex-app/public/logo512.png
--------------------------------------------------------------------------------
/flex-app/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/flex-app/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/flex-app/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Header from './components/header';
4 | import Routes from './routes';
5 | import Footer from './components/Footer';
6 |
7 | function App() {
8 | return (
9 |
10 |
11 |
12 |
14 |
15 |
6 | {children}
7 |
8 | )
9 | }
10 |
11 | export default Card
--------------------------------------------------------------------------------
/flex-app/src/components/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | const Footer = () => {
4 | return (
5 |
6 |
7 |
8 | Desenvolvido com
9 |
12 |
14 | )
15 | }
16 |
17 | export default Footer
18 |
19 | const styles = {
20 | icon: {
21 | color: 'red',
22 | margin: '0px 8px'
23 | }
24 | }
--------------------------------------------------------------------------------
/flex-app/src/components/header/Logo.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Logo = () => {
4 | return (
5 |
11 | )
12 | }
13 |
14 | export default Logo
--------------------------------------------------------------------------------
/flex-app/src/components/header/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Logo from "./Logo";
3 |
4 | import MenuMobile from "../menu-mobile";
5 |
6 | const Header = () => {
7 | const [isMenuOpen, setIsMenuOpen] = useState(false)
8 |
9 | const handleOpenMenu = () => {
10 | if(!isMenuOpen) {
11 | setIsMenuOpen(true)
12 | return
13 | }
14 | setIsMenuOpen(false)
15 | return
16 | }
17 |
18 | return (
19 |
20 |
21 |
22 |
23 |
36 |
37 |
38 |
40 |
45 | Menu
46 |
48 |
49 |
50 |
52 | {isMenuOpen &&
54 |
55 | );
56 | };
57 |
58 | export default Header;
59 |
--------------------------------------------------------------------------------
/flex-app/src/components/menu-mobile/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const MenuMobile = () => {
4 | return (
5 |
22 | );
23 | };
24 |
25 | export default MenuMobile;
26 |
--------------------------------------------------------------------------------
/flex-app/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import './styles/tailwind.css';
5 | import 'font-awesome/css/font-awesome.min.css';
6 |
7 | import App from './App';
8 |
9 | ReactDOM.render(
10 |
11 | ,
13 | document.getElementById('root')
14 | );
15 |
--------------------------------------------------------------------------------
/flex-app/src/pages/about/Banner.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Banner = () => {
4 | return (
5 |
9 |
10 |
12 | Flexbox Simulator
13 |
14 |
15 |
6 |
7 | {children}
8 |
9 |
6 |
7 | Sobre a aplicação
8 |
9 |
12 |
17 | A presente aplicação foi desenvolvida utilizando React e Tailwind CSS, e
18 | visa simular as principais funcionalidades do Flexbox. Por estar na
19 | Versão 1.0, o Flexbox Simulator entrega a base desse poderoso modelo de
20 | layout da Web CSS3. A escolha de um framework CSS (Tailwind CSS) para
21 | desenvolvimento da interface da aplicação, se deu pelo desejo de me
22 | aprimorar os meus conhecimento no mesmo.
25 |
26 | );
27 | };
28 |
29 | export default About;
30 |
--------------------------------------------------------------------------------
/flex-app/src/pages/main/Title.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Title = () => {
4 | return (
5 |
6 |
7 | Simule os super-poderes do Flexbox
8 | Versão 1.0
9 |
10 |
33 | {i + 1}
34 | )
35 | }
36 |
37 | return (
38 |
41 |
44 | {blocks}
45 |
46 |
12 |
16 | {label}
17 |
18 |
24 | );
25 | };
26 |
27 | export default Quantity;
28 |
--------------------------------------------------------------------------------
/flex-app/src/pages/main/form/Select.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Select = (props) => {
4 | const {
5 | cols,
6 | label,
7 | id,
8 | selectedBlock,
9 | quantity,
10 | options,
11 | onChangeDisplay,
12 | onChangeFlexDirection,
13 | onChangeFlexWrap,
14 | onChangeJustifyContent,
15 | onChangeAlignContent,
16 | onChangeAlignItems,
17 | onChangeAlignSelf,
18 | onChangeSelectedBlock
19 | } = props;
20 |
21 | const onSelectHandle = (event) => {
22 | const optionSelected = event.target.value;
23 | if (event.target.id === "display") {
24 | onChangeDisplay(optionSelected.toLowerCase());
25 | }
26 | if (event.target.id === "direction") {
27 | onChangeFlexDirection(optionSelected.toLowerCase());
28 | }
29 | if (event.target.id === "wrap") {
30 | onChangeFlexWrap(optionSelected.toLowerCase());
31 | }
32 | if (event.target.id === "justify-content") {
33 | onChangeJustifyContent(optionSelected.toLowerCase());
34 | }
35 | if (event.target.id === "align-content") {
36 | onChangeAlignContent(optionSelected.toLowerCase());
37 | }
38 | if (event.target.id === "align-items") {
39 | onChangeAlignItems(optionSelected.toLowerCase());
40 | }
41 | if (event.target.id === "align-self") {
42 | onChangeAlignSelf(optionSelected.toLowerCase());
43 | }
44 | };
45 |
46 | const handleSelectedBlock = (event) => {
47 | onChangeSelectedBlock(+event.target.value)
48 | }
49 |
50 | const setBlock = id === "align-self";
51 | const width = setBlock ? "w-3/5" : "w-full";
52 |
53 | return (
54 |
55 |
56 | {label} {setBlock && Bloco (min 0 - max {quantity}) }
57 |
58 |
63 | {options.map((option, index) => {
64 | return (
65 |
66 | {option}
67 |
68 | );
69 | })}
70 |
71 |
72 | {setBlock && (
73 |
84 | );
85 | };
86 |
87 | export default Select;
88 |
--------------------------------------------------------------------------------
/flex-app/src/pages/main/form/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 |
3 | import Select from "./Select";
4 | import Quantity from './Quantity'
5 | import Display from "../display";
6 |
7 | const Form = () => {
8 | const[quantity, setQuantity] = useState(1)
9 | const[selectedBlock, setSelectedBlock] = useState(1)
10 | const[display, setDisplay] = useState('flex')
11 | const[flexDirection, setFlexDirection] = useState('row')
12 | const[flexWrap, setFlexWrap] = useState('wrap')
13 | const[justifyContent, setJustifyContent] = useState('flex-start')
14 | const[alignContent, setAlignContent] = useState('flex-start')
15 | const[alignItems, setAlignItems] = useState('none')
16 | const[alignSelf, setAlignSelf] = useState('none')
17 |
18 | const handleQuantity = (newValue) => {
19 | setQuantity(newValue)
20 | }
21 |
22 | const handleDisplay = (newValue) => {
23 | setDisplay(newValue)
24 | }
25 |
26 | const handleFlexDirection = (newValue) => {
27 | setFlexDirection(newValue)
28 | }
29 |
30 | const handleFlexWrap = (newValue) => {
31 | setFlexWrap(newValue)
32 | }
33 |
34 | const handleJustifyContent = (newValue) => {
35 | setJustifyContent(newValue)
36 | }
37 |
38 | const handleAlignContent = (newValue) => {
39 | setAlignContent(newValue)
40 | }
41 |
42 | const handleAlignItems = (newValue) => {
43 | setAlignItems(newValue)
44 | }
45 |
46 | const handleAlignSelf = (newValue) => {
47 | setAlignSelf(newValue)
48 | }
49 |
50 | const handleSelectedBlock = (newValue) => {
51 | setSelectedBlock(newValue)
52 | }
53 |
54 | return (
55 |
56 |
118 |
119 |
132 | );
133 | };
134 |
135 | export default Form;
136 |
--------------------------------------------------------------------------------
/flex-app/src/pages/main/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Card from '../../components/Card'
4 |
5 | import Title from './Title'
6 | import Form from './form'
7 |
8 | const Main = () => {
9 | return (
10 |
11 |
14 | )
15 | }
16 |
17 | export default Main
--------------------------------------------------------------------------------
/flex-app/src/routes.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Route, BrowserRouter, Switch, Redirect } from 'react-router-dom'
3 |
4 | import Main from './pages/main/index'
5 | import About from './pages/about/index'
6 |
7 | const Routes = () => {
8 | return (
9 |
10 |
11 |
15 |
16 | )
17 | }
18 |
19 | export default Routes
--------------------------------------------------------------------------------
/flex-app/src/styles/index.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss/base";
2 |
3 | @import "tailwindcss/components";
4 |
5 | @import "tailwindcss/utilities";
6 |
--------------------------------------------------------------------------------
/flex-app/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | purge: [],
3 | theme: {
4 | extend: {},
5 | },
6 | variants: {},
7 | plugins: [],
8 | }
9 |
--------------------------------------------------------------------------------
/fxapp.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ChristopherHauschild/flexbox-app-react/6cba0d0f08c64ae835d941914d5a8c3048bd8043/fxapp.gif
--------------------------------------------------------------------------------
11 |