siyaM-Internship

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

src/App.js

@@ -1,23 +1,13 @@
-import logo from './logo.svg';
-import './App.css';
+// src/App.js
+import "./App.css";
+import "bulma/css/bulma.css";
+
+import SignupForm from "./components/SignupForm";
 
 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>
+      <SignupForm />
     </div>
   );
 }

src/components/CoolButton.js

@@ -0,0 +1,45 @@
+// src/components/CoolButton.js
+import React from "react";
+
+const bulmaClasses = {
+  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",
+};
+
+function CoolButton(props) {
+  let classNames = "button";
+
+  Object.keys(props).forEach((key) => {
+    if (bulmaClasses[key]) {
+      classNames += " " + bulmaClasses[key];
+    }
+  });
+
+  return <button className={classNames}>{props.children}</button>;
+}
+
+export default CoolButton;

src/components/FormField.css

@@ -0,0 +1 @@
+/* Optional custom styles */

src/components/FormField.js

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

src/components/Message.js

@@ -0,0 +1,29 @@
+import React from "react";
+
+const bulmaMessageClasses = {
+  isInfo: "is-info",
+  isSuccess: "is-success",
+  isWarning: "is-warning",
+  isDanger: "is-danger",
+};
+
+function Message({ title, children, ...props }) {
+  let classNames = "message";
+
+  Object.keys(props).forEach((key) => {
+    if (bulmaMessageClasses[key]) {
+      classNames += ` ${bulmaMessageClasses[key]}`;
+    }
+  });
+
+  return (
+    <article className={classNames}>
+      <div className="message-header">
+        <p>{title}</p>
+      </div>
+      <div className="message-body">{children}</div>
+    </article>
+  );
+}
+
+export default Message;

src/components/Navbar.css

@@ -0,0 +1 @@
+/* Keep empty or add custom styles */

src/components/Navbar.js

@@ -0,0 +1,32 @@
+// src/components/Navbar.js
+import React from "react";
+import CoolButton from "./CoolButton";
+import "./Navbar.css";
+
+function Navbar() {
+  return (
+    <nav className="navbar is-transparent">
+      <div className="navbar-brand">
+        <a className="navbar-item" href="/">
+          <strong>Home</strong>
+        </a>
+      </div>
+
+      <div className="navbar-menu">
+        <div className="navbar-end">
+          <div className="navbar-item">
+            <CoolButton isPrimary className="mr-2">
+              Login
+            </CoolButton>
+
+            <CoolButton isSuccess>
+              Signup
+            </CoolButton>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Navbar;

src/components/SignupForm.js

@@ -0,0 +1,23 @@
+import Navbar from "./Navbar";
+import FormField from "./FormField";
+import CoolButton from "./CoolButton";
+
+function SignupForm() {
+  return (
+    <div>
+      <Navbar />
+
+      <form className="container mt-5">
+        <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="********" />
+
+        <CoolButton isPrimary isRounded>
+          Submit
+        </CoolButton>
+      </form>
+    </div>
+  );
+}
+
+export default SignupForm;