From 15efa2ab76d5764f72688745fb64a0ddf71cd7ea Mon Sep 17 00:00:00 2001 From: WeiLun Date: Thu, 5 Dec 2024 20:00:11 +0800 Subject: [PATCH] Upload EventDayCounter --- src/app/testing/page.tsx | 3 + .../Event Day Counter/EventDayCounter.json | 6 + .../Event Day Counter/EventDayCounter.tsx | 117 ++++++++++++++++++ .../EventDayCounter/EventDayCounter.json | 6 + .../EventDayCounter/EventDayCounter.tsx | 117 ++++++++++++++++++ src/data/EventDayCounter.json | 7 ++ 6 files changed, 256 insertions(+) create mode 100644 src/components/widgets/Event Day Counter/EventDayCounter.json create mode 100644 src/components/widgets/Event Day Counter/EventDayCounter.tsx create mode 100644 src/components/widgets/EventDayCounter/EventDayCounter.json create mode 100644 src/components/widgets/EventDayCounter/EventDayCounter.tsx create mode 100644 src/data/EventDayCounter.json diff --git a/src/app/testing/page.tsx b/src/app/testing/page.tsx index 54f2dd8..82bfd6d 100644 --- a/src/app/testing/page.tsx +++ b/src/app/testing/page.tsx @@ -1,5 +1,7 @@ "use client"; +import Countdown from "@/components/widgets/Event Day Counter/Event Day Counter"; + export default function TestingPage() { return ( <> @@ -8,6 +10,7 @@ export default function TestingPage() {

This is the testing page for Weejets.

Just import your created widget here for testing.

+ ) diff --git a/src/components/widgets/Event Day Counter/EventDayCounter.json b/src/components/widgets/Event Day Counter/EventDayCounter.json new file mode 100644 index 0000000..0560f3f --- /dev/null +++ b/src/components/widgets/Event Day Counter/EventDayCounter.json @@ -0,0 +1,6 @@ +{ + "id": "EventDayCounter", + "title": "EventDayCounter", + "description": "this is an event day counter", + "author": "Teoh Wei Lun" +} \ No newline at end of file diff --git a/src/components/widgets/Event Day Counter/EventDayCounter.tsx b/src/components/widgets/Event Day Counter/EventDayCounter.tsx new file mode 100644 index 0000000..5e45aa1 --- /dev/null +++ b/src/components/widgets/Event Day Counter/EventDayCounter.tsx @@ -0,0 +1,117 @@ +import React, { useState, useEffect } from "react"; + +interface Event { + id: number; + title: string; + date: string; // Use ISO format (e.g., "2024-12-25") +} + +const Countdown: React.FC = () => { + const events: Event[] = [ + { id: 1, title: "Christmas", date: "2024-12-25" }, + { id: 2, title: "New Year", date: "2025-01-01" }, + { id: 3, title: "My Birthday", date: "2025-03-15" }, + ]; + + const calculateDaysLeft = (eventDate: string): number => { + const now = new Date(); + const event = new Date(eventDate); + const difference = event.getTime() - now.getTime(); + return Math.ceil(difference / (1000 * 60 * 60 * 24)); + }; + + const [countdownData, setCountdownData] = useState( + events.map(event => ({ + ...event, + daysLeft: calculateDaysLeft(event.date), + })) + ); + + useEffect(() => { + const interval = setInterval(() => { + setCountdownData(prevData => + prevData.map(event => ({ + ...event, + daysLeft: calculateDaysLeft(event.date), + })) + ); + }, 1000 * 60 * 60 * 24); + + return () => clearInterval(interval); + }, [events]); + + const styles = { + container: { + fontFamily: "Arial, sans-serif", + textAlign: "center" as const, + padding: "20px", + backgroundColor: "#f4f4f9", + minHeight: "100vh", + }, + title: { + fontSize: "2.5rem", + color: "#333", + marginBottom: "20px", + }, + list: { + listStyleType: "none" as const, + padding: 0, + display: "flex", + flexDirection: "column" as const, + alignItems: "center", + }, + listItem: { + backgroundColor: "#ffffff", + border: "1px solid #ddd", + borderRadius: "10px", + padding: "15px 20px", + margin: "10px 0", + width: "90%", + maxWidth: "400px", + boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", + transition: "transform 0.2s, box-shadow 0.2s", + }, + listItemHover: { + transform: "scale(1.05)", + boxShadow: "0 6px 10px rgba(0, 0, 0, 0.15)", + }, + eventTitle: { + fontSize: "1.5rem", + color: "#555", + marginBottom: "5px", + }, + eventDays: { + fontSize: "1rem", + color: "#888", + }, + }; + + return ( +
+

Event Countdown

+
    + {countdownData.map(event => ( +
  • + (e.currentTarget.style.transform = styles.listItemHover.transform!) + } + onMouseLeave={e => (e.currentTarget.style.transform = "scale(1)")} + > +

    {event.title}

    +

    + {event.daysLeft > 0 + ? `${event.daysLeft} day(s) left` + : event.daysLeft === 0 + ? "Today!" + : "Event has passed"} +

    +
    • + ))} +
+
+ ); +}; + +export default Countdown; diff --git a/src/components/widgets/EventDayCounter/EventDayCounter.json b/src/components/widgets/EventDayCounter/EventDayCounter.json new file mode 100644 index 0000000..0b29cd9 --- /dev/null +++ b/src/components/widgets/EventDayCounter/EventDayCounter.json @@ -0,0 +1,6 @@ +{ + "id": "EventDayCounter", + "title": "EventDayCounter", + "description": "EventDayCounter", + "author": "Teoh Wei Lun" +} \ No newline at end of file diff --git a/src/components/widgets/EventDayCounter/EventDayCounter.tsx b/src/components/widgets/EventDayCounter/EventDayCounter.tsx new file mode 100644 index 0000000..5e45aa1 --- /dev/null +++ b/src/components/widgets/EventDayCounter/EventDayCounter.tsx @@ -0,0 +1,117 @@ +import React, { useState, useEffect } from "react"; + +interface Event { + id: number; + title: string; + date: string; // Use ISO format (e.g., "2024-12-25") +} + +const Countdown: React.FC = () => { + const events: Event[] = [ + { id: 1, title: "Christmas", date: "2024-12-25" }, + { id: 2, title: "New Year", date: "2025-01-01" }, + { id: 3, title: "My Birthday", date: "2025-03-15" }, + ]; + + const calculateDaysLeft = (eventDate: string): number => { + const now = new Date(); + const event = new Date(eventDate); + const difference = event.getTime() - now.getTime(); + return Math.ceil(difference / (1000 * 60 * 60 * 24)); + }; + + const [countdownData, setCountdownData] = useState( + events.map(event => ({ + ...event, + daysLeft: calculateDaysLeft(event.date), + })) + ); + + useEffect(() => { + const interval = setInterval(() => { + setCountdownData(prevData => + prevData.map(event => ({ + ...event, + daysLeft: calculateDaysLeft(event.date), + })) + ); + }, 1000 * 60 * 60 * 24); + + return () => clearInterval(interval); + }, [events]); + + const styles = { + container: { + fontFamily: "Arial, sans-serif", + textAlign: "center" as const, + padding: "20px", + backgroundColor: "#f4f4f9", + minHeight: "100vh", + }, + title: { + fontSize: "2.5rem", + color: "#333", + marginBottom: "20px", + }, + list: { + listStyleType: "none" as const, + padding: 0, + display: "flex", + flexDirection: "column" as const, + alignItems: "center", + }, + listItem: { + backgroundColor: "#ffffff", + border: "1px solid #ddd", + borderRadius: "10px", + padding: "15px 20px", + margin: "10px 0", + width: "90%", + maxWidth: "400px", + boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", + transition: "transform 0.2s, box-shadow 0.2s", + }, + listItemHover: { + transform: "scale(1.05)", + boxShadow: "0 6px 10px rgba(0, 0, 0, 0.15)", + }, + eventTitle: { + fontSize: "1.5rem", + color: "#555", + marginBottom: "5px", + }, + eventDays: { + fontSize: "1rem", + color: "#888", + }, + }; + + return ( +
+

Event Countdown

+
    + {countdownData.map(event => ( +
  • + (e.currentTarget.style.transform = styles.listItemHover.transform!) + } + onMouseLeave={e => (e.currentTarget.style.transform = "scale(1)")} + > +

    {event.title}

    +

    + {event.daysLeft > 0 + ? `${event.daysLeft} day(s) left` + : event.daysLeft === 0 + ? "Today!" + : "Event has passed"} +

    +
    • + ))} +
+
+ ); +}; + +export default Countdown; diff --git a/src/data/EventDayCounter.json b/src/data/EventDayCounter.json new file mode 100644 index 0000000..fee97ab --- /dev/null +++ b/src/data/EventDayCounter.json @@ -0,0 +1,7 @@ +{ + "id": "EventDayCounter", + "title": "EventDayCounter", + "description": "EventDayCounter", + "author": "Teoh Wei Lun", + "code": "/widgets/EventDayCounter/EventDayCounter.tsx" +} \ No newline at end of file