Skip to content

Commit

Permalink
Merge pull request #34 from celestiaorg/hotfix/ecosystem-show-all-tags
Browse files Browse the repository at this point in the history 
Fix ecosystem show all tags
  • Loading branch information
@gabros20
gabros20 authored Jan 10, 2025
2 parents 6692120 + 1088795 commit 0195824
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 134 deletions.
65 changes: 31 additions & 34 deletions src/app/ecosystem/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,39 +10,36 @@ import seo from "@/data/ecosystem/seo";
export const metadata = meta(seo);

export default async function Ecosystem() {
return (
<>
<SecondaryHero
title={"Celestia Ecosystem"}
subtitle={
"Discover a wide range of apps and services built in the Celestia ecosystem."
}
videos={{
src: {
xl: "/videos/hero/ecosystem-desktop_xl.mp4",
lg: "/videos/hero/ecosystem-desktop_lg.mp4",
sm: "/videos/hero/ecosystem-mobile_sm.mp4",
},
poster: {
lg: "/videos/hero/ecosystem-desktop_xl_poster.jpg",
sm: "/videos/hero/ecosystem-mobile_sm_poster.jpg",
},
}}
/>
<div id="projects">
<ProjectFilter
title={"Start exploring"}
description={
"Discover a wide range of apps and services built in the Celestia ecosystem."
}
filters={getFilterOptions(ecosystemItems, "categories")}
filterTarget={"categories"}
items={ecosystemItems}
showCategoriesOnCard
/>
</div>
return (
<>
<SecondaryHero
title={"Celestia Ecosystem"}
subtitle={"Discover a wide range of apps and services built in the Celestia ecosystem."}
videos={{
src: {
xl: "/videos/hero/ecosystem-desktop_xl.mp4",
lg: "/videos/hero/ecosystem-desktop_lg.mp4",
sm: "/videos/hero/ecosystem-mobile_sm.mp4",
},
poster: {
lg: "/videos/hero/ecosystem-desktop_xl_poster.jpg",
sm: "/videos/hero/ecosystem-mobile_sm_poster.jpg",
},
}}
/>
<div id='projects'>
<ProjectFilter
title={"Start exploring"}
description={"Discover a wide range of apps and services built in the Celestia ecosystem."}
filters={getFilterOptions(ecosystemItems, "categories")}
filterTarget={"categories"}
items={ecosystemItems}
showCategoriesOnCard
filtersToShow={999}
/>
</div>

<GetInTouch />
</>
);
<GetInTouch />
</>
);
}
188 changes: 88 additions & 100 deletions src/components/ProjectFilter/ProjectFilter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,110 +10,98 @@ import Sticky from "react-stickynode";

import { useScrollPosition } from "@/utils/scrollLock";

const ProjectFilter = ({
id,
title,
description,
filters,
filterTarget,
filtersToShow = 5,
items,
showCategoriesOnCard = false,
}) => {
const [currentFilter, setCurrentFilter] = useState(null);
const [filteredProjects, setFilteredProjects] = useState(items);
const [isDesktop, setIsDesktop] = useState(false);
let parentRef = useRef(null);
const { navHeights } = useScrollPosition();
const ProjectFilter = ({ id, title, description, filters, filterTarget, filtersToShow = 5, items, showCategoriesOnCard = false }) => {
const [currentFilter, setCurrentFilter] = useState(null);
const [filteredProjects, setFilteredProjects] = useState(items);
const [isDesktop, setIsDesktop] = useState(false);
let parentRef = useRef(null);
const { navHeights } = useScrollPosition();

let setFilter = (filter) => {
window.scrollTo(
0,
parentRef.current.offsetTop - navHeights.primary - navHeights.secondary
);
setCurrentFilter(filter);
};
let setFilter = (filter) => {
window.scrollTo(0, parentRef.current.offsetTop - navHeights.primary - navHeights.secondary);
setCurrentFilter(filter);
};

// Filter projects based on the current filter
useEffect(() => {
if (currentFilter === null) {
setFilteredProjects(items);
} else {
const filteredProjects = items.filter((item) => {
const filterValue = item[filterTarget];
if (Array.isArray(filterValue)) {
return filterValue.includes(currentFilter);
} else {
return filterValue === currentFilter;
}
});
setFilteredProjects(filteredProjects);
}
}, [currentFilter, filterTarget, items]);
// Filter projects based on the current filter
useEffect(() => {
if (currentFilter === null) {
setFilteredProjects(items);
} else {
const filteredProjects = items.filter((item) => {
const filterValue = item[filterTarget];
if (Array.isArray(filterValue)) {
return filterValue.includes(currentFilter);
} else {
return filterValue === currentFilter;
}
});
setFilteredProjects(filteredProjects);
}
}, [currentFilter, filterTarget, items]);

// Check if the user is on a desktop device
useEffect(() => {
const handleResize = () => {
if (window.innerWidth > 768) {
setIsDesktop(true);
} else {
setIsDesktop(false);
}
};
handleResize();
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
// Check if the user is on a desktop device
useEffect(() => {
const handleResize = () => {
if (window.innerWidth > 768) {
setIsDesktop(true);
} else {
setIsDesktop(false);
}
};
handleResize();
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);

return (
<>
<section id={id} ref={parentRef}>
<Container size="md" className="">
<Row className={" lg:gap-10"}>
<Col width={40} className="relative">
<Sticky
enabled={isDesktop}
top={navHeights.primary + navHeights.secondary}
bottomBoundary={`#sticky-boundary-${id ? id : "bottom"}`}
>
<div className={"pt-10 lg:py-20"}>
<Display size={"sm"} tag={"h2"} className={"mb-4"}>
{title}
</Display>
<Body size={"md"} className={"lg:mb-10"}>
{description}
</Body>
{filters?.length > 0 && filterTarget && (
<FilterNavigation
currentFilter={currentFilter}
setFilter={setFilter}
filterCategories={filters}
filtersToShow={filtersToShow}
/>
)}
</div>
</Sticky>
</Col>
<Col width={60} className="pb-10 lg:py-20">
<AnimatePresence>
{filteredProjects.map((item, index) => (
<ProjectCard
key={`project-${index}`}
title={item.title}
description={item.description}
url={item.url || null} // If no URL is provided, remove hover effect
image={item.image}
categories={showCategoriesOnCard ? item.categories : []}
/>
))}
</AnimatePresence>
</Col>
</Row>
</Container>
</section>
<div id={`sticky-boundary-${id ? id : "bottom"}`} />
</>
);
return (
<>
<section id={id} ref={parentRef}>
<Container size='md' className=''>
<Row className={" lg:gap-10"}>
<Col width={40} className='relative'>
<Sticky
enabled={isDesktop}
top={navHeights.primary + navHeights.secondary}
bottomBoundary={`#sticky-boundary-${id ? id : "bottom"}`}
>
<div className={"pt-10 lg:py-20"}>
<Display size={"sm"} tag={"h2"} className={"mb-4"}>
{title}
</Display>
<Body size={"md"} className={"lg:mb-10"}>
{description}
</Body>
{filters?.length > 0 && filterTarget && (
<FilterNavigation
currentFilter={currentFilter}
setFilter={setFilter}
filterCategories={filters}
filtersToShow={filtersToShow}
/>
)}
</div>
</Sticky>
</Col>
<Col width={60} className='pb-10 lg:py-20'>
<AnimatePresence>
{filteredProjects.map((item, index) => (
<ProjectCard
key={`project-${index}`}
title={item.title}
description={item.description}
url={item.url || null} // If no URL is provided, remove hover effect
image={item.image}
categories={showCategoriesOnCard ? item.categories : []}
/>
))}
</AnimatePresence>
</Col>
</Row>
</Container>
</section>
<div id={`sticky-boundary-${id ? id : "bottom"}`} />
</>
);
};

export default ProjectFilter;

0 comments on commit 0195824

Please sign in to comment.