Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add start/end date to slider cards #3326

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add start/end date to slider cards #3326

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b0debcb
add start/end date to slider cards
reigj1 Jul 30, 2024
472e9e8
fix ref
reigj1 Aug 8, 2024
06763ef
update new card
reigj1 Aug 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion src/components/LandingPage/Hero/SectionSlider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,34 +9,45 @@ import "slick-carousel/slick/slick-theme.css";
import "./index.css";
import { arrow } from "@floating-ui/react";

/* Dates are in YYYY-MM-DD format
startDate is the first day the slide should be displayed
endDate is the last day the slide should be displayed */
const sliderData = [
{
tagline: "New video series 🍿",
title: "NNS Explained",
description: "Watch now",
image: "/img/home/slider/nns_explained.webp",
link: "https://www.youtube.com/watch?v=1uX-fRgvXjU&list=PLuhDt1vhGcrclxfmztDd6OKE80dnrFmG6",
startDate: "2024-01-01",
endDate: "2024-12-01",
},
{
tagline: "New initiative",
title: "Universal Trusted Credentials",
description: "Read the press release",
image: "/img/home/slider/update_undp_initiative.webp",
link: "https://www.undp.org/policy-centre/singapore/press-releases/undp-partners-dfinity-foundation-enhance-financial-inclusion-msmes",
startDate: "2024-01-01",
endDate: "2024-12-01",
},
{
tagline: "Milestone achieved 🏆",
title: "CYCLOTRON",
description: "On-chain AI Inference",
image: "/img/home/slider/update_ai_milestone.webp",
link: "https://internetcomputer.org/roadmap#Decentralized%20AI-Cyclotron",
startDate: "2024-01-01",
endDate: "2024-12-01",
},
{
tagline: "Milestone Test Phase Live 🟢",
title: "DEUTERIUM",
description: "Chain Fusion supports threshold Schnorr signing.",
image: "/img/home/slider/deuterium_milestone_card.webp",
link: "https://internetcomputer.org/roadmap#Chain%20Fusion-Deuterium",
startDate: "2024-01-01",
endDate: "2024-12-01",
},
];

Expand Down Expand Up @@ -156,6 +167,14 @@ const css = `
export const SectionSlider = () => {
let sliderRef = useRef(null);

const currentDate = new Date();

const filteredSliderData = sliderData.filter((data) => {
const startDate = new Date(data.startDate);
const endDate = new Date(data.endDate);
return currentDate >= startDate && currentDate <= endDate;
});

const settings = {
dots: true,
infinite: true,
Expand Down Expand Up @@ -184,7 +203,7 @@ export const SectionSlider = () => {
<div className="slider-container">
<style>{css}</style>
<Slider ref={(slider) => (sliderRef = slider)} {...settings}>
{sliderData.map((data, index) => (
{filteredSliderData.map((data, index) => (
<article key={index} className="border-box px-3">
<CardWithImage href={data.link} image={data.image}>
<div className="py-5 mr-40">
Expand Down
Loading