diff options
| -rw-r--r-- | package-lock.json | 29 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/App.css | 39 | ||||
| -rw-r--r-- | src/App.jsx | 11 | ||||
| -rw-r--r-- | src/features/counter/Counter.jsx | 4 | ||||
| -rw-r--r-- | src/index.css | 13 | ||||
| -rw-r--r-- | src/main.jsx | 15 |
7 files changed, 46 insertions, 66 deletions
diff --git a/package-lock.json b/package-lock.json index a6d6fc0..09d0a9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@reduxjs/toolkit": "^1.9.5", + "bootstrap": "^5.2.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.5" @@ -779,6 +780,16 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, + "node_modules/@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@reduxjs/toolkit": { "version": "1.9.5", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz", @@ -875,6 +886,24 @@ "node": ">=4" } }, + "node_modules/bootstrap": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.6" + } + }, "node_modules/browserslist": { "version": "4.21.5", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz", diff --git a/package.json b/package.json index 42abdb9..892b437 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@reduxjs/toolkit": "^1.9.5", + "bootstrap": "^5.2.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.5" diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 01cc586..0000000 --- a/src/App.css +++ /dev/null @@ -1,39 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-float infinite 3s ease-in-out; - } -} - -.App-header { - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); -} - -.App-link { - color: rgb(112, 76, 182); -} - -@keyframes App-logo-float { - 0% { - transform: translateY(0); - } - 50% { - transform: translateY(10px); - } - 100% { - transform: translateY(0px); - } -} diff --git a/src/App.jsx b/src/App.jsx index 7fbcae5..f12edb5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,13 +1,12 @@ import React from "react"; -import "./App.css"; import { Counter } from "./features/counter/Counter"; function App() { - return ( - <div> - <Counter /> - </div> - ); + return ( + <div> + <Counter /> + </div> + ); } export default App; diff --git a/src/features/counter/Counter.jsx b/src/features/counter/Counter.jsx index d589bf9..b8453b2 100644 --- a/src/features/counter/Counter.jsx +++ b/src/features/counter/Counter.jsx @@ -8,17 +8,19 @@ export function Counter() { return ( <div> + <h1>{count}</h1> <div> <button aria-label="Increment value" onClick={() => dispatch(increment())} + className='btn btn-outline-primary' > Increment </button> - <span>{count}</span> <button aria-label="Decrement value" onClick={() => dispatch(decrement())} + className='btn btn-outline-primary' > Decrement </button> diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 4a1df4d..0000000 --- a/src/index.css +++ /dev/null @@ -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; -} diff --git a/src/main.jsx b/src/main.jsx index a7ca55d..38d8b53 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,14 +1,15 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import { Provider } from 'react-redux' +import { Provider } from "react-redux"; import { store } from "./app/store"; import App from "./App"; -import "./index.css"; +import "bootstrap/dist/css/bootstrap.css"; +import "bootstrap/dist/js/bootstrap"; ReactDOM.createRoot(document.getElementById("root")).render( - <React.StrictMode> - <Provider store={store}> - <App /> - </Provider> - </React.StrictMode> + <React.StrictMode> + <Provider store={store}> + <App /> + </Provider> + </React.StrictMode> ); |