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..97829e8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,33 @@ -import logo from './logo.svg'; + import './App.css'; +import "bulma/css/bulma.css"; + +import Navbar from './components/Navbar'; +import FormField from './components/FormField'; +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..44d3bc6 --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,47 @@ +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..de2b9bf --- /dev/null +++ b/src/components/FormField.css @@ -0,0 +1,21 @@ +.field { + margin-bottom: 1rem; + } + + .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..bd37184 --- /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..0f22047 --- /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..554459e --- /dev/null +++ b/src/components/Navbar.css @@ -0,0 +1,24 @@ +.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); +} + +.navbarsides{ + display: flex; + gap: 20px; + padding: 0 20px; + align-items: center; +} + +.bulmaLogo{ + width: 9rem; +} + +.right-navbar>button{ +padding: 7px 10px; +border-radius: 5px; +} \ No newline at end of file diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..b61a7b5 --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,69 @@ +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..cec7f87 --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,27 @@ +import React from 'react' +import Navbar from './Navbar' +import FormField from './FormField' + +function SignupForm() { + return ( +
+
+
+ + + + +
+
+ ); +} + +export default SignupForm \ No newline at end of file