Add Events Page

app/[locale]/events/components/EventList.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import Link from "next/link";
+import { ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import eventsData from "@/data/events.json";
+import { cn } from "@/lib/utils";
+
+interface Event {
+  title: string;
+  location: string;
+  date: Date;
+  link: string;
+}
+
+const events: Event[] = eventsData.map((event) => ({
+  ...event,
+  date: new Date(`${event.date}T12:00:00Z`),
+}));
+
+function CalendarIcon({ date, className }: { date: Date; className?: string }) {
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col items-center justify-center w-12 h-12 rounded border bg-background",
+        className
+      )}
+    >
+      <div className="text-[0.65rem] font-medium text-muted-foreground">
+        {date.toLocaleString("default", { month: "short" })}
+      </div>
+      <div className="font-bold text-xl leading-none">{date.getDate()}</div>
+    </div>
+  );
+}
+
+export default function Component() {
+  const [displayCount, setDisplayCount] = useState(10);
+
+  const sortedEvents = [...events].sort(
+    (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
+  );
+
+  const visibleEvents = sortedEvents.slice(0, displayCount);
+
+  const groupedEvents = visibleEvents.reduce(
+    (groups, event) => {
+      const monthYear = event.date.toLocaleString("default", {
+        month: "long",
+        year: "numeric",
+      });
+      if (!groups[monthYear]) {
+        groups[monthYear] = [];
+      }
+      groups[monthYear].push(event);
+      return groups;
+    },
+    {} as Record<string, Event[]>
+  );
+
+  return (
+    <div className="p-4 md:p-6">
+      <div className="grid gap-8 w-full max-w-2xl mx-auto">
+        {Object.entries(groupedEvents).map(([monthYear, monthEvents]) => (
+          <div
+            key={monthYear}
+            className="grid gap-4"
+          >
+            <div className="flex items-center w-full">
+              <div className="w-36 font-semibold text-lg text-muted-foreground whitespace-nowrap">
+                {monthYear}
+              </div>
+              <Separator className="flex-1" />
+            </div>
+            <div className="grid gap-4">
+              {monthEvents.map((event, index) => (
+                <Link
+                  key={index}
+                  href={event.link}
+                >
+                  <Card className="overflow-hidden transition-colors hover:bg-muted/50 group">
+                    <CardContent className="p-0">
+                      <div className="flex gap-4 p-6 items-center justify-between">
+                        <div className="flex gap-4 items-center">
+                          <CalendarIcon date={event.date} />
+                          <div className="space-y-0.5">
+                            <h3 className="font-semibold leading-tight">
+                              {event.title}
+                            </h3>
+                            <span className="text-sm text-muted-foreground">
+                              {event.location}
+                            </span>
+                          </div>
+                        </div>
+                        <ExternalLink className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
+                      </div>
+                    </CardContent>
+                  </Card>
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+
+        {displayCount < events.length && (
+          <Button
+            variant="outline"
+            className="w-full mt-4"
+            onClick={() => setDisplayCount((prev) => prev + 10)}
+          >
+            Load More
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

app/[locale]/events/page.tsx

@@ -0,0 +1,31 @@
+import { getTranslations } from "next-intl/server";
+import EventList from "./components/EventList";
+
+export async function generateMetadata() {
+  const t = await getTranslations("events");
+
+  return {
+    title: `${t("title")} - Rocky Linux`,
+    description: t("description"),
+  };
+}
+
+export default async function EventsPage() {
+  const t = await getTranslations("events");
+
+  return (
+    <div className="py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold font-display tracking-tight sm:text-4xl">
+            {t("title")}
+          </h2>
+          <p className="mt-2 text-lg leading-8">{t("description")}</p>
+        </div>
+        <div className="mt-10 sm:mt-16">
+          <EventList />
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/globals.css

@@ -153,3 +153,16 @@
 .prose :where(code):not(:where([class~="not-prose"] *))::after {
   content: "" !important;
 }
+
+/*
+  ---break---
+*/
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

data/events.json

@@ -0,0 +1,8 @@
+[
+  {
+    "title": "Community Wallpaper Contest",
+    "location": "forums.rockylinux.org",
+    "date": "2025-03-03",
+    "link": "https://forums.rockylinux.org/t/rocky-linux-10-wallpaper-contest/17501"
+  }
+]

messages/en-US.json

@@ -308,5 +308,9 @@
         "description": "Join our <link1>Mattermost chat</link1> and introduce yourself in the <link2>~Documentation</link2> channel. Make sure to review the contributing guide available on our <link3>README</link3>."
       }
     }
+  },
+  "events": {
+    "title": "Events",
+    "description": "We host and attend a variety of events throughout each year. We invite you to join us at one of our events to learn more about the project and meet other members of the community."
   }
 }

messages/en.json

@@ -308,5 +308,9 @@
         "description": "Join our <link1>Mattermost chat</link1> and introduce yourself in the <link2>~Documentation</link2> channel. Make sure to review the contributing guide available on our <link3>README</link3>."
       }
     }
+  },
+  "events": {
+    "title": "Events",
+    "description": "We host and attend a variety of events throughout each year. We invite you to join us at one of our events to learn more about the project and meet other members of the community."
   }
 }