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 0000000..c7465da Binary files /dev/null and b/src/images/bulma-logo.png differ diff --git a/src/index.js b/src/index.js index d563c0f..d3c467e 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; -import reportWebVitals from './reportWebVitals'; + const root = ReactDOM.createRoot(document.getElementById('root')); root.render( @@ -11,7 +11,3 @@ root.render( ); -// 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';