Feat: Tile, AnnouncementTile and AnnouncementsList

Frontend/app/components/AnnouncementsList.tsx

@@ -0,0 +1,18 @@
+import type { Announcement } from "~/types/Announcement";
+import AnnouncementTile from "./Tiles/AnnouncementTile";
+
+type AnnouncementsListProps = {
+  announcements: Announcement[];
+};
+
+export default function AnnouncementsList({
+  announcements,
+}: AnnouncementsListProps) {
+  return (
+    <div className="flex flex-col gap-5">
+      {announcements.map((announcement) => (
+        <AnnouncementTile key={announcement.id} announcement={announcement} />
+      ))}
+    </div>
+  );
+}

Frontend/app/components/Tiles/AnnouncementTile.tsx

@@ -0,0 +1,40 @@
+import { Calendar, Megaphone } from "lucide-react";
+import type { Announcement } from "~/types/Announcement";
+import { formatDate } from "~/util/date.util";
+import { cn } from "~/util/tailwind.util";
+import Tile from "./Tile";
+
+type AnnouncementTileProps = {
+  announcement: Announcement;
+  className?: string;
+};
+
+export default function AnnouncementTile({
+  announcement,
+  className,
+}: AnnouncementTileProps) {
+  return (
+    <Tile className={cn("rounded-2xl border border-gray-200", className)}>
+      {/* Title and date */}
+      <div className="flex w-full justify-between">
+        <p className="mb-2">{announcement.title}</p>
+        <p className="flex gap-1 text-sm text-nowrap text-gray-600">
+          <Calendar className="h-5" />
+          {formatDate(announcement.date, "defaultDate")}
+        </p>
+      </div>
+
+      {/* Announcement content */}
+      <p className="text-gray-600">{announcement.announcement}</p>
+
+      {/* Divider */}
+      <div className="my-2 h-[0.5px] w-full bg-gray-200" />
+
+      {/* Announcer */}
+      <p className="flex items-center gap-2 text-gray-600">
+        <Megaphone className="h-5" />
+        {announcement.announcer}
+      </p>
+    </Tile>
+  );
+}

Frontend/app/components/Tiles/Tile.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { cn } from "~/util/tailwind.util";
+
+type TileProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export default function Tile({ className, children }: TileProps) {
+  return (
+    <div className={cn("box-border rounded-2xl p-5", className)}>
+      {children}
+    </div>
+  );
+}

Frontend/app/types/Announcement.ts

@@ -0,0 +1,7 @@
+export type Announcement = {
+  id: number;
+  announcer: string;
+  title: string;
+  date: Date;
+  announcement: string;
+};

Frontend/app/util/tailwind.util.ts

@@ -0,0 +1,6 @@
+import clsx, { type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}