diff --git a/crud-place/src/App.js b/crud-place/src/App.js index f0cdb6a..736a3ba 100644 --- a/crud-place/src/App.js +++ b/crud-place/src/App.js @@ -1,21 +1,52 @@ +import { useState } from "react"; import Button from "./components/Button/Button"; import Header from "./components/Header/Header"; +import MainApplication from "./components/MainApplication/MainApplication"; +import SubHeader from "./components/SubHeader/SubHeader"; function App() { - return ( -
+ const [userLogged, setUserLogged] = useState(false) + + return ( + <> + +
+ } + /> + + { + !userLogged ? + + } + /> + : null } - /> + + + ); } diff --git a/crud-place/src/components/Button/Button.jsx b/crud-place/src/components/Button/Button.jsx index b642e73..6791a84 100644 --- a/crud-place/src/components/Button/Button.jsx +++ b/crud-place/src/components/Button/Button.jsx @@ -1,12 +1,15 @@ import React from 'react' -import styled, {css} from 'styled-components' +import styled from 'styled-components' const Button = (props) => { const LinkStyle = styled.a` height: 6vh; + max-height: 60.98px; + width: 15vw; + max-width: 193px; padding: 1vh 1vw 1vh 1vw; margin: 0px 0px 1vh 0px; diff --git a/crud-place/src/components/MainApplication/Actions/Actions.jsx b/crud-place/src/components/MainApplication/Actions/Actions.jsx new file mode 100644 index 0000000..eb10d72 --- /dev/null +++ b/crud-place/src/components/MainApplication/Actions/Actions.jsx @@ -0,0 +1,50 @@ +import React from 'react' +import Create from './Create/Create' +import styled from 'styled-components' +import Read from './Read/Read' +import Update from './Update/Update' +import Delete from './Delete/Delete' + +const Actions = (props) => { + + const action = props.action + + const GlobalActionsStyles = styled.div` + + input[type="text"] { + + } + + select { + + + } + ` + + return ( + + { + action === 'create' ? + + : null + } + { + action === 'read' ? + + : null + } + { + action === 'update' ? + + : null + } + { + action === 'Delete' ? + + : null + } + + ) +} + +export default Actions diff --git a/crud-place/src/components/MainApplication/Actions/Create/Create.jsx b/crud-place/src/components/MainApplication/Actions/Create/Create.jsx new file mode 100644 index 0000000..9b5bcd9 --- /dev/null +++ b/crud-place/src/components/MainApplication/Actions/Create/Create.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +const Create = () => { + return ( +
+ +
+ ) +} + +export default Create diff --git a/crud-place/src/components/MainApplication/Actions/Delete/Delete.jsx b/crud-place/src/components/MainApplication/Actions/Delete/Delete.jsx new file mode 100644 index 0000000..1484e35 --- /dev/null +++ b/crud-place/src/components/MainApplication/Actions/Delete/Delete.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +const Delete = () => { + return ( +
+ +
+ ) +} + +export default Delete diff --git a/crud-place/src/components/MainApplication/Actions/Read/Read.jsx b/crud-place/src/components/MainApplication/Actions/Read/Read.jsx new file mode 100644 index 0000000..b33463d --- /dev/null +++ b/crud-place/src/components/MainApplication/Actions/Read/Read.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +const Read = () => { + return ( +
+ +
+ ) +} + +export default Read diff --git a/crud-place/src/components/MainApplication/Actions/Update/Update.jsx b/crud-place/src/components/MainApplication/Actions/Update/Update.jsx new file mode 100644 index 0000000..589f5ee --- /dev/null +++ b/crud-place/src/components/MainApplication/Actions/Update/Update.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +const Update = () => { + return ( +
+ +
+ ) +} + +export default Update diff --git a/crud-place/src/components/MainApplication/MainApplication.jsx b/crud-place/src/components/MainApplication/MainApplication.jsx new file mode 100644 index 0000000..2ef7652 --- /dev/null +++ b/crud-place/src/components/MainApplication/MainApplication.jsx @@ -0,0 +1,30 @@ +import React, { useState } from 'react' +import Navbar from './Navbar/Navbar' +import styled from 'styled-components' +import Actions from './Actions/Actions' + +const MainApplication = () => { + + const [actionMainApplication, setActionMainApplication] = useState(false) + + const MainApplication = styled.div` + + display: flex; + justify-content: center; + + padding: 2vh 0px 0px 0px; + ` + + return ( + + + + + + ) +} + +export default MainApplication diff --git a/crud-place/src/components/MainApplication/Navbar/Button/Button.jsx b/crud-place/src/components/MainApplication/Navbar/Button/Button.jsx new file mode 100644 index 0000000..7e36bdd --- /dev/null +++ b/crud-place/src/components/MainApplication/Navbar/Button/Button.jsx @@ -0,0 +1,55 @@ +import React from 'react' +import styled from 'styled-components' + +const Button = (props) => { + + const Color = require('color') + const buttonColor = Color(props.color) + + const borderColor = buttonColor.saturate(0.5) + const activeColor = buttonColor.darken(0.3) + const hoverColor = buttonColor.darken(0.35) + + const Button = styled.button` + + width: 12vw; + height: 6vh; + + background-color: ${buttonColor}; + color: #242424; + + transition: 0.4s ease-in-out; + + border: none; + border: ${borderColor} 1px solid; + border-radius: 5px; + + cursor: pointer; + + &.active { + + background-color: ${activeColor}; + + transition: 0.4s ease-in-out; + } + + &:hover { + + background-color: ${hoverColor}; + + transition: 0.4s ease-in-out; + } + ` + return ( + + ) +} + +export default Button diff --git a/crud-place/src/components/MainApplication/Navbar/Navbar.jsx b/crud-place/src/components/MainApplication/Navbar/Navbar.jsx new file mode 100644 index 0000000..307a3eb --- /dev/null +++ b/crud-place/src/components/MainApplication/Navbar/Navbar.jsx @@ -0,0 +1,53 @@ +import React from 'react' +import styled from 'styled-components' +import {NavLink} from 'react-router-dom' +import Button from './Button/Button' + +const Navbar = (props) => { + + const Navbar = styled.nav` + + width: 75vw; + + display: flex; + justify-content: space-around; + + ` + return ( + +