diff --git a/package-lock.json b/package-lock.json index 0c8890d..70388a7 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,12 @@ "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==", + "license": "MIT" + }, "node_modules/bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -20600,6 +20607,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..cb40b39 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,30 @@ -import logo from './logo.svg'; -import './App.css'; +// import './App.css'; +import "bulma/css/bulma.css"; +import Navbar from './components/Navbar'; +import SignupForm from './components/SignupForm'; +import CoolButton from "./components/CoolButton"; +import Message from "./components/Message"; + function App() { return (
-
- logo -

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

- - Learn React - -
+ + +
+ + Button 1 + + + Button 2 + +
+
+ + + 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..5ffa499 --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,49 @@ +import React from 'react' + +function CoolButton(props) { + const bulmaClassesMap = { + 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", + }; + + let classNames = 'button'; + + Object.keys(bulmaClassesMap).forEach((key) => { + if (props[key]) { + classNames += ` ${bulmaClassesMap[key]}`; + } + }); + return ( +
+ + + +
+ ) +} + +export default CoolButton \ No newline at end of file diff --git a/src/components/FormField.css b/src/components/FormField.css new file mode 100644 index 0000000..0bfd9a4 --- /dev/null +++ b/src/components/FormField.css @@ -0,0 +1,26 @@ +.field { + margin-bottom: 1rem; + +} + +.form-container{ + width: 50%; +} + + .label { + font-weight: bold; + margin-bottom: 0.5rem; + } + + .control { + display: flex; + align-items: center; + } + + .input { + padding: 0.5rem; + font-size: 1rem; + border: 1px solid #ccc; + border-radius: 4px; + } + \ No newline at end of file diff --git a/src/components/FormField.js b/src/components/FormField.js new file mode 100644 index 0000000..a5aadf9 --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,18 @@ + +import React from 'react' +import './FormField.css' + +function FormField(props) { + return ( + <> +
+ +
+ +
+
+ + ); +} + +export default FormField \ No newline at end of file diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..77549a2 --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,26 @@ +import React from 'react' + +function Message() { + return ( +
+
+
+

Hello World

+ +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Pellentesque risus mi, tempus quis placerat ut, porta + nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida + purus diam, et dictum felis venenatis efficitur. Aenean ac + eleifend lacus, in mollis lectus. Donec sodales, arcu et + sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi + magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales + sem. +
+
+
+ ); +} + +export default Message \ No newline at end of file diff --git a/src/components/Navbar.css b/src/components/Navbar.css new file mode 100644 index 0000000..545fdff --- /dev/null +++ b/src/components/Navbar.css @@ -0,0 +1,9 @@ +.navbar{ + height: 3rem; + background-color: rgb(255, 255, 255); + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: solid 2px rgb(99, 99, 99); +} + diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..7d017ac --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,69 @@ +import React from "react"; +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..b5ae2fd --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,26 @@ +import React from 'react' +import FormField from './FormField' + +function SignupForm() { + return ( +
+
+
+ + + + +
+
+ ); +} + +export default SignupForm \ No newline at end of file