searchBar admin

uniEmpleos/src/pages/AdminStudent/AdminStudent.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react"
+import { IoSearchCircle } from "react-icons/io5"
 import Header from "../../components/Header/Header"
 import style from "./AdminStudent.module.css"
 import InfoStudent from "../../components/InfoStudent/InfoStudent"
@@ -37,6 +38,20 @@ const ProfileAdminStudent = () => {
     obtainStudents()
   }, [])
 
+  const [searchTerm, setSearchTerm] = useState("")
+
+  const [showSearch, setShowSearch] = useState(false)
+
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value)
+  }
+
+  const filteredStudents = studentsData.studets
+    ? studentsData.studets.filter((student) =>
+        student.nombre.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    : []
+
   return (
     <div className={style.mainContainer}>
       <Header />
@@ -46,12 +61,28 @@ const ProfileAdminStudent = () => {
         style={typeError}
         close={() => setWarning(false)}
       />
+      <div className={style.searchContainer}>
+        <IoSearchCircle
+          size={40}
+          color="#94bd0f"
+          onClick={() => setShowSearch(!showSearch)}
+        />
+        {showSearch && (
+          <input
+            className={style.searchBar}
+            type="text"
+            placeholder="Buscar"
+            value={searchTerm}
+            onChange={handleSearchChange}
+          />
+        )}
+      </div>
       {loading ? (
         <Loader size={100} />
       ) : (
         <div className={style.studentsContainer}>
-          {studentsData.studets ? (
-            studentsData.studets.map((student) => {
+          {filteredStudents.length > 0 ? (
+            filteredStudents.map((student) => {
               const pfpUrlEmisor =
                 student.foto === ""
                   ? "/images/pfp.svg"

uniEmpleos/src/pages/AdminStudent/AdminStudent.module.css

@@ -4,4 +4,34 @@
   flex-wrap: wrap;
 }
 
+.searchBar{
+  padding: 10px;
+  width: 100%;
+  border: 2px solid #94bd0f;
+  color: #000;
+  font-size: 20px;
+  border-radius: 50px;
+  background-color: #fff;
+  font-size: 14px;
+}
+
+input.searchBar::placeholder{
+  color: #000;
+}
+
+.searchBar:focus{
+  outline: none;
+}
+
+.searchContainer{
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  gap: 20px;
+}
+
+.searchContainer svg{
+  cursor: pointer;
+}
+
 

uniEmpleos/src/pages/PricipalAdmin/PrincipalAdmin.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react"
+import { IoSearchCircle } from "react-icons/io5"
 import style from "./PrincipalAdmin.module.css"
 import useApi from "../../Hooks/useApi"
 import Popup from "../../components/Popup/Popup"
@@ -8,7 +9,6 @@ import API_URL from "../../api"
 import InfoStudent from "../../components/InfoStudent/InfoStudent"
 import { navigate } from "../../store"
 
-
 const PrincipalAdmin = () => {
   const enterprisesApi = useApi()
   const [enterprises, setEnterprises] = useState([])
@@ -29,6 +29,20 @@ const PrincipalAdmin = () => {
     setLoading(false)
   }
 
+  const [searchTerm, setSearchTerm] = useState("")
+
+  const [showSearch, setShowSearch] = useState(false)
+
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value)
+  }
+
+  const filteredEnterprises = enterprises.companies
+    ? enterprises.companies.filter((enterprise) =>
+        enterprise.nombre.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    : []
+
   const handleClick = (e) => {
     navigate(`/publicProfileAdminEnterprise/${e}`)
   }
@@ -46,12 +60,28 @@ const PrincipalAdmin = () => {
         style={typeError}
         close={() => setWarning(false)}
       />
+      <div className={style.searchContainer}>
+        <IoSearchCircle
+          size={40}
+          color="#94bd0f"
+          onClick={() => setShowSearch(!showSearch)}
+        />
+        {showSearch && (
+          <input
+            className={style.searchBar}
+            type="text"
+            placeholder="Buscar"
+            value={searchTerm}
+            onChange={handleSearchChange}
+          />
+        )}
+      </div>
       {loading ? (
         <Loader size={100} />
       ) : (
         <div className={style.enterprisesContainer}>
-          {enterprises.companies ? (
-            enterprises.companies.map((enterprise) => {
+          {filteredEnterprises.length > 0 ? (
+            filteredEnterprises.map((enterprise) => {
               const pfpUrlEmisor =
                 enterprise.foto === ""
                   ? "/images/pfp.svg"

uniEmpleos/src/pages/PricipalAdmin/PrincipalAdmin.module.css

@@ -2,4 +2,36 @@
     width: 100%;
     display: flex;
     flex-wrap: wrap;
-}
+    padding-top: 20px;
+}
+
+.searchBar{
+    padding: 10px;
+    width: 100%;
+    border: 2px solid #94bd0f;
+    color: #000;
+    font-size: 20px;
+    border-radius: 50px;
+    background-color: #fff;
+    font-size: 14px;
+}
+
+input.searchBar::placeholder{
+    color: #000;
+}
+
+.searchBar:focus{
+    outline: none;
+}
+
+.searchContainer{
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    gap: 20px;
+}
+
+.searchContainer svg{
+    cursor: pointer;
+}
+