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", diff --git a/src/App.js b/src/App.js index 3784575..7b8bfa1 100644 --- a/src/App.js +++ b/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 (
-
- logo -

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

- - Learn React - -
+
); } 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 */ diff --git a/src/components/FormField.js b/src/components/FormField.js new file mode 100644 index 0000000..ee157f2 --- /dev/null +++ b/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 ( +
+ +
+ +
+
+ ); +} + +export default FormField; diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..f31874f --- /dev/null +++ b/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 ( +
+
+

{title}

+
+
{children}
+
+ ); +} + +export default Message; 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 */ diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..13a02d5 --- /dev/null +++ b/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 ( + + ); +} + +export default Navbar; diff --git a/src/components/SignupForm.js b/src/components/SignupForm.js new file mode 100644 index 0000000..bff0a7c --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,23 @@ +import Navbar from "./Navbar"; +import FormField from "./FormField"; +import CoolButton from "./CoolButton"; + +function SignupForm() { + return ( +
+ + +
+ + + + + + Submit + + +
+ ); +} + +export default SignupForm;