From ea937d5af16851bbafb95180e0964bbe59769f48 Mon Sep 17 00:00:00 2001 From: Muhammad Irshad <85778819+Irshadmdk19@users.noreply.github.com> Date: Sat, 9 Nov 2024 17:13:11 +0530 Subject: [PATCH] done --- package-lock.json | 11 +++++++ package.json | 1 + src/App.css | 38 ---------------------- src/App.js | 22 ++++--------- src/components/CoolButton.js | 13 ++++++++ src/components/FormField.js | 18 +++++++++++ src/components/Navbar.js | 62 ++++++++++++++++++++++++++++++++++++ src/components/SignUpForm.js | 17 ++++++++++ src/index.css | 13 -------- 9 files changed, 129 insertions(+), 66 deletions(-) create mode 100644 src/components/CoolButton.js create mode 100644 src/components/FormField.js 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..0f56efe 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,15 @@ -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'; function App() { return (
-
- logo -

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

- - Learn React - -
+ +
); } diff --git a/src/components/CoolButton.js b/src/components/CoolButton.js new file mode 100644 index 0000000..68d3996 --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,13 @@ +import React from 'react' + +const CoolButton = () => { + return ( +
+ + + +
+ ) +} + +export default CoolButton \ No newline at end of file diff --git a/src/components/FormField.js b/src/components/FormField.js new file mode 100644 index 0000000..7f860f6 --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,18 @@ +import React from "react"; + +const FormField = (props) => { + return ( +
+
+ +
+ +
+
+ + +
+ ); +}; + +export default FormField; diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..bc9f79e --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,62 @@ +import React from 'react' + +const 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..092be0a --- /dev/null +++ b/src/components/SignUpForm.js @@ -0,0 +1,17 @@ +import React from 'react' +import FormField from './FormField' +import CoolButton from './CoolButton' + +const SignUpForm = () => { + return ( +
+ + + + Button 1 + +
+ ) +} + +export default SignUpForm \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e..e69de29 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -}