done

package.json

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

src/App.js

@@ -1,14 +1,28 @@
+import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Navbar from './components/Navbar';
+import FormField from './components/FormField';
+import CoolButton from './components/CoolButton';
+import Message from './components/Message';
+
 
 function App() {
   return (
     <div className="App">
+      <Navbar />
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>
+        <FormField label="Name" type="text" placeholder="e.g. Alex Smith" />
+        <FormField label="Email" type="email" placeholder="e.g. [email protected]" />
+        <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>
         <a
           className="App-link"
           href="https://reactjs.org"

src/components/CoolButton.js

@@ -0,0 +1,19 @@
+// src/components/CoolButton.js
+
+import React from 'react';
+import classNames from 'classnames';
+
+function CoolButton({ children, isPrimary, isSuccess, isDanger, isLight, isRounded, isSmall }) {
+  const classes = classNames('button', {
+    'is-primary': isPrimary,
+    'is-success': isSuccess,
+    'is-danger': isDanger,
+    'is-light': isLight,
+    'is-rounded': isRounded,
+    'is-small': isSmall,
+  });
+
+  return <button className={classes}>{children}</button>;
+}
+
+export default CoolButton;

src/components/FormField.js

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

src/components/Message.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+function Message({ isInfo, title, children }) {
+  const className = isInfo ? 'message is-info' : 'message';
+
+  return (
+    <article className={className}>
+      <div className="message-header">
+        <p>{title}</p>
+        <button className="delete" aria-label="delete"></button>
+      </div>
+      <div className="message-body">
+        {children}
+      </div>
+    </article>
+  );
+}
+
+export default Message;

src/components/Navbar.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import CoolButton from './CoolButton';
+
+function Navbar() {
+  return (
+    <nav className="navbar is-transparent">
+      <div className="navbar-brand">
+        <a className="navbar-item" href="/">
+          <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28" />
+        </a>
+      </div>
+
+      <div id="navbarExampleTransparentExample" className="navbar-menu">
+        <div className="navbar-start">
+          <a className="navbar-item" href="/">
+            Home
+          </a>
+        </div>
+        <div className="navbar-end">
+          <div className="navbar-item">
+            <div className="buttons">
+              <CoolButton isPrimary>Login</CoolButton>
+              <CoolButton isLight>Signup</CoolButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Navbar;