created Filter component

calblueprint · Nov 12, 2024 · dfa6c56 · dfa6c56
1 parent ca665bc
commit dfa6c56
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 42 deletions.
diff --git a/components/Filter/index.tsx b/components/Filter/index.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import TechnologyDropdown from '@/components/TechnologyDropdown';
+import { Filters, FilterType } from '@/types/schema';
+import { DropIcon } from '../../assets/Dropdown-Icons/icons';
+import {
+  FilterBackgroundStyles,
+  FilterButtonStyles,
+  IconStyle,
+} from './styles';
+
+interface FilterProps {
+  filter: FilterType;
+  isActive: boolean;
+  selectedFilters: Filters;
+  onTechnologyChange: (options: string[]) => void;
+  handleButtonClick: (filter: FilterType) => void;
+}
+
+export default function Filter({
+  filter,
+  isActive,
+  selectedFilters,
+  onTechnologyChange,
+  handleButtonClick,
+}: FilterProps) {
+  return (
+    <FilterBackgroundStyles isActive={isActive}>
+      {isActive ? (
+        filter.id === 'technology' ? (
+          <TechnologyDropdown
+            selectedTechnologies={selectedFilters.technology}
+            setSelectedTechnologies={onTechnologyChange}
+            handleButtonClick={handleButtonClick}
+            icon={filter.icon}
+            label={filter.label}
+            currFilter={filter}
+          />
+        ) : // Add other filter dropdown components here
+        null
+      ) : (
+        <FilterButtonStyles onClick={() => handleButtonClick(filter)}>
+          <IconStyle>{filter.icon}</IconStyle>
+          {filter.label}
+          <DropIcon />
+        </FilterButtonStyles>
+      )}
+    </FilterBackgroundStyles>
+  );
+}
diff --git a/components/Filter/styles.ts b/components/Filter/styles.ts
@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import { FilterHeadingUnused } from '@/styles/texts';
+
+export const FilterBackgroundStyles = styled.div<{ isActive: boolean }>`
+  margin-right: 2%;
+  top: 1.5%;
+  right: 1.5%;
+  background: linear-gradient(
+    180deg,
+    rgba(250, 250, 250, 0.32) 0%,
+    rgba(238, 238, 238, 0.65) 100%
+  );
+  backdrop-filter: blur(7.5px);
+  padding: 0.35rem 0.35rem;
+  z-index: 5;
+  border: 0.05rem solid #fff;
+  margin-top: 1.5%;
+  max-height: ${({ isActive }) => (isActive ? 'auto' : '2rem')};
+  border-radius: ${({ isActive }) => (isActive ? '0.5rem' : '6.25rem')};
+  transition: height 0.5s ease-in-out;
+`;
+
+export const FilterButtonStyles = styled.button`
+  ${FilterHeadingUnused}
+  position: relative;
+  background: #fff;
+  border: none;
+  border-radius: 6.25rem;
+  cursor: pointer;
+  line-height: normal;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  color: rgba(46, 58, 89, 0.85);
+`;
+
+export const IconStyle = styled.div`
+  align-self: center;
+  width: 0.8rem;
+  height: 0.8rem;
+`;
diff --git a/components/FilterBar/index.tsx b/components/FilterBar/index.tsx
@@ -1,22 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import TechnologyDropdown from '@/components/TechnologyDropdown';
-import { Filter, Filters } from '@/types/schema';
-import { DropIcon } from '../../assets/Dropdown-Icons/icons';
-import {
-  FilterBackgroundStyles,
-  FilterButtonStyles,
-  FilterContainerStyles,
-  IconStyle,
-} from './styles';
+import Filter from '@/components/Filter';
+import { Filters, FilterType } from '@/types/schema';
+import { FilterContainerStyles } from './styles';
 
 export const FilterBar = ({
   filters,
   onFilterChange,
 }: {
-  filters: Filter[];
-  onFilterChange: (filter: Filter) => void;
+  filters: FilterType[];
+  onFilterChange: (filter: FilterType) => void;
 }) => {
-  const [activeFilter, setActiveFilter] = useState<Filter | null>(null);
+  const [activeFilter, setActiveFilter] = useState<FilterType | null>(null);
 
   const [selectedFilters, setSelectedFilters] = useState<Filters>({
     statusCompleted: false,
@@ -25,7 +19,7 @@ export const FilterBar = ({
     location: [],
   });
 
-  const handleButtonClick = (filter: Filter) => {
+  const handleButtonClick = (filter: FilterType) => {
     setActiveFilter(activeFilter?.id === filter.id ? null : filter);
     onFilterChange(filter);
   };
@@ -43,30 +37,14 @@ export const FilterBar = ({
   return (
     <FilterContainerStyles>
       {filters.map(filter => (
-        <FilterBackgroundStyles
+        <Filter
           key={filter.label}
+          filter={filter}
           isActive={activeFilter?.id === filter.id}
-        >
-          {/* Create rest of filter dropdowns in here */}
-          {activeFilter?.id === filter.id ? (
-            filter.id === 'technology' ? (
-              <TechnologyDropdown
-                selectedTechnologies={selectedFilters.technology}
-                setSelectedTechnologies={handleTechnologyChange}
-                handleButtonClick={handleButtonClick}
-                icon={filter.icon}
-                label={filter.label}
-                currFilter={filter}
-              />
-            ) : null
-          ) : (
-            <FilterButtonStyles onClick={() => handleButtonClick(filter)}>
-              <IconStyle>{filter.icon}</IconStyle>
-              {filter.label}
-              <DropIcon />
-            </FilterButtonStyles>
-          )}
-        </FilterBackgroundStyles>
+          selectedFilters={selectedFilters}
+          onTechnologyChange={handleTechnologyChange}
+          handleButtonClick={handleButtonClick}
+        />
       ))}
     </FilterContainerStyles>
   );

diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx
@@ -7,11 +7,11 @@ import {
 import { FilterBar } from '@/components/FilterBar';
 import Map from '@/components/Map';
 import { SearchBar } from '@/components/SearchBar';
-import { Filter } from '@/types/schema';
+import { FilterType } from '@/types/schema';
 import { Project } from '../../types/schema';
 
 export default function MapViewScreen(props: { projects: Project[] | null }) {
-  const filters: Filter[] = [
+  const filters: FilterType[] = [
     {
       id: 'status',
       label: 'STATUS',
@@ -34,7 +34,7 @@ export default function MapViewScreen(props: { projects: Project[] | null }) {
     },
   ];
 
-  const handleFilterChange = (filter: Filter) => {
+  const handleFilterChange = (filter: FilterType) => {
     console.log(filter);
   };
 

diff --git a/components/TechnologyDropdown/index.tsx b/components/TechnologyDropdown/index.tsx
@@ -1,4 +1,4 @@
-import { Filter } from '@/types/schema';
+import { FilterType } from '@/types/schema';
 import { ExitIcon } from '../../assets/Dropdown-Icons/icons';
 import {
   EnergyStorageIcon,
@@ -26,10 +26,10 @@ import {
 interface TechnologyDropdownProps {
   selectedTechnologies: string[];
   setSelectedTechnologies: (technologies: string[]) => void;
-  handleButtonClick: (filter: Filter) => void;
+  handleButtonClick: (filter: FilterType) => void;
   icon: React.ReactNode;
   label: string;
-  currFilter: Filter;
+  currFilter: FilterType;
 }
 
 export default function TechnologyDropdown({

diff --git a/types/schema.d.ts b/types/schema.d.ts
@@ -27,7 +27,7 @@ export interface Option {
   icon: React.ReactNode;
 }
 
-export interface Filter {
+export interface FilterType {
   id: string;
   label: string;
   icon: React.ReactNode;