From 2cd8dd83151d4ad27f5d08b84da7356542954d51 Mon Sep 17 00:00:00 2001 From: Navin-nash <1923014@saec.ac.in> Date: Mon, 7 Oct 2024 17:10:50 +0530 Subject: [PATCH] done --- package-lock.json | 11 ++++++ package.json | 1 + src/App.css | 2 +- src/App.js | 44 ++++++++++++++--------- src/components/CoolButton.js | 47 ++++++++++++++++++++++++ src/components/FormField.css | 21 +++++++++++ src/components/FormField.js | 18 ++++++++++ src/components/Message.js | 26 ++++++++++++++ src/components/Navbar.css | 24 +++++++++++++ src/components/Navbar.js | 69 ++++++++++++++++++++++++++++++++++++ src/components/SignUpForm.js | 26 ++++++++++++++ 11 files changed, 271 insertions(+), 18 deletions(-) create mode 100644 src/components/CoolButton.js create mode 100644 src/components/FormField.css create mode 100644 src/components/FormField.js create mode 100644 src/components/Message.js create mode 100644 src/components/Navbar.css create mode 100644 src/components/Navbar.js create mode 100644 src/components/SignUpForm.js 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.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..f846c78 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,35 @@ -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 Learn React. +
); } -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..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..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..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..3ce1f62 --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,69 @@ +import './Navbar.css' +function 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..bed586f --- /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