From 183f8870aabf07d4cb9ea2db6ac8a4f90f63d56b Mon Sep 17 00:00:00 2001 From: b41r4m Date: Fri, 16 Aug 2024 17:49:13 +0530 Subject: [PATCH] done --- package-lock.json | 11 +++++++ package.json | 1 + src/App.css | 38 ---------------------- src/App.js | 35 ++++++++++---------- src/components/CoolButton.js | 40 +++++++++++++++++++++++ src/components/FormField.css | 0 src/components/FormField.js | 18 +++++++++++ src/components/Message.js | 30 +++++++++++++++++ src/components/Navbar.css | 0 src/components/Navbar.js | 62 ++++++++++++++++++++++++++++++++++++ src/components/SignupForm.js | 26 +++++++++++++++ 11 files changed, 207 insertions(+), 54 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..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js index 3784575..a5a4f0d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,26 @@ -import logo from './logo.svg'; -import './App.css'; +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..c29cb68 --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,40 @@ +let bulmaBtnClasses = { + // 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) { + let btnClasses = Object.keys(props) + .filter((p) => bulmaBtnClasses[p]) + .map((p) => bulmaBtnClasses[p]) + .join(" "); + return ; +} + +export default CoolButton; 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..5c8c119 --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,18 @@ +import "./FormField.css"; + +function FormField(props) { + return ( +
+ +
+ +
+
+ ); +} + +export default FormField; diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..638b8ab --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,30 @@ +let bulmaMsgClasses = { + isDark: "is-dark", + isLink: "is-link", + isPrimary: "is-primary", + isInfo: "is-info", + isSuccess: "is-success", + isWarning: "is-warning", + isDanger: "is-danger", + isSmall: "is-small", + isMedium: "is-medium", + isLarge: "is-large", +}; + +function Message(props) { + let msgClasses = Object.keys(props) + .filter((p) => bulmaMsgClasses[p]) + .map((p) => bulmaMsgClasses[p]) + .join(" "); + return ( +
+
+

{props.title}

+ +
+
{props.children}
+
+ ); +} + +export default Message; 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..98c4375 --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,62 @@ +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..277b822 --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,26 @@ +import Navbar from "./Navbar"; +import FormField from "./FormField"; + +function SignupForm() { + return ( +
+ +
+ + + + + +
+ ); +} + +export default SignupForm;