CRUD Place Navbar main application

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 (
-    <Header
-      color={'rgb(123, 169, 255)'}
-      text={'CRUD Place'}
-      additionalChildren={
-        <Button
-          text={'Back to Store'}
-          link={'http://www.google.com'}
 
-          color={'#fff'}
-          hoverColor={'#ccc'}
-        />
+  const [userLogged, setUserLogged] = useState(false)
+
+  return (
+    <>
+
+      <Header
+        color={'rgb(123, 169, 255)'}
+        text={'CRUD Place'}
+
+        additionalChildren={
+          <Button
+            text={'Back to Store'}
+            link={'http://www.google.com'}
+
+            color={'#fff'}
+            hoverColor={'#ccc'}
+          />
+        }
+      />
+
+      {
+        !userLogged ?
+          <SubHeader
+
+            color={'#D17262'}
+            text={'Login to modify the DB'}
+
+            additionalChildren={
+              <Button
+                text={'Login'}
+                link={'./login'}
+                color={'#fff'}
+                hoverColor={'#ccc'}
+              />
+            }
+          />
+        : null
       }
-    />
+
+      <MainApplication/>
+    </>
   );
 }
 

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;

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 (
+        <GlobalActionsStyles>
+            {
+                action === 'create' ?
+                    <Create />
+                : null
+            }
+            {
+                action === 'read' ?
+                    <Read />
+                : null
+            }
+            {
+                action === 'update' ?
+                    <Update />
+                : null
+            }
+            {
+                action === 'Delete' ?
+                    <Delete />
+                : null
+            }
+        </GlobalActionsStyles>
+    )
+}
+
+export default Actions

crud-place/src/components/MainApplication/Actions/Create/Create.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Create = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default Create

crud-place/src/components/MainApplication/Actions/Delete/Delete.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Delete = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default Delete

crud-place/src/components/MainApplication/Actions/Read/Read.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Read = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default Read

crud-place/src/components/MainApplication/Actions/Update/Update.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Update = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default Update

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 (
+        
+        <MainApplication>
+            <Navbar
+                action={actionMainApplication}
+                setAction={setActionMainApplication}
+            />
+            <Actions action={actionMainApplication}/>
+        </MainApplication>
+    )
+}
+
+export default MainApplication

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 (
+        <Button
+            className={props.action === props.text.toLowerCase() ? 'active' : null}
+
+            onClick={() => {
+                props.setAction( props.text.toLowerCase() )
+        }}>
+            {props.text.toUpperCase()}
+        </Button>
+    )
+}
+
+export default Button

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 (
+        <Navbar>
+            <Button
+                action={props.action}
+                setAction={props.setAction}
+
+                color={'rgb(200, 92, 92)'}
+                text={'Create'}
+            />
+            
+            <Button
+                action={props.action}
+                setAction={props.setAction}
+
+                color={'rgb(249, 151, 93)'}
+                text={'read'}
+            />
+
+            <Button
+                action={props.action}
+                setAction={props.setAction}
+
+                color={'rgb(251, 209, 72)'}
+                text={'update'}
+            />
+
+            <Button
+                action={props.action}
+                setAction={props.setAction}
+
+                color={'rgb(178, 234, 112)'}
+                text={'DeLeTe'}
+            />
+        </Navbar>
+    )
+}
+
+export default Navbar

crud-place/src/components/SubHeader/SubHeader.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const SubHeader = (props) => {
+
+    const Header = styled.header`
+
+        background-color: ${props.color};
+        
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        flex-direction: initial;
+
+        color: #fff;
+
+        user-select: none;
+
+        padding: 2vh 3vw 2vh 3vw;
+
+        a, button {
+
+            background: none;
+            color: #fff;
+
+            border: #fff solid 2px;
+            border-radius: 10px;
+
+            margin: 0px;
+
+            &:hover {
+
+                background-color: #0005;
+            }
+        }
+        
+    `
+
+    return (
+        <Header>
+            <h2>{props.text}</h2>
+            {props.additionalChildren ? props.additionalChildren : null}
+        </Header>
+    )
+}
+
+export default SubHeader