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..c5878c8 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,4 @@ -.App { - text-align: center; -} + .App-logo { height: 40vmin; diff --git a/src/App.js b/src/App.js index 3784575..be78e3c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,25 @@ -import logo from './logo.svg'; -import './App.css'; +import "./App.css"; +import "bulma/css/bulma.css"; + + +import SignupForm from "./components/SignupForm.js"; +import CoolButton from "./components/CoolButton.js"; + function App() { return (
-
- logo -

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

- - Learn React - -
+ + + + Button 1 + Button 2 +
Button 1 + Button 2
+
); } -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..226e3f7 --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,43 @@ +const classMap = { + // prop name: bulma class name + 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) + { + const classkeys = Object.keys(props).filter((prop) => classMap[prop]) + const classNames=classkeys.map((prop) => classMap[prop]).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..abea28a --- /dev/null +++ b/src/components/FormField.css @@ -0,0 +1,3 @@ +.field{ + padding:10px; +} \ No newline at end of file diff --git a/src/components/FormField.js b/src/components/FormField.js new file mode 100644 index 0000000..8d7f4df --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,13 @@ +import './FormField.css' +function FormField(props) +{ + return ( +
+ +
+ +
+
+ ); +} +export default FormField; \ No newline at end of file diff --git a/src/components/Navbar.css b/src/components/Navbar.css new file mode 100644 index 0000000..eae84dd --- /dev/null +++ b/src/components/Navbar.css @@ -0,0 +1,19 @@ +.links a +{ + text-decoration: none; + color:black; +} +.nav{ + display: flex; + width:100%; + justify-content: space-between; + padding:10px; +} +.left{ + display:flex; + align-items: center; +} +.right button{ + margin:0 8px; +} + diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..377cfab --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,26 @@ +import './Navbar.css' +import CoolButton from './CoolButton'; +function Navbar() +{ + return ( + +
+
+
+ + Bulma: a modern CSS framework based on Flexbox + +
+
+ Home +
+
+ +
+ Log In + Sign Up +
+
+ ); +} +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..12176d8 --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,19 @@ +import Navbar from "./Navbar" +import FormField from "./FormField" +import CoolButton from "./CoolButton" +function SignupForm() +{ + return( +
+ +
+ + + + Submit + +
+ ) +} + +export default SignupForm; \ No newline at end of file