From 7247fdfded78c0d62f5120855cd8f7b231f35e71 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Sat, 29 Nov 2025 16:13:53 +0000 Subject: [PATCH 1/8] complete App.js --- src/App.js | 39 +++++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/src/App.js b/src/App.js index 3784575..b5f4fa2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,30 @@ -import logo from './logo.svg'; -import './App.css'; +// src/App.js +import "./App.css"; +import "bulma/css/bulma.css"; + +import Navbar from "./components/Navbar"; +import FormField from "./components/FormField"; +import SignupForm from "./components/SignupForm"; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+ + + + {/* Example form fields used directly */} +
+ + +
); } From 0423fb980c45265aa9ab08e7d787edbd75217970 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Sat, 29 Nov 2025 16:16:11 +0000 Subject: [PATCH 2/8] complete Navbar.js --- src/components/Navbar.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/components/Navbar.js diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..9474329 --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,29 @@ +// src/components/Navbar.js +import React from "react"; +import CoolButton from "./CoolButton"; +import "./Navbar.css"; + +function Navbar() { + return ( + + ); +} + +export default Navbar; From df8a3a50f93cf3efe42f843a991cb110f3726afc Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Sat, 29 Nov 2025 16:18:14 +0000 Subject: [PATCH 3/8] complete FormField.js --- src/components/FormField.js | 16 ++++++++++++++++ src/components/Navbar.css | 1 + 2 files changed, 17 insertions(+) create mode 100644 src/components/FormField.js create mode 100644 src/components/Navbar.css diff --git a/src/components/FormField.js b/src/components/FormField.js new file mode 100644 index 0000000..89f9ea1 --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,16 @@ +// src/components/FormField.js +import React from "react"; +import "./FormField.css"; + +function 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..08fac0a --- /dev/null +++ b/src/components/Navbar.css @@ -0,0 +1 @@ +/* Keep empty or add custom styles */ From a01b259f8f95070bb996118528393920bc788ee6 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Sat, 29 Nov 2025 16:19:42 +0000 Subject: [PATCH 4/8] complete CoolButton.js --- src/components/CoolButton.js | 45 ++++++++++++++++++++++++++++++++++++ src/components/FormField.css | 1 + 2 files changed, 46 insertions(+) create mode 100644 src/components/CoolButton.js create mode 100644 src/components/FormField.css diff --git a/src/components/CoolButton.js b/src/components/CoolButton.js new file mode 100644 index 0000000..2f2b5f0 --- /dev/null +++ b/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 ; +} + +export default CoolButton; diff --git a/src/components/FormField.css b/src/components/FormField.css new file mode 100644 index 0000000..7f191dd --- /dev/null +++ b/src/components/FormField.css @@ -0,0 +1 @@ +/* Optional custom styles */ From c6440a7d1c9feb30069f0b63595992162c643d72 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Sat, 29 Nov 2025 16:20:54 +0000 Subject: [PATCH 5/8] complete SignupForm.js --- src/components/SignupForm.js | 41 ++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/components/SignupForm.js diff --git a/src/components/SignupForm.js b/src/components/SignupForm.js new file mode 100644 index 0000000..e54261a --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,41 @@ +// src/components/SignupForm.js +import React from "react"; +import Navbar from "./Navbar"; +import FormField from "./FormField"; +import CoolButton from "./CoolButton"; + +function SignupForm() { + return ( +
+ + +
+
+ + + + + + + + Submit + + +
+
+ ); +} + +export default SignupForm; From ba2a3ac0f76118144b3392d8c9e849487dd1f61b Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Sat, 29 Nov 2025 16:21:48 +0000 Subject: [PATCH 6/8] complete Message.js --- src/components/Message.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/components/Message.js diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..d96bf84 --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,21 @@ +// src/components/Message.js +import React from "react"; + +function Message({ title, children, ...props }) { + let classNames = "message"; + + Object.keys(props).forEach((key) => { + if (key.startsWith("is")) classNames += ` ${key}`; + }); + + return ( +
+
+

{title}

+
+
{children}
+
+ ); +} + +export default Message; From 1bdc49f607c9ec18436f37481174b2e714e69950 Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Sat, 29 Nov 2025 16:27:12 +0000 Subject: [PATCH 7/8] run 'npm install bulma' --- package-lock.json | 11 +++++++++++ package.json | 1 + 2 files changed, 12 insertions(+) diff --git a/package-lock.json b/package-lock.json index 0c8890d..34c9513 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,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", @@ -5433,6 +5434,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bulma": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.4.tgz", + "integrity": "sha512-Ffb6YGXDiZYX3cqvSbHWqQ8+LkX6tVoTcZuVB3lm93sbAVXlO0D6QlOTMnV6g18gILpAXqkG2z9hf9z4hCjz2g==" + }, "node_modules/bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -20600,6 +20606,11 @@ "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz", "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==" }, + "bulma": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.4.tgz", + "integrity": "sha512-Ffb6YGXDiZYX3cqvSbHWqQ8+LkX6tVoTcZuVB3lm93sbAVXlO0D6QlOTMnV6g18gILpAXqkG2z9hf9z4hCjz2g==" + }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", diff --git a/package.json b/package.json index cc266c4..860b6b4 100644 --- a/package.json +++ b/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", From 624fad9706bd3dca9b8d221f19742e2987ab1e2e Mon Sep 17 00:00:00 2001 From: SiyaM108 Date: Sat, 29 Nov 2025 17:08:06 +0000 Subject: [PATCH 8/8] done --- src/App.js | 17 ----------------- src/components/FormField.js | 9 +++++++-- src/components/Message.js | 12 ++++++++++-- src/components/Navbar.js | 5 ++++- src/components/SignupForm.js | 34 ++++++++-------------------------- 5 files changed, 29 insertions(+), 48 deletions(-) diff --git a/src/App.js b/src/App.js index b5f4fa2..7b8bfa1 100644 --- a/src/App.js +++ b/src/App.js @@ -2,29 +2,12 @@ import "./App.css"; import "bulma/css/bulma.css"; -import Navbar from "./components/Navbar"; -import FormField from "./components/FormField"; import SignupForm from "./components/SignupForm"; function App() { return (
- - - {/* Example form fields used directly */} -
- - -
); } diff --git a/src/components/FormField.js b/src/components/FormField.js index 89f9ea1..ee157f2 100644 --- a/src/components/FormField.js +++ b/src/components/FormField.js @@ -2,12 +2,17 @@ import React from "react"; import "./FormField.css"; -function FormField({ label, type, placeholder }) { +function FormField({ label, type = "text", placeholder = "", ...props }) { return (
- +
); diff --git a/src/components/Message.js b/src/components/Message.js index d96bf84..f31874f 100644 --- a/src/components/Message.js +++ b/src/components/Message.js @@ -1,11 +1,19 @@ -// src/components/Message.js 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 (key.startsWith("is")) classNames += ` ${key}`; + if (bulmaMessageClasses[key]) { + classNames += ` ${bulmaMessageClasses[key]}`; + } }); return ( diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 9474329..13a02d5 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -18,7 +18,10 @@ function Navbar() { Login - Signup + + + Signup + diff --git a/src/components/SignupForm.js b/src/components/SignupForm.js index e54261a..bff0a7c 100644 --- a/src/components/SignupForm.js +++ b/src/components/SignupForm.js @@ -1,5 +1,3 @@ -// src/components/SignupForm.js -import React from "react"; import Navbar from "./Navbar"; import FormField from "./FormField"; import CoolButton from "./CoolButton"; @@ -9,31 +7,15 @@ function SignupForm() {
-
-
- + + + + - - - - - - Submit - - -
+ + Submit + +
); }