franpcode/API-and-CRUD-for-Ecommerce-with-Node.js-FRONTEND
1
0
Fork 0
mirror of https://github.com/FranP-code/API-and-CRUD-for-Ecommerce-with-Node.js-FRONTEND.git synced 2025-10-12 23:52:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

CRUD Place Navbar main application

Browse Source
This commit is contained in:
Francisco Pessano
2021-11-19 22:45:35 -03:00
parent ddaee48f5d
commit 2468ba9df2
13 changed files with 420 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
crud-place/src/App.js
View File

@@ -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/>
</>
);
}

5
crud-place/src/components/Button/Button.jsx
View File

@@ -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;

50
crud-place/src/components/MainApplication/Actions/Actions.jsx Normal file
View File

@@ -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

11
crud-place/src/components/MainApplication/Actions/Create/Create.jsx Normal file
View File

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

11
crud-place/src/components/MainApplication/Actions/Delete/Delete.jsx Normal file
View File

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

11
crud-place/src/components/MainApplication/Actions/Read/Read.jsx Normal file
View File

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

11
crud-place/src/components/MainApplication/Actions/Update/Update.jsx Normal file
View File

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

30
crud-place/src/components/MainApplication/MainApplication.jsx Normal file
View File

@@ -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

55
crud-place/src/components/MainApplication/Navbar/Button/Button.jsx Normal file
View File

@@ -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

53
crud-place/src/components/MainApplication/Navbar/Navbar.jsx Normal file
View File

@@ -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

48
crud-place/src/components/SubHeader/SubHeader.jsx Normal file
View File

@@ -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

92
package-lock.json generated
View File

@@ -5,6 +5,7 @@
"packages": {
"": {
"dependencies": {
"color": "^4.0.1",
"http-server": "^14.0.0"
}
},
@@ -39,6 +40,40 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/color": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/color/-/color-4.0.1.tgz",
"integrity": "sha512-rpZjOKN5O7naJxkH2Rx1sZzzBgaiWECc6BYXjeCE6kF0kcASJYbUq02u7JqIHwCb/j3NhV+QhRL2683aICeGZA==",
"dependencies": {
"color-convert": "^2.0.1",
"color-string": "^1.6.0"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"node_modules/color-string": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
"integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
"dependencies": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
}
},
"node_modules/colors": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
@@ -196,6 +231,11 @@
"node": ">=0.10.0"
}
},
"node_modules/is-arrayish": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -309,6 +349,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
"dependencies": {
"is-arrayish": "^0.3.1"
}
},
"node_modules/union": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
@@ -363,6 +411,37 @@
"get-intrinsic": "^1.0.2"
}
},
"color": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/color/-/color-4.0.1.tgz",
"integrity": "sha512-rpZjOKN5O7naJxkH2Rx1sZzzBgaiWECc6BYXjeCE6kF0kcASJYbUq02u7JqIHwCb/j3NhV+QhRL2683aICeGZA==",
"requires": {
"color-convert": "^2.0.1",
"color-string": "^1.6.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"color-string": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
"integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
"requires": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
}
},
"colors": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
@@ -470,6 +549,11 @@
"safer-buffer": ">= 2.1.2 < 3.0.0"
}
},
"is-arrayish": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
},
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -556,6 +640,14 @@
"object-inspect": "^1.9.0"
}
},
"simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
"requires": {
"is-arrayish": "^0.3.1"
}
},
"union": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",

1
package.json
View File

@@ -1,5 +1,6 @@
{
"dependencies": {
"color": "^4.0.1",
"http-server": "^14.0.0"
}
}