fix: add outlined search bar

digitable-lol · Sep 2, 2024 · 4e8153c · 4e8153c
1 parent a5a375d
commit 4e8153c
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 9 deletions.
diff --git a/application/frontend/src/components/SearchBar/SearchBar.styled.ts b/application/frontend/src/components/SearchBar/SearchBar.styled.ts
@@ -5,12 +5,16 @@ import { Grid, IconButton, TextField } from "@mui/material"
 export const SearchContainer = styled(Grid)`
   margin-bottom: 32px;
   align-items: center;
+  width: 100%;
 `
 
-export const SearchInput = styled(TextField)`
+export const StandardSearchInput = styled(TextField)`
   width: 100%;
   .MuiInputBase-root {
     border-bottom: 1px solid #ccc;
+    display: flex;
+    align-items: center;
+    gap: 4px;
     &:hover {
       border-bottom: 1px solid #000;
     }
@@ -26,6 +30,35 @@ export const SearchInput = styled(TextField)`
   }
 `
 
+export const OutlinedSearchInput = styled(TextField)`
+  width: 100%;
+  background-color: rgba(238, 238, 238, 1);
+  border-radius: 28px;
+  .MuiOutlinedInput-root {
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    & fieldset {
+      border-color: transparent;
+    }
+    &:hover fieldset {
+      border-color: transparent;
+    }
+    &.Mui-focused fieldset {
+      border-color: transparent;
+    }
+  }
+`
+
+export const InputAdornmentIcon = styled.div`
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
 export const ClearButton = styled(IconButton)`
   padding: 8px;
   color: #999;

diff --git a/application/frontend/src/components/SearchBar/SearchBar.tsx b/application/frontend/src/components/SearchBar/SearchBar.tsx
@@ -3,30 +3,49 @@ import React from "react"
 import ClearIcon from "@mui/icons-material/Clear"
 import { Grid, InputAdornment } from "@mui/material"
 
-import { ClearButton, SearchContainer, SearchInput } from "./SearchBar.styled"
+import {
+  ClearButton,
+  InputAdornmentIcon,
+  OutlinedSearchInput,
+  SearchContainer,
+  StandardSearchInput,
+} from "./SearchBar.styled"
 
 interface SearchBarProps {
   searchQuery: string
   onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void
   viewMode: "list" | "grid" | "timeline"
   onToggleViewMode: () => void
   onClearSearch: () => void
+  variant?: "standard" | "outlined"
+  startIcon?: React.ReactNode
+  placeholder?: string
 }
 
 export const SearchBar: React.FC<SearchBarProps> = ({
   searchQuery,
   onSearchChange,
   onClearSearch,
+  variant = "standard",
+  startIcon,
+  placeholder = "Search",
 }) => {
+  const InputComponent = variant === "outlined" ? OutlinedSearchInput : StandardSearchInput
+
   return (
     <SearchContainer container spacing={2}>
-      <Grid item xs={12} sm={6}>
-        <SearchInput
-          variant="standard"
-          placeholder="Search reports"
+      <Grid item xs={12}>
+        <InputComponent
+          variant={variant}
+          placeholder={placeholder}
           value={searchQuery}
           onChange={onSearchChange}
           InputProps={{
+            startAdornment: startIcon ? (
+              <InputAdornment position="start">
+                <InputAdornmentIcon>{startIcon}</InputAdornmentIcon>
+              </InputAdornment>
+            ) : null,
             endAdornment: searchQuery ? (
               <InputAdornment position="end">
                 <ClearButton onClick={onClearSearch}>

diff --git a/application/frontend/src/pages/project/Project.tsx b/application/frontend/src/pages/project/Project.tsx
@@ -1,11 +1,13 @@
-import React from "react"
+import React, { useState } from "react"
 
 import HomeIcon from "@mui/icons-material/Home"
+import SearchIcon from "@mui/icons-material/Search"
 
 import settings from "src/assets/settings.svg"
 import { CreateProjectButton } from "src/components/CreateProjectButton"
 import { NavButton } from "src/components/NavButton"
 import { ProjectCard } from "src/components/ProjectCard"
+import { SearchBar } from "src/components/SearchBar"
 
 import {
   Container,
@@ -22,6 +24,20 @@ const projects = [
 ]
 
 export const ProjectPage: React.FC = () => {
+  const [searchQuery, setSearchQuery] = useState<string>("")
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value)
+  }
+
+  const handleClearSearch = () => {
+    setSearchQuery("")
+  }
+
+  const filteredProjects = projects.filter((project) =>
+    project.name.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
   return (
     <Container>
       <NavButton to="/" icon={<HomeIcon fontSize="small" />}>
@@ -37,9 +53,16 @@ export const ProjectPage: React.FC = () => {
           <CreateProjectButton onClick={() => console.log("Create Project")} />
         </CreateProjectContainer>
       </HeaderSection>
-
+      <SearchBar
+        searchQuery={searchQuery}
+        onSearchChange={handleSearchChange}
+        onClearSearch={handleClearSearch}
+        variant="outlined"
+        startIcon={<SearchIcon />}
+        placeholder="Search"
+      />
       <ProjectList>
-        {projects.map((project) => (
+        {filteredProjects.map((project) => (
           <ProjectCard key={project.id} project={project} />
         ))}
       </ProjectList>