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.js b/src/App.js index 3784575..e4b7b4b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,28 @@ -import logo from './logo.svg'; + import './App.css'; +import "bulma/css/bulma.css"; + +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 - -
-
- ); + return
+ + +Button 1 + Button 2 +
+ Button 1 + Button 2 +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "} + Write something in bold. + +
; } + + export default App; 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..9e6ddec --- /dev/null +++ b/src/components/FormField.css @@ -0,0 +1,19 @@ +.field { + margin-bottom: 1rem; + } + + .label { + color: #333; + font-weight: bold; + } + + .input { + padding: 0.5rem; + border: 1px solid #ccc; + border-radius: 4px; + width: 100%; + } + + .control { + margin-top: 0.5rem; + } \ 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/Message.css b/src/components/Message.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..022a06d --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,14 @@ +const Message = ({ isInfo, title, children }) => { + return ( +
+
+

{title}

+
+
+ {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..e90c9b6 --- /dev/null +++ b/src/components/Navbar.css @@ -0,0 +1,18 @@ +.links a +{ + text-decoration: none; + color:white; +} +.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..70abdf3 --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,21 @@ +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