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"
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
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.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>CRUD Place</title>
</head>
<body>
<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";
function App() {
@@ -5,6 +6,15 @@ function App() {
<Header
color={'rgb(123, 169, 255)'}
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 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 (
<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;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
user-select: none;
h1 {
margin: 2vh 0px 1vh 0px;
}
`
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 App from './App';
import reportWebVitals from './reportWebVitals';
import styles from './globalStyles.css'
ReactDOM.render(
<React.StrictMode>