Add RSS link

Author: hasparus

src/app/(main)/community/events/events-list.tsx

@@ -66,9 +66,11 @@ const ALL_SHOWN = {
 export function EventsList({
   events,
   className,
+  children,
 }: {
   events: AnyEvent[]
   className?: string
+  children?: React.ReactNode
 }) {
   const [kindFilters, setKindFilters] = useState(ALL_SHOWN)
 
@@ -104,28 +106,31 @@ export function EventsList({
 
   return (
     <div className={className}>
-      <fieldset className="mb-8">
-        <legend className="typography-menu mt-2">Event type</legend>
-        <div className="mt-4 flex gap-3">
-          {Array.from(tags).map(tag => (
-            <EventFilterTag
-              key={tag}
-              kind={tag}
-              checked={kindFilters[tag]}
-              disabled={
-                Object.values(kindFilters).filter(Boolean).length === 1 &&
-                kindFilters[tag]
-              }
-              onChange={event => {
-                setKindFilters(prev => ({
-                  ...prev,
-                  [tag]: event.target.checked,
-                }))
-              }}
-            />
-          ))}
-        </div>
-      </fieldset>
+      <div className="mb-8 flex items-end justify-between">
+        <fieldset>
+          <legend className="typography-menu mt-2">Event type</legend>
+          <div className="mt-4 flex gap-3">
+            {Array.from(tags).map(tag => (
+              <EventFilterTag
+                key={tag}
+                kind={tag}
+                checked={kindFilters[tag]}
+                disabled={
+                  Object.values(kindFilters).filter(Boolean).length === 1 &&
+                  kindFilters[tag]
+                }
+                onChange={event => {
+                  setKindFilters(prev => ({
+                    ...prev,
+                    [tag]: event.target.checked,
+                  }))
+                }}
+              />
+            ))}
+          </div>
+        </fieldset>
+        {children}
+      </div>
       <EventsScrollview>
         {events.map(event =>
           "node" in event ? (

src/app/(main)/community/events/page.tsx

@@ -9,6 +9,7 @@ import { BenefitsSection } from "./benefits-section"
 import { GetYourMeetupNoticedSection } from "./get-your-meetup-noticed-section"
 import { BringGraphQLToYourCommunity } from "./bring-graphql-to-your-community"
 import { getAllEvents } from "./get-all-events"
+import { SubscribeToRssLink } from "./subscribe-to-rss-link"
 
 const ISSUE_TEMPLATE_LINK =
   "https://github.com/graphql/community-wg/issues/new?assignees=&labels=event&template=event-submission.yml"
@@ -67,7 +68,9 @@ export default async function EventsPage() {
               Add a new event
             </Button>
           </header>
-          <EventsList events={upcomingEvents} />
+          <EventsList events={upcomingEvents}>
+            <SubscribeToRssLink />
+          </EventsList>
         </section>
       )}
 

src/app/(main)/community/events/rss.png

@@ -0,0 +1,16 @@
+import rssImage from "./rss.png"
+
+export function SubscribeToRssLink() {
+  return (
+    <a href="/community/events/feed.xml" className="flex items-center">
+      <span>Subscribe to Events RSS</span>
+      <img
+        src={rssImage.src}
+        alt="RSS Feed"
+        className="ml-2"
+        width={24}
+        height={24}
+      />
+    </a>
+  )
+}