feat: search component users repositories

Author: darkhorse-420

src/ui/components/Search/Search.css

@@ -0,0 +1,39 @@
+/* Search.css */
+
+.search-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  margin-right: 10 px;
+}
+
+.search-input {
+  padding: 10px;
+  margin-right: 8px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  width: 200px; /* Adjust width as needed */
+  font-size: 14px;
+  transition: border-color 0.3s;
+}
+
+.search-input:focus {
+  border-color: #007bff; /* Change to your desired focus color */
+  outline: none; /* Remove default outline */
+}
+
+.search-button {
+  padding: 10px 16px;
+  border: none;
+  border-radius: 10px;
+  background-color: #007bff; /* Change to your desired button color */
+  color: white;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.search-button:hover {
+  background-color: #0056b3; /* Darker shade for hover effect */
+}

src/ui/components/Search/Search.jsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './Search.css'; // Import the CSS file
+
+export default function Search({ placeholder = 'Search...', onSearch }) {
+  const [query, setQuery] = useState('');
+
+  const handleInputChange = (e) => {
+    setQuery(e.target.value);
+  };
+
+  const handleSearch = () => {
+    onSearch(query);
+  };
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      handleSearch(); // Trigger search on Enter
+    }
+  };
+
+  return (
+    <div className="search-container">
+      <input
+        type="text"
+        placeholder={placeholder}
+        value={query}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown} // Add keydown event
+        className="search-input" // Apply the class
+      />
+      <button onClick={handleSearch} className="search-button">
+        Search
+      </button>
+    </div>
+  );
+}
+
+Search.propTypes = {
+  placeholder: PropTypes.string,
+  onSearch: PropTypes.func.isRequired,
+};

src/ui/views/RepoList/Components/RepoOverview.jsx

@@ -6,6 +6,8 @@ import GridItem from '../../../components/Grid/GridItem';
 import { CodeReviewIcon, LawIcon, PeopleIcon } from '@primer/octicons-react';
 
 
+
+
 const colors = {
   '1C Enterprise': '#814CCC',
   '2-Dimensional Array': '#38761D',
@@ -570,11 +572,13 @@ const colors = {
 import moment from 'moment';
 import CodeActionButton from '../../../components/CustomButtons/CodeActionButton';
 import Pagination from '../../../components/Pagination/Pagination';
+import Search from '../../../components/Search/Search'; 
 
 export default function Repositories(props) {
   // const [github, setGitHub] = React.useState({});
   // const [repositories, setRepositories] = useState([]); // To hold all repositories
   const [currentPage, setCurrentPage] = useState(1);
+  const [searchQuery, setSearchQuery] = useState('');
   const itemsPerPage = 5;
 
 
@@ -606,10 +610,23 @@ export default function Repositories(props) {
   // };
 
 
+// Handle search functionality
+const handleSearch = (query) => {
+  setSearchQuery(query);
+  setCurrentPage(1); // Reset to first page when searching
+};
+
+// Filter repositories based on search query
+const filteredRepositories = dummyRepositories.filter(repo =>
+  repo.name.toLowerCase().includes(searchQuery.toLowerCase())
+);
+
+
+
   // Pagination logic to get current items for the page
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
-  const currentItems = dummyRepositories.slice(indexOfFirstItem, indexOfLastItem);
+  const currentItems = filteredRepositories.slice(indexOfFirstItem, indexOfLastItem);
 
   const handlePageChange = (page) => {
     setCurrentPage(page);
@@ -620,6 +637,10 @@ export default function Repositories(props) {
 
   return (
      <>
+   
+     <Search onSearch={handleSearch} placeholder="Search repositories..." />
+
+
       {currentItems.map((repo, index) => (
         <TableRow key={index}>
           <TableCell>
@@ -684,10 +705,12 @@ export default function Repositories(props) {
       {/* Render the Pagination component */}
       <Pagination
         currentPage={currentPage}
-        totalItems={dummyRepositories.length}
+         totalItems={filteredRepositories.length} // Use filtered repositories for pagination
         itemsPerPage={itemsPerPage}
         onPageChange={handlePageChange}
       />
+      
     </>
+  
   );
 }

src/ui/views/UserList/Components/UserList.jsx

@@ -12,6 +12,8 @@ import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 import { CloseRounded, Check, KeyboardArrowRight } from '@material-ui/icons';
 import Pagination from '../../../components/Pagination/Pagination';
+import Search from '../../../components/Search/Search';
+
 
 const useStyles = makeStyles({
   table: {
@@ -38,19 +40,40 @@ export default function UserList() {
 
   // Pagination states
   const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 5; // Set the number of items per page
+  const itemsPerPage = 5; 
+  const [searchQuery, setSearchQuery] = useState('');
 
   // Calculate the items for the current page
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
-  const currentItems = dummyUsers.slice(indexOfFirstItem, indexOfLastItem);
-  const totalItems = dummyUsers.length;
 
-  const handlePageChange = (page) => setCurrentPage(page);
+ // Filter users based on the search query
+ const filteredUsers = dummyUsers.filter(user =>
+  user.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+  user.username.toLowerCase().includes(searchQuery.toLowerCase())
+);
+
+const currentItems = filteredUsers.slice(indexOfFirstItem, indexOfLastItem);
+const totalItems = filteredUsers.length;
+  // Function to handle page change
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+
+  // Function to handle search
+  const handleSearch = (query) => {
+    setSearchQuery(query);
+    setCurrentPage(1); // Reset to the first page when searching
+  };
 
   return (
     <GridContainer>
       <GridItem xs={12} sm={12} md={12}>
+
+        {/* Search Component */}
+        <Search onSearch={handleSearch} placeholder="Search users..." />
+
         <TableContainer component={Paper}>
           <Table className={classes.table} aria-label='simple table'>
             <TableHead>