diff --git a/package-lock.json b/package-lock.json index 0c8890d..55d5fb2 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.2", "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.2", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.2.tgz", + "integrity": "sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A==" + }, "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.2", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.2.tgz", + "integrity": "sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A==" + }, "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..2029f52 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.2", "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..dd40fe7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,25 @@ -import logo from './logo.svg'; -import './App.css'; +import "bulma/css/bulma.css"; +import "./App.css"; +import Navbar from "./components/Navbar"; +import FormField from "./components/FormField"; +import SignupForm from "./components/SignupForm"; +import Message from "./components/Message"; function App() { return (
-
- logo -

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

- - Learn React - -
+ + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "} + Pellentesque risus mi. +
); } diff --git a/src/components/CoolButton.js b/src/components/CoolButton.js new file mode 100644 index 0000000..c91628f --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,41 @@ +import "bulma/css/bulma.css"; +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", +}; + +export default function CoolButton(props) { + const classNames = ["button"]; + + Object.keys(props).forEach((key) => { + if (bulmaClasses[key]) { + classNames.push(bulmaClasses[key]); + } + }); + + return ; +} diff --git a/src/components/FormField.css b/src/components/FormField.css new file mode 100644 index 0000000..9631d94 --- /dev/null +++ b/src/components/FormField.css @@ -0,0 +1,22 @@ +.field { + margin-bottom: 1.5em; + text-align: left; +} + +.label { + display: block; + font-weight: bold; + margin-bottom: 0.5em; +} + +.control { + width: 100%; +} + +.input { + width: 100%; + padding: 0.75em; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 1em; +} diff --git a/src/components/FormField.js b/src/components/FormField.js new file mode 100644 index 0000000..93bbeb2 --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,13 @@ +import './FormField.css'; +export default function FormField(props) { + return ( + <> +
+ +
+ +
+
+ + ) +} \ No newline at end of file diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..d08dbd5 --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,26 @@ +import "bulma/css/bulma.css"; +const bulmaClasses = { + isInfo: "is-info", + isSuccess: "is-success", + isWarning: "is-warning", + isDanger: "is-danger", + isPrimary: "is-primary", +}; +export default function Message(props) { + const classNames = ["message"]; + + Object.keys(props).forEach((key) => { + if (bulmaClasses[key]) { + classNames.push(bulmaClasses[key]); + } + }); + return ( +
+
+

{props.title}

+ +
+
{props.children}
+
+ ); +} diff --git a/src/components/Navbar.css b/src/components/Navbar.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..4bc0f57 --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,62 @@ +import CoolButton from "./CoolButton"; +export default function Navbar() { + return ( + <> + + + ); +} diff --git a/src/components/SignupForm.css b/src/components/SignupForm.css new file mode 100644 index 0000000..cfdbba1 --- /dev/null +++ b/src/components/SignupForm.css @@ -0,0 +1,28 @@ +.signup-form { + max-width: 400px; + margin: 0 auto; + padding: 2em; + border: 1px solid #ccc; + border-radius: 8px; + background-color: #f9f9f9; +} + +form { + display: flex; + flex-direction: column; +} + +.button { + margin-top: 1.5em; + padding: 0.75em; + border: none; + border-radius: 4px; + background-color: #007bff; + color: white; + font-size: 1em; + cursor: pointer; +} + +.button:hover { + background-color: #0056b3; +} diff --git a/src/components/SignupForm.js b/src/components/SignupForm.js new file mode 100644 index 0000000..57c56f3 --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,17 @@ +import FormField from './FormField'; +import './SignupForm.css'; +import CoolButton from './CoolButton'; + +export default function SignupForm() { + return ( +
+
+ + + + Submit + + +
+ ) +} \ No newline at end of file