bulma components

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bulma": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.css

@@ -2,37 +2,12 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.signup {
+  border: 1px solid black;
+  padding: 10px;
+  max-width: 50vw;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.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);
-  }
-}
+#cool-button {
+  margin: 10px;
+}

src/App.js

@@ -1,23 +1,27 @@
-import logo from './logo.svg';
 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 CoolButton from './Components/CoolButton.js';
+import Message from './Components/Message.js';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Navbar />
+      <FormField label="Username" type="text" placeholder="e.g. John Doe" />
+      <FormField label="Email" type="email" placeholder="e.g. johndoe@example.com" />
+      <SignUpForm />
+      <CoolButton isSuccess>Button 1</CoolButton>
+      <CoolButton isLight>Button 2</CoolButton>
+      <br></br>
+      <CoolButton isSmall isDanger isRounded>Button 1</CoolButton>
+      <CoolButton isSmall isSuccess>Button 2</CoolButton>
+      <Message isInfo title="Hello World">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "}
+        <strong>Pellentesque risus mi</strong>.
+      </Message>
     </div>
   );
 }

src/Components/CoolButton.js

@@ -0,0 +1,47 @@
+import React from "react";
+
+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",
+    };
+    let classNames = 'button';
+
+    Object.keys(bulmaClassesMap).forEach((key) => {
+        if (props[key]) {
+            classNames += ` ${bulmaClassesMap[key]}`;
+        }
+    });
+
+    return (
+
+        <button className={classNames} onClick={props.onClick} id="cool-button">{props.children}</button>
+
+    )
+}
+
+export default CoolButton;

src/Components/FormField.css

@@ -0,0 +1,7 @@
+.field {
+    width: 50%;
+}
+
+.label {
+    text-align: left;
+}

src/Components/FormField.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import "./FormField.css";
+
+function FormField(props) {
+    return (
+        <div className='field'>
+            <label className='label'>{props.label}</label>
+            <div className='control'>
+                <input className='input' type={props.type} placeholder={props.placeholder} />
+            </div>
+        </div>
+    );
+}
+
+export default FormField;

src/Components/Message.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function Message(props) {
+    return (
+        <article class="message is-info">
+            <div class="message-header">
+                <p>{props.title}</p>
+                <button class="delete" aria-label="delete"></button>
+            </div>
+            <div class="message-body">
+                {props.children}
+            </div>
+        </article>
+    )
+
+}
+
+export default Message;

src/Components/Navbar.css

@@ -0,0 +1,9 @@
+.sign-up {
+    background-color: aqua;
+    color: white;
+}
+
+.log-in {
+    background-color: steelblue;
+    color: white;
+}

src/Components/SignUpForm.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Navbar from './Navbar';
+import FormField from './FormField';
+
+function SignUpForm() {
+    return (
+        <div className='signup'>
+            <form className='form'>
+                <FormField label='Name' type='text' placeholder='e.g Alex Smith' />
+                <FormField label='Email' type='email' placeholder='e.g. alex@example.com' />
+                <FormField label='Password' type='password' placeholder='e.g. password123' />
+                <button className='button' type='submit'>Sign Up</button>
+            </form>
+        </div>
+    )
+}
+
+export default SignUpForm;