From 7e877b1342aaeb513b7144e637e5994b863af4a0 Mon Sep 17 00:00:00 2001 From: trinigelos Date: Mon, 2 Sep 2024 14:34:09 +0200 Subject: [PATCH] React with Bulma starter page --- src/App.css | 50 +++++++++-------------------------- src/App.js | 46 ++++++++++++++++++++------------ src/App.test.js | 8 ------ src/components/CoolButton.js | 48 +++++++++++++++++++++++++++++++++ src/components/FormField.css | 21 +++++++++++++++ src/components/FormField.js | 15 +++++++++++ src/components/Navbar.css | 24 +++++++++++++++++ src/components/Navbar.js | 19 +++++++++++++ src/components/SignupForm.js | 17 ++++++++++++ src/images/bulma-logo.png | Bin 0 -> 4083 bytes src/index.js | 6 +---- src/logo.svg | 1 - src/reportWebVitals.js | 13 --------- src/setupTests.js | 5 ---- 14 files changed, 187 insertions(+), 86 deletions(-) delete mode 100644 src/App.test.js create mode 100644 src/components/CoolButton.js create mode 100644 src/components/FormField.css create mode 100644 src/components/FormField.js create mode 100644 src/components/Navbar.css create mode 100644 src/components/Navbar.js create mode 100644 src/components/SignupForm.js create mode 100644 src/images/bulma-logo.png delete mode 100644 src/logo.svg delete mode 100644 src/reportWebVitals.js delete mode 100644 src/setupTests.js diff --git a/src/App.css b/src/App.css index 74b5e05..c393abe 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,14 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; +.App{ + height: 100vh; +} + +.form-container { + display: flex; + flex-direction: column; + padding: 2rem; + width: 30rem; + margin: 5rem auto; + border: 1px solid #ccc; + border-radius: 8px; + background-color: #f9f9f9; } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js index 3784575..d04fca9 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,36 @@ -import logo from './logo.svg'; -import './App.css'; +import "./App.css"; +import "bulma/css/bulma.css"; +import Navbar from "./components/Navbar.js"; +import FormField from "./components/FormField.js"; +import SignupForm from "./components/SignupForm.js"; +import { useState } from "react"; + function App() { + const [showSignUp, setShowSignUp] = useState(false); + const [showLogin, setShowLogin] = useState(true); + + + const handleSignUpClick = () => { + setShowSignUp(!showSignUp); + setShowLogin(false); + }; + + const handleLoginClick = () => { + setShowLogin(true); + setShowSignUp(false); + }; return ( +
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ + {showSignUp && } + {showLogin && ( +
+ + +
)} + ); } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/components/CoolButton.js b/src/components/CoolButton.js new file mode 100644 index 0000000..1e536a9 --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,48 @@ +import React from 'react'; + +export default function CoolButton(props) { + const bulmaClassesMap = { + isCentered: 'is-centered', + isActive: 'is-active', + isBlack: 'is-black', + isDanger: 'is-danger', + isDark: 'is-dark', + isFocused: 'is-focused', + isGrouped: 'is-grouped', + isHovered: 'is-hovered', + isInfo: 'is-info', + isInverted: 'is-inverted', + isLarge: 'is-large', + isLight: 'is-light', + isLink: 'is-link', + isLoading: 'is-loading', + isMedium: 'is-medium', + isOutlined: 'is-outlined', + isPrimary: 'is-primary', + isRight: 'is-right', + isRounded: 'is-rounded', + isSelected: 'is-selected', + isSmall: 'is-small', + isStatic: 'is-static', + isSuccess: 'is-success', + isText: 'is-text', + isWarning: 'is-warning', + isWhite: 'is-white' + }; + + // Start with the base "button" class + let classNames = 'button'; + + // Iterate over the props to add corresponding Bulma classes + Object.keys(bulmaClassesMap).forEach((key) => { + if (props[key]) { + classNames += ` ${bulmaClassesMap[key]}`; + } + }); + + return ( + + ); +} diff --git a/src/components/FormField.css b/src/components/FormField.css new file mode 100644 index 0000000..de2b9bf --- /dev/null +++ b/src/components/FormField.css @@ -0,0 +1,21 @@ +.field { + margin-bottom: 1rem; + } + + .label { + font-weight: bold; + margin-bottom: 0.5rem; + } + + .control { + display: flex; + align-items: center; + } + + .input { + padding: 0.5rem; + font-size: 1rem; + border: 1px solid #ccc; + border-radius: 4px; + } + \ No newline at end of file diff --git a/src/components/FormField.js b/src/components/FormField.js new file mode 100644 index 0000000..a403b47 --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,15 @@ +import React from 'react'; +import './FormField.css'; + +const FormField = ({ label, type, placeholder }) => { + return ( +
+ +
+ +
+
+ ); +}; + +export default FormField; diff --git a/src/components/Navbar.css b/src/components/Navbar.css new file mode 100644 index 0000000..554459e --- /dev/null +++ b/src/components/Navbar.css @@ -0,0 +1,24 @@ +.Navbar{ + height: 3rem; + background-color: rgb(255, 255, 255); + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: solid 2px rgb(99, 99, 99); +} + +.navbarsides{ + display: flex; + gap: 20px; + padding: 0 20px; + align-items: center; +} + +.bulmaLogo{ + width: 9rem; +} + +.right-navbar>button{ +padding: 7px 10px; +border-radius: 5px; +} \ No newline at end of file diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..fa2825a --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,19 @@ +import "./Navbar.css" +import React from 'react' +import BulmaLogo from "../images/bulma-logo.png" +import CoolButton from "./CoolButton" + +export default function Navbar({ onSignUpClick, onLoginClick }) { + return ( +
+
+
bulma-logo
+
Home
+
+
+ Login + Signup +
+
+ ) +} diff --git a/src/components/SignupForm.js b/src/components/SignupForm.js new file mode 100644 index 0000000..78fc900 --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,17 @@ +import React from 'react' +import FormField from './FormField' +import Navbar from './Navbar' +import CoolButton from './CoolButton' + +export default function SignupForm() { + return ( +
+
+ + + + Submit + +
+ ) +} diff --git a/src/images/bulma-logo.png b/src/images/bulma-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..c7465dae9b31170f0f4b3a4b8d4ed2501f7c07a9 GIT binary patch literal 4083 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 ); -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom';