{handle}
+{message}
+ +{message}
+ + + ); +} diff --git a/src/components/react/GitHubEvents.module.css b/src/components/react/GitHubEvents.module.css new file mode 100644 index 0000000..93273bd --- /dev/null +++ b/src/components/react/GitHubEvents.module.css @@ -0,0 +1,60 @@ +.github-events-container { + position: relative; + width: 100%; + overflow: hidden; +} + +.event-list { + display: flex; + overflow-x: auto; + gap: var(--pico-grid-column-gap); + padding-bottom: 16px; + scroll-snap-type: x mandatory; + scrollbar-width: none; /* Hide scrollbar for Firefox */ + -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */ +} + +.event-list::-webkit-scrollbar { + display: none; /* Hide scrollbar for Chrome/Safari */ +} + +.button-container { + margin-top: .5rem; + width: 100%; + height: 2rem; + position: relative; +} + +.scroll-button { + position: absolute; + top: 0; + width: 2rem; + height: 2rem; + padding: 0; + color: hsla(0, 0%, 10%, .25); + transition: color 0.3s ease; + background: none; + border: none; + border-radius: 50%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + box-shadow: none; + + &:hover { + color: hsla(0, 0%, 10%, .5); + } + + &:active { + color: hsla(0, 0%, 10%, .65); + } + + &.left { + left: 0; + } + + &.right { + right: 0; + } +} diff --git a/src/components/react/GitHubEvents.tsx b/src/components/react/GitHubEvents.tsx new file mode 100644 index 0000000..9a2114a --- /dev/null +++ b/src/components/react/GitHubEvents.tsx @@ -0,0 +1,125 @@ +import React, { useCallback, useEffect, useRef, useState } from "react"; +import GitHubEventCard from "@/components/react/GitHubEventCard.tsx"; +import { getRecentEvents, type GitHubEvent } from "@/components/react/ghEventsAPI.ts"; +import styles from "./GitHubEvents.module.css"; + +const LeftArrow = () => ( + +); +const RightArrow = () => ( + +); + +type ScrollDirection = "left" | "right"; + +interface ScrollButtonProps { + direction: ScrollDirection; + onClick: (direction: ScrollDirection) => void; +} + +function ScrollButton({ + direction, + onClick }: ScrollButtonProps) +{ + const Label = direction === "left" + ? LeftArrow + : RightArrow; + + return ( + + ); +} + +interface GitHubEventsProps { + org: string; +} + +export default function GitHubEvents({ + org }: GitHubEventsProps) +{ + const [events, setEvents] = useState+ We are a welcoming and inclusive volunteer group of developers, designers, + data geeks, and citizen activists who use creative technology to solve civic + and social problems. +
++ Get Started +
+ +