done

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.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.css

@@ -35,4 +35,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}

src/App.js

@@ -1,4 +1,9 @@
 import logo from './logo.svg';
+import "bulma/css/bulma.css"
+import Message from './components/Message';
+
+import SignupForm from './components/SignupForm';
+
 import './App.css';
 
 function App() {
@@ -18,8 +23,11 @@ function App() {
           Learn React
         </a>
       </header>
+     <SignupForm/>
+     <Message isInfo title="New Message">Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "}
+	    <strong>Pellentesque risus mi</strong>.</Message>
+
     </div>
   );
 }
-
-export default App;
+export default App;

src/components/CoolButton.js

@@ -0,0 +1,46 @@
+import React from "react";
+
+const CoolButton = (props) => {
+  const bulmaClassMap = {
+    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",
+  };
+
+  // Filter out props that are not in the map and concatenate the corresponding Bulma classes
+  const className = Object.keys(props)
+    .filter((propName) => bulmaClassMap[propName])
+    .map((propName) => bulmaClassMap[propName])
+    .join(" ");
+
+  return (
+    <>
+      <button className={`button ${className}`}>{props.children}</button>
+    </>
+  );
+};
+
+export default CoolButton;

src/components/FormField.js

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

src/components/Message.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Message = (props) => {
+    const className=`message ${props.isInfo?"is-info":""}`;
+  return (
+    <>
+      <article class={className}>
+        <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.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import CoolButton from './CoolButton'
+
+const Navbar = () => {
+  return (
+    <div>
+        <nav class="navbar is-transparent">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="https://bulma.io">
+      <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28"/>
+    </a>
+    <div class="navbar-burger" data-target="navbarExampleTransparentExample">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+
+  <div id="navbarExampleTransparentExample" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item" href="https://bulma.io/">
+        Home
+      </a>
+
+
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="field is-grouped">
+          <p class="control">
+            <a class="bd-tw-button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
+
+             <CoolButton>Login</CoolButton>
+            </a>
+          </p>
+          <p class="control">
+            <CoolButton isSuccess>Sign Up</CoolButton>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>
+    </div>
+  )
+}
+
+export default Navbar

src/components/SignupForm.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import Navbar from './Navbar';
+import FormField from './FormField';
+const SignupForm = () => {
+  return (
+    <>
+    <Navbar/>
+    <FormField  label="Name"  type="text"  placeholder="e.g Alex Smith"  />
+    <FormField  label="Email"  type="email"  placeholder="e.g. alexsmith@gmail.com"  />
+    <FormField  label="Password"  type="password"  placeholder="Your Password"  />
+    <button className='button'>Submit</button>
+    </>
+  )
+}
+
+export default SignupForm