Ignore:
Timestamp:
08/01/22 19:18:54 (2 years ago)
Author:
Viktor <mlviktor23@…>
Branches:
main
Children:
d654c74
Parents:
080a3f3
Message:

styled searchbar

File:
1 edited

Legend:

Unmodified
Added
Removed

  • reactapp/src/Components/Search.js

    r080a3f3 r0df6b9e  
    33import { transliterate } from "../Util/transliterate";
    44import {
    5   SearchDropdownContentSmall,
     5  SearchDropdownResultSmall,
     6  SearchDropdownTextSmall,
    67  SearchDropdownSmall,
     8  SearchDropdownResultLinkSmall,
     9  SearchSmall,
    710} from "./Search.style";
    811function Search() {
    … …  
    3235
    3336  return (
    34     <div style={{ position: "relative" }}>
    35       <input
     37    <div
     38      style={{
     39        position: "relative",
     40        width: "fit-content",
     41        float: "right",
     42      }}
     43    >
     44      <SearchSmall
    3645        placeholder="Пребарувај..."
    3746        onChange={(e) => setQuery(e.target.value)}
    3847      />
    39 
    40       {query.length > 2 &&
    41         professors.slice(0, 10).map((professor) => (
    42           <SearchDropdownSmall>
    43             <div key={professor.professorId}>
    44               <SearchDropdownContentSmall weight="bold" size="medium">
    45                 {professor.professorName}
    46               </SearchDropdownContentSmall>
    47               <SearchDropdownContentSmall weight="normal" size="smaller">
    48                 {professor.faculty.facultyName}
    49               </SearchDropdownContentSmall>
    50             </div>
    51           </SearchDropdownSmall>
    52         ))}
     48      <SearchDropdownSmall
     49        display={query.length > 2 && professors.length > 0 ? "block" : "none"}
     50      >
     51        {query.length > 2 &&
     52          professors.slice(0, 7).map((professor) => (
     53            <SearchDropdownResultSmall key={professor.professorId}>
     54              <SearchDropdownResultLinkSmall
     55                href={"/professor/" + professor.professorId}
     56              >
     57                <SearchDropdownTextSmall weight="bold" size="medium">
     58                  {professor.professorName}
     59                </SearchDropdownTextSmall>
     60                <SearchDropdownTextSmall weight="normal" size="smaller">
     61                  {professor.faculty.facultyName}
     62                </SearchDropdownTextSmall>
     63              </SearchDropdownResultLinkSmall>
     64            </SearchDropdownResultSmall>
     65          ))}
     66      </SearchDropdownSmall>
    5367    </div>
    5468  );
Note: See TracChangeset for help on using the changeset viewer.