From dfa6c567ebfa1574898668b381c648ea35ad0699 Mon Sep 17 00:00:00 2001 From: Ethan Tam Date: Tue, 12 Nov 2024 14:42:46 -0800 Subject: [PATCH] created Filter component --- components/Filter/index.tsx | 49 +++++++++++++++++++++++++ components/Filter/styles.ts | 42 +++++++++++++++++++++ components/FilterBar/index.tsx | 48 +++++++----------------- components/MapViewScreen/index.tsx | 6 +-- components/TechnologyDropdown/index.tsx | 6 +-- types/schema.d.ts | 2 +- 6 files changed, 111 insertions(+), 42 deletions(-) create mode 100644 components/Filter/index.tsx create mode 100644 components/Filter/styles.ts diff --git a/components/Filter/index.tsx b/components/Filter/index.tsx new file mode 100644 index 0000000..aa56742 --- /dev/null +++ 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 ( + + {isActive ? ( + filter.id === 'technology' ? ( + + ) : // Add other filter dropdown components here + null + ) : ( + handleButtonClick(filter)}> + {filter.icon} + {filter.label} + + + )} + + ); +} diff --git a/components/Filter/styles.ts b/components/Filter/styles.ts new file mode 100644 index 0000000..cf88953 --- /dev/null +++ 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 index de9d3b3..4fdd551 100644 --- 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(null); + const [activeFilter, setActiveFilter] = useState(null); const [selectedFilters, setSelectedFilters] = useState({ 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 ( {filters.map(filter => ( - - {/* Create rest of filter dropdowns in here */} - {activeFilter?.id === filter.id ? ( - filter.id === 'technology' ? ( - - ) : null - ) : ( - handleButtonClick(filter)}> - {filter.icon} - {filter.label} - - - )} - + selectedFilters={selectedFilters} + onTechnologyChange={handleTechnologyChange} + handleButtonClick={handleButtonClick} + /> ))} ); diff --git a/components/MapViewScreen/index.tsx b/components/MapViewScreen/index.tsx index 7790931..f0d0fb0 100644 --- 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 index 1ae2071..ef0c424 100644 --- 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 index e134014..a685b60 100644 --- 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;