feat: add grid layout for user-list and refactor searchbar (#596)

* add Sachin-chaurasiya.json

* Add React router component for links

* Add grid layout for user-list

closes #583

src/App.js

@@ -13,17 +13,15 @@ import Home from './Components/Home/Home'
 function App() {
   return (
     <Router>
-      <div className="p-m-4">
-        <Switch>
-          <Route path="/:username">
-            <Socials />
-          </Route>
-          <Route path="/">
-            <Home />
-          </Route>
-        </Switch>
-        <Footer />
-      </div>
+      <Switch>
+        <Route path="/:username">
+          <Socials />
+        </Route>
+        <Route path="/">
+          <Home />
+        </Route>
+      </Switch>
+      <Footer />
     </Router>
   )
 }

src/Components/Home/Home.css

@@ -1,3 +1,17 @@
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.user-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  place-items: center;
+}
+
 a {
   text-decoration: none;
 }
@@ -27,13 +41,30 @@ a {
 .search-section {
   display: flex;
   justify-content: center;
-  margin-bottom: 10px;
+  margin: 10px 0px;
 }
 
 label {
-  text-decoration:underline;
+  text-decoration: underline;
   text-align: center;
   display: flex;
   justify-content: center;
-  margin-bottom: 10px;  
+  margin-bottom: 10px;
+}
+
+@media screen and (max-width: 1024px) {
+  .user-list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media screen and (max-width: 768px) {
+  .user-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media screen and (max-width: 480px) {
+  .user-list {
+    place-items: left;
+    grid-template-columns: repeat(1, 1fr);
+  }
 }

src/Components/Home/Home.js

@@ -29,7 +29,7 @@ function Home() {
   }, [])
 
   return (
-    <main>
+    <main className="container">
       {showProgress && <ProgressBar mode="indeterminate" />}
       {skeleton ? <Placeholders list={list} /> : <Users list={list} />}
     </main>

src/Components/Home/Searchbar.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { InputText } from 'primereact/inputtext'
+
+const Searchbar = ({ searchHandler, searchTerm }) => {
+  return (
+    <div className="search-section">
+      <span className="p-input-icon-left">
+        <i className="pi pi-search" />
+        <InputText
+          type="search"
+          value={searchTerm}
+          onChange={({ target }) => searchHandler(target.value)}
+          name="user"
+          id="search-input"
+          placeholder="Search user..."
+        />
+      </span>
+    </div>
+  )
+}
+Searchbar.propTypes = {
+  searchHandler: PropTypes.func.isRequired,
+  searchTerm: PropTypes.string.isRequired,
+}
+
+export default Searchbar

src/Components/Home/Users.js

@@ -1,40 +1,34 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { Chip } from 'primereact/chip'
-import { InputText } from 'primereact/inputtext'
 import { Link } from 'react-router-dom'
+import Searchbar from './Searchbar'
 
-function User({ list }) {
+function Users({ list }) {
   const [searchTerm, setSearchTerm] = useState('')
+  const searchHandler = (value) => {
+    setSearchTerm(value || '')
+  }
   return (
     <>
-      <div className="search-section">
-        <span className="p-input-icon-left">
-          <i className="pi pi-search" />
-          <InputText
-            value={searchTerm}
-            onChange={({ target }) => setSearchTerm(target.value)}
-            name="user"
-            id="search-input"
-            placeholder="Search..."
-          />
-        </span>
+      <Searchbar searchTerm={searchTerm} searchHandler={searchHandler} />
+      <div className="user-list">
+        {list
+          .filter((User) =>
+            User.name.toLowerCase().includes(searchTerm.toLowerCase()),
+          )
+          .map((user, key) => (
+            <Link to={`${user.username}`} key={`avatar-${key}`}>
+              <Chip image={user.avatar} className="p-m-2" label={user.name} />
+            </Link>
+          ))}
       </div>
-      {list
-        .filter((User) =>
-          User.name.toLowerCase().includes(searchTerm.toLowerCase()),
-        )
-        .map((user, key) => (
-          <Link to={`${user.username}`} key={`avatar-${key}`}>
-            <Chip image={user.avatar} className="p-m-2" label={user.name} />
-          </Link>
-        ))}
     </>
   )
 }
 
-User.propTypes = {
+Users.propTypes = {
   list: PropTypes.array.isRequired,
 }
 
-export default User
+export default Users