aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-02-02 13:14:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: update header content based on filters

Browse Source
This commit is contained in:
MTG2000
2022-10-25 18:40:30 +03:00
parent a6ee3138ab
commit 5dc4ed058d
4 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/features/Projects/Components/Categories/Categories.tsx
View File

@@ -56,13 +56,11 @@ export default function Categories(props: Props) {
props.onChange?.(null)
}}
className={`
text-center flex flex-wrap gap-8 flex-col justify-end font-medium hover:bg-gray-100 active:bg-gray-200 rounded-t-8 px-16 py-16 min-w-max
text-center flex flex-wrap gap-8 flex-col justify-end items-center font-medium hover:bg-gray-100 active:bg-gray-200 rounded-t-8 px-16 py-16 min-w-max
${props.value === null ? "text-primary-500 border-b-2 border-primary-500" : "text-gray-500"}
`}
>{props.filtersActive ? "Search results" : "All projects"}</button>
><i className={props.filtersActive ? "fa-solid fa-search" : "fa-solid fa-table-cells-large"}></i> <span className='w-full'>{props.filtersActive ? "Search results" : "All projects"}</span></button>
{data.categoryList?.filter(v => !!v?.projectsCount && v.projectsCount !== '0').map((category, idx) => {
if (category?.icon)
console.log(category?.icon);
return <button
key={category!.id}
@@ -74,7 +72,7 @@ export default function Categories(props: Props) {
text-center flex flex-wrap gap-8 flex-col justify-end items-center font-medium hover:bg-gray-100 active:bg-gray-200 rounded-t-8 px-8 py-16 min-w-max
${props.value?.id === category?.id ? "text-primary-500 border-b-2 border-primary-500" : "text-gray-500"}
`}
><i className={category?.icon ? `fa-regular fa-${category.icon}` : "fa-regular fa-circle-question"}></i> <span className='w-full'>{category!.name} ({category?.projectsCount!})</span></button>
><i className={category?.icon ? `fa-solid fa-${category.icon}` : "fa-regular fa-circle-question"}></i> <span className='w-full'>{category!.name} ({category?.projectsCount!})</span></button>
}
)}
</div>

4
src/features/Projects/pages/ExplorePage/ExplorePage.tsx
View File

@@ -156,7 +156,7 @@ function ExplorePage() {
<meta property="og:title" content={`Lightning Landscape`} />
</Helmet>
<Header
category={selectedCategory}
selectedCategry={selectedCategory}
/>
<div className="content-container mt-16">
<div className="grid grid-cols-1 md:grid-cols-[1fr_auto] items-center gap-x-32 gap-y-16">
@@ -167,7 +167,7 @@ function ExplorePage() {
color='white'
onClick={openFilters}>
<FiSliders className="scale-150 mr-12" />
<span className='align-middle'>Filters</span>
<span className='align-middle'>Filter</span>
</Button>
</div>
</div>

39
src/features/Projects/pages/ExplorePage/Header/Header.tsx
View File

@@ -10,17 +10,25 @@ import { PAGES_ROUTES } from 'src/utils/routing'
import { useProjectsFilters } from '../filters-context'
type Props = {
category: Category | null
selectedCategry: Category | null
}
export default function Header(props: Props) {
let title = "Discover 1,592 lightning projects"
if (props.category?.name) title = `${props.category.projectsCount} projects`;
const { filters, filtersEmpty, removeFilter } = useProjectsFilters();
const { filters, removeFilter } = useProjectsFilters();
const onCategoryPage = !!props.selectedCategry?.name;
const onSearchPage = !onCategoryPage && !filtersEmpty
const title = onCategoryPage ? `${props.selectedCategry?.projectsCount} projects` :
filtersEmpty ? "Discover 1,592 lightning projects" : "Search results";
const subtitle = onCategoryPage ? props.selectedCategry?.name :
filtersEmpty ? "Explore a directory of lightning startups, projects, and companies"
: ""
return (
@@ -37,18 +45,19 @@ export default function Header(props: Props) {
<h1
className='text-primary-500 text-h1 font-medium'
>{title}</h1>
{props.category?.name ?
<p className="text-gray-600 font-medium text-body1">{props.category?.name}</p>
:
<p className="text-gray-600 font-medium text-body2">Explore a directory of lightning startups, projects, and companies</p>
{subtitle &&
<p className="text-gray-600 font-medium text-body1">{subtitle}</p>
}
<div className="flex gap-8 flex-wrap mt-24">
{filters?.yearFounded && <Badge size='sm'>Founded in: <span className='font-bold'>{filters.yearFounded}</span> <button onClick={() => removeFilter("yearFounded")} className='ml-8 hover:scale-125'><MdClose /></button> </Badge>}
{filters?.projectStatus && <Badge size='sm'>Status: <span className='font-bold'>{filters?.projectStatus}</span> <button onClick={() => removeFilter("projectStatus")} className='ml-8 hover:scale-125'><MdClose /></button> </Badge>}
{filters?.projectLicense && <Badge size='sm'>License: <span className='font-bold'>{filters.projectLicense}</span> <button onClick={() => removeFilter("projectLicense")} className='ml-8 hover:scale-125'><MdClose /></button> </Badge>}
{filters?.categories && filters.categories.length > 0 && <Badge size='sm'>Category: <span className='font-bold'>{filters.categories[0].label}</span> <button onClick={() => removeFilter("categories")} className='ml-8 hover:scale-125'><MdClose /></button> </Badge>}
{filters?.tags && filters.tags.length > 0 && <Badge size='sm'>Tags: <span className='font-bold'>{filters.tags.map(t => t.label).join(', ')}</span> <button onClick={() => removeFilter("tags")} className='ml-8 hover:scale-125'><MdClose /></button> </Badge>}
</div>
{onSearchPage && <div className=" ">
<p className="text-gray-500 font-medium text-body4 mb-24 text-center">filtered by</p>
<div className="flex gap-8 flex-wrap">
{filters?.yearFounded && <Badge size='sm'>📆 Founded in <span className='font-bold text-gray-700'>{filters.yearFounded}</span> <button onClick={() => removeFilter("yearFounded")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
{filters?.projectStatus && <Badge size='sm'>🌱 Status: <span className='font-bold text-gray-700'>{filters?.projectStatus}</span> <button onClick={() => removeFilter("projectStatus")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
{filters?.projectLicense && <Badge size='sm'>💻 License: <span className='font-bold text-gray-700'>{filters.projectLicense}</span> <button onClick={() => removeFilter("projectLicense")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
{filters?.categories && filters.categories.length > 0 && <Badge size='sm'>Category: <span className='font-bold text-gray-700'>{filters.categories[0].label}</span> <button onClick={() => removeFilter("categories")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
{filters?.tags && filters.tags.length > 0 && <Badge size='sm'>Tags: <span className='font-bold text-gray-700'>{filters.tags.map(t => t.label).join(', ')}</span> <button onClick={() => removeFilter("tags")} className='ml-4 text-gray-600 hover:scale-125'><MdClose /></button> </Badge>}
</div>
</div>}
</div>
)
}

5
src/features/Projects/pages/ExplorePage/filters-context.tsx
View File

@@ -5,6 +5,7 @@ import { getFiltersFromUrl, removeEmptyFitlers } from "./helpers";
interface State {
filters: Partial<ProjectsFilters> | null,
filtersEmpty: boolean
updateFilters: (value: Partial<ProjectsFilters>) => void,
removeFilter: (filter: keyof ProjectsFilters) => void
}
@@ -28,7 +29,9 @@ export const ProjectsFiltersProvider = (props: PropsWithChildren<Props>) => {
setFilters(res);
}, [filters]);
return <context.Provider value={{ filters, updateFilters, removeFilter }}>
const filtersEmpty = Object.keys(filters ?? {}).length === 0;
return <context.Provider value={{ filters, filtersEmpty, updateFilters, removeFilter }}>
{props.children}
</context.Provider>
}