From c969f10dda3ef59a949471455c754e3c911b5140 Mon Sep 17 00:00:00 2001 From: AdityaKoche01 Date: Sun, 25 Feb 2024 13:05:08 +0530 Subject: [PATCH] done --- package-lock.json | 11 ++++++++ package.json | 1 + src/App.js | 48 ++++++++++++++++++++--------------- src/components/CoolButton.js | 19 ++++++++++++++ src/components/FormField.css | 20 +++++++++++++++ src/components/FormField.js | 15 +++++++++++ src/components/Message.js | 20 +++++++++++++++ src/components/Navbar.css | 41 ++++++++++++++++++++++++++++++ src/components/Navbar.js | 31 ++++++++++++++++++++++ src/components/SignupForm.css | 20 +++++++++++++++ src/components/SignupForm.js | 20 +++++++++++++++ 11 files changed, 225 insertions(+), 21 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.css create mode 100644 src/components/SignupForm.js diff --git a/package-lock.json b/package-lock.json index 0c8890d..a6e201c 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": "^0.9.4", "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": "0.9.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", + "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + }, "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": "0.9.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", + "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + }, "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..ad6c4d5 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": "^0.9.4", "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..b8ea5ea 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,31 @@ -import logo from './logo.svg'; -import './App.css'; + +import "./App.css"; +import Navbar from "./components/Navbar.js"; +import FormField from "./components/FormField"; +import SignupForm from "./components/SignupForm.js"; +import Message from "./components/Message.js"; +import CoolButton from "./components/CoolButton.js"; + + +import "bulma/css/bulma.css"; + + + function App() { - return ( -
-
- logo -

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

- - Learn React - -
-
- ); + +return
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Pellentesque risus mi. + + Button 1 + Button 2 + +
; + } -export default App; +export default App; + diff --git a/src/components/CoolButton.js b/src/components/CoolButton.js new file mode 100644 index 0000000..7a3c2eb --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,19 @@ + + +import React from 'react'; + +function CoolButton({ isSuccess, children }) { + // Constructing className based on props + let className = 'button'; + if (isSuccess) { + className += ' is-success'; + } + + return ( + + ); +} + +export default CoolButton; diff --git a/src/components/FormField.css b/src/components/FormField.css new file mode 100644 index 0000000..91de85f --- /dev/null +++ b/src/components/FormField.css @@ -0,0 +1,20 @@ +.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..a403b47 --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,15 @@ +import React from 'react'; +import './FormField.css'; + +const FormField = ({ label, type, placeholder }) => { + return ( +
+ +
+ +
+
+ ); +}; + +export default FormField; diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..b6465e4 --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,20 @@ + + +import React from 'react'; + +function Message({ isInfo, title, children }) { + const classes = isInfo ? 'message is-info' : 'message'; + + return ( +
+
+

{title}

+
+
+ {children} +
+
+ ); +} + +export default Message; diff --git a/src/components/Navbar.css b/src/components/Navbar.css new file mode 100644 index 0000000..709653f --- /dev/null +++ b/src/components/Navbar.css @@ -0,0 +1,41 @@ +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #333; + padding: 10px 20px; + } + + .navbar a { + text-decoration: none; + color: rgb(15, 49, 108); + margin-right: 20px; + margin-top: 10px; + } + + .btn { + display: flex; /* Add */ + align-items: center; + float: right; + margin-top:10px; /* Add */ + } + + .home-btn{ + margin-bottom: 10px; + align-items: center; + } + + .log-btn, + .sign-btn { + color: white; + background-color: #85144b; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + margin-left: 20px; + margin-right:20px; + + + } + \ No newline at end of file diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..6903073 --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,31 @@ +import React from 'react' +import "./Navbar.css" + +const Navbar = () => { + return ( +
+ + + +
+ ) +} + +export default Navbar; \ No newline at end of file diff --git a/src/components/SignupForm.css b/src/components/SignupForm.css new file mode 100644 index 0000000..12b173e --- /dev/null +++ b/src/components/SignupForm.css @@ -0,0 +1,20 @@ +.btn-submit{ + background-color: rgb(104, 104, 237); + width:80px; + height:40px; + border-radius: 6px; + font-weight: 600; + +} + +.btn-submit:hover{ + cursor:pointer; + background-color: rgb(11, 11, 236); + height:42px; + width: 80px; + border: 3px solid rgb(231, 146, 0); + border-radius: 5px; + + + +} \ No newline at end of file diff --git a/src/components/SignupForm.js b/src/components/SignupForm.js new file mode 100644 index 0000000..f9b6917 --- /dev/null +++ b/src/components/SignupForm.js @@ -0,0 +1,20 @@ +import React from 'react'; +import Navbar from './Navbar'; +import FormField from './FormField'; +import "./SignupForm.css" + +const SignupForm = () => { + return ( +
+ +
+ + + + + +
+ ); +}; + +export default SignupForm;