diff --git a/package-lock.json b/package-lock.json index 0c8890d..bb66118 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.1", "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.1", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.1.tgz", + "integrity": "sha512-+xv/BIAEQakHkR0QVz+s+RjNqfC53Mx9ZYexyaFNFo9wx5i76HXArNdwW7bccyJxa5mgV/T5DcVGqsAB19nBJQ==" + }, "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.1", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-1.0.1.tgz", + "integrity": "sha512-+xv/BIAEQakHkR0QVz+s+RjNqfC53Mx9ZYexyaFNFo9wx5i76HXArNdwW7bccyJxa5mgV/T5DcVGqsAB19nBJQ==" + }, "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..7e6282c 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.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/src/App.css b/src/App.css index 74b5e05..e70a402 100644 --- a/src/App.css +++ b/src/App.css @@ -35,4 +35,4 @@ to { transform: rotate(360deg); } -} +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..af1fad1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,9 @@ import logo from './logo.svg'; +import "bulma/css/bulma.css" +import Message from './components/Message'; + +import SignupForm from './components/SignupForm'; + import './App.css'; function App() { @@ -18,8 +23,11 @@ function App() { Learn React + + Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "} + Pellentesque risus mi. + ); } - -export default App; +export default App; \ No newline at end of file diff --git a/src/components/CoolButton.js b/src/components/CoolButton.js new file mode 100644 index 0000000..3902e0a --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,46 @@ +import React from "react"; + +const CoolButton = (props) => { + const bulmaClassMap = { + 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", + }; + + // Filter out props that are not in the map and concatenate the corresponding Bulma classes + const className = Object.keys(props) + .filter((propName) => bulmaClassMap[propName]) + .map((propName) => bulmaClassMap[propName]) + .join(" "); + + 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..e69de29 diff --git a/src/components/FormField.js b/src/components/FormField.js new file mode 100644 index 0000000..90a15cd --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,14 @@ +import React from "react"; + +const 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..467fa60 --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,20 @@ +import React from "react"; + +const Message = (props) => { + const className=`message ${props.isInfo?"is-info":""}`; + return ( + <> +
+
+

{props.title}

+ +
+
+ {props.children} +
+
+ + ); +}; + +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..e69de29 diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..b7f5c83 --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,49 @@ +import React from 'react' +import CoolButton from './CoolButton' + +const Navbar = () => { + return ( +
+ +
+ ) +} + +export default Navbar \ No newline at end of file diff --git a/src/components/SignupForm.js b/src/components/SignupForm.js new file mode 100644 index 0000000..f80fb34 --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,16 @@ +import React from 'react' +import Navbar from './Navbar'; +import FormField from './FormField'; +const SignupForm = () => { + return ( + <> + + + + + + + ) +} + +export default SignupForm \ No newline at end of file