From 80f6141632e666da7f35f256d07dd81d8c39aa75 Mon Sep 17 00:00:00 2001
From: Deepak Singh <deepkushwah824@gmail.com>
Date: Sat, 15 Apr 2023 03:32:45 +0530
Subject: [PATCH] #10 done

i have added a search box and button in the home screen
---
 package-lock.json                        |  4 ++-
 src/App.js                               |  2 ++
 src/components/BookSearch/BookSearch.css | 32 +++++++++++++++++++++++-
 src/components/BookSearch/BookSearch.jsx | 14 ++++++++++-
 4 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1386d7f..e44f5f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "codebooker",
       "version": "0.1.0",
+      "license": "MIT",
       "dependencies": {
         "@emotion/react": "^11.10.6",
         "@emotion/styled": "^11.10.6",
@@ -24,7 +25,8 @@
         "react-scripts": "5.0.1",
         "styled-components": "^5.3.9",
         "web-vitals": "^2.1.4"
-      }
+      },
+      "devDependencies": {}
     },
     "node_modules/@adobe/css-tools": {
       "version": "4.2.0",
diff --git a/src/App.js b/src/App.js
index 494064f..fa8c721 100644
--- a/src/App.js
+++ b/src/App.js
@@ -39,6 +39,7 @@ import Library from './components/Library/Library';
 import logo from './logo.svg';
 import './App.css';
 import SideNav from './components/SideNav/SideNav';
+import BookSearch from './components/BookSearch/BookSearch';
 
 const label = { inputProps: { 'aria-label': 'Color switch demo' } };
 
@@ -53,6 +54,7 @@ export default function App() {
 						<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
 							CodeBooker
 						</Typography>
+						<BookSearch/>
 						<NotificationsIcon />
 						<Switch {...label}
 							inputProps={{ 'aria-label': 'controlled' }} />
diff --git a/src/components/BookSearch/BookSearch.css b/src/components/BookSearch/BookSearch.css
index 9548a60..f3ae0c4 100644
--- a/src/components/BookSearch/BookSearch.css
+++ b/src/components/BookSearch/BookSearch.css
@@ -1 +1,31 @@
-.BookSearch-header {}
\ No newline at end of file
+/* .BookSearch-header {} */
+.search-window {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .search-input {
+    width: 300px;
+    padding: 10px;
+    font-size: 18px;
+    border: none;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    margin-right: 10px;
+  }
+  
+  .search-button {
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 18px;
+    cursor: pointer;
+  }
+  
+  .search-button:hover {
+    background-color: #0062cc;
+  }
+  
\ No newline at end of file
diff --git a/src/components/BookSearch/BookSearch.jsx b/src/components/BookSearch/BookSearch.jsx
index 5f67a6f..a8930eb 100644
--- a/src/components/BookSearch/BookSearch.jsx
+++ b/src/components/BookSearch/BookSearch.jsx
@@ -1 +1,13 @@
-import * as React from 'react';
\ No newline at end of file
+import React from 'react';
+import './BookSearch.css';
+
+function SearchWindow() {
+  return (
+    <div className="search-window">
+      <input type="text" placeholder="Search..." className="search-input" />
+      <button className="search-button">Search</button>
+    </div>
+  );
+}
+
+export default SearchWindow;