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 Button and Header components done

Browse Source
This commit is contained in:
Francisco Pessano
2021-11-19 20:02:48 -03:00
parent bf4b020ba9
commit 9d6485b6d6
6 changed files with 72 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
crud-place/public/index.html
View File

@@ -9,7 +9,9 @@
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +26,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>CRUD Place</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

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

@@ -1,3 +1,4 @@
import Button from "./components/Button/Button";
import Header from "./components/Header/Header"; import Header from "./components/Header/Header";
function App() { function App() {
@@ -5,6 +6,15 @@ function App() {
<Header <Header
color={'rgb(123, 169, 255)'} color={'rgb(123, 169, 255)'}
text={'CRUD Place'} text={'CRUD Place'}
additionalChildren={
<Button
text={'Back to Store'}
link={'http://www.google.com'}
color={'#fff'}
hoverColor={'#ccc'}
/>
}
/> />
); );
} }

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

@@ -1,16 +1,47 @@
import React from 'react' import React from 'react'
import styled, {css} from 'styled-components'
const Button = ({text, action}, props) => { const Button = (props) => {
const LinkStyle = styled.a`
height: 6vh;
width: 15vw;
padding: 1vh 1vw 1vh 1vw;
margin: 0px 0px 1vh 0px;
border: none;
border-radius: 5px;
background-color: ${props.color};
transition: 0.4s ease-in-out;
color: #000;
font-weight: bold;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
&:hover {
transition: 0.4s ease-in-out;
background-color: ${props.hoverColor};
}
`
console.log(action);
return ( return (
<button <>
onClick={ {
() => window.location = '../' props.link ?
<LinkStyle href={props.link}>
{props.text}
</LinkStyle>
: null
} }
> </>
{text}
</button>
) )
} }

11
crud-place/src/components/Header/Header.jsx
View File

@@ -12,6 +12,17 @@ const Header = (props) => {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column;
color: #fff;
user-select: none;
h1 {
margin: 2vh 0px 1vh 0px;
}
` `
return ( return (

7
crud-place/src/globalStyles.css Normal file
View File

@@ -0,0 +1,7 @@
body {
margin: 0;
padding: 0;
font-family: Roboto, helveltica;
}

1
crud-place/src/index.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import App from './App'; import App from './App';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import styles from './globalStyles.css'
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>