Extract Tags component to a separate file

TODO.md

@@ -4,7 +4,7 @@ Calendar
 
 ## Features
 
-- [ ] Add badges to the seed
+- [x] Add badges to the seed
 - [ ] Implement badge prizes
 - [ ] Implement tags
 - [ ] Page to add a new event
@@ -20,6 +20,7 @@ Calendar
 - [x] WeekLinks make opaque blocks not take space on mobile
 - [x] Type problem with Avatar
 - [x] Maybe classNames that do nothing on calendar event page?
+- [ ] refactor global.css/common.css -> variables.css / utils.css / common.css
 - [ ] addTagArray get tags type from constant
 - [ ] Rename model events -> calendarEvents
 - [ ] On the event page should not say Day 1 if only one day

app/db/types.ts

@@ -1,3 +1,5 @@
+import type allTags from "../routes/calendar/tags.json";
+
 export interface User {
   id: number;
   discordId: string;
@@ -88,6 +90,8 @@ export interface CalendarEvent {
   participantCount: number | null;
 }
 
+export type CalendarEventTag = keyof typeof allTags;
+
 export interface CalendarEventDate {
   id: number;
   eventId: number;

app/routes/calendar/components/Tags.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from "react-i18next";
+import type { CalendarEventTag } from "~/db/types";
+import allTags from "../tags.json";
+
+export function Tags({ tags }: { tags: Array<CalendarEventTag> }) {
+  const { t } = useTranslation("calendar");
+
+  if (tags.length === 0) return null;
+
+  return (
+    <ul className="calendar__event__tags">
+      {tags.map((tag) => (
+        <li key={tag} style={{ backgroundColor: allTags[tag].color }}>
+          {t(`tag.${tag}`)}
+        </li>
+      ))}
+    </ul>
+  );
+}

app/routes/calendar/index.tsx

@@ -23,7 +23,7 @@ import { discordFullName, makeTitle } from "~/utils/strings";
 import type { Unpacked } from "~/utils/types";
 import { resolveBaseUrl } from "~/utils/urls";
 import { actualNumber } from "~/utils/zod";
-import allTags from "./tags.json";
+import { Tags } from "./components/Tags";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -353,26 +353,6 @@ function EventsList() {
   );
 }
 
-function Tags({
-  tags,
-}: {
-  tags: Unpacked<UseDataFunctionReturn<typeof loader>["events"]>["tags"];
-}) {
-  const { t } = useTranslation("calendar");
-
-  if (tags.length === 0) return null;
-
-  return (
-    <ul className="calendar__event__tags">
-      {tags.map((tag) => (
-        <li key={tag} style={{ backgroundColor: allTags[tag].color }}>
-          {t(`tag.${tag}`)}
-        </li>
-      ))}
-    </ul>
-  );
-}
-
 function eventsGroupedByDay(
   events: UseDataFunctionReturn<typeof loader>["events"]
 ) {

app/styles/calendar.css

@@ -125,20 +125,6 @@
   line-height: 1.35;
 }
 
-.calendar__event__tags {
-  display: flex;
-  padding: 0;
-  color: var(--button-text);
-  font-size: var(--fonts-xxs);
-  font-weight: var(--semi-bold);
-  list-style: none;
-}
-
-.calendar__event__tags > li {
-  border-radius: var(--rounded);
-  padding-inline: var(--s-1-5);
-}
-
 .calendar__event__day {
   color: var(--text-lighter);
 }

app/styles/common.css

@@ -179,6 +179,20 @@
   margin-block-start: var(--label-margin);
 }
 
+.calendar__event__tags {
+  display: flex;
+  padding: 0;
+  color: var(--button-text);
+  font-size: var(--fonts-xxs);
+  font-weight: var(--semi-bold);
+  list-style: none;
+}
+
+.calendar__event__tags > li {
+  border-radius: var(--rounded);
+  padding-inline: var(--s-1-5);
+}
+
 /*
  *
  * Utility classes

public/locales/en/calendar.json

@@ -1,3 +1,3 @@
 {
-    "tag.BADGE_PRIZE": "Badge prize"
-}
+  "tag.BADGE_PRIZE": "Badge prize"
+}

remix.config.js

@@ -2,6 +2,6 @@
  * @type {import('@remix-run/dev').AppConfig}
  */
 module.exports = {
-  ignoredRouteFiles: ["**/.*", "**/*.json"],
+  ignoredRouteFiles: ["**/.*", "**/*.json", "**/components/*"],
   cacheDirectory: process.env.NODE_ENV === "test" ? ".cache-test" : undefined,
 };