feat: 管理者からのお知らせ コンポーネントを実装した

app/components/Announce.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Announce } from "./Announce";
+
+const meta = {
+  component: Announce
+} satisfies Meta<typeof Announce>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    announceType: "warn",
+    title: "定期メンテナンスのお知らせ",
+    body: "以下の日時に定期メンテナンスを行います",
+    updatedAt: new Date("2023-09-10T00:00:00Z")
+  }
+};

app/components/Announce.tsx

@@ -0,0 +1,59 @@
+import { IconButton, Text, ThickCheckIcon, Tooltip } from "@radix-ui/themes";
+import styles from "./announce.module.css";
+import { t } from "i18next";
+import { Time } from "~/components/Time";
+import {
+  ExclamationTriangleIcon,
+  InfoCircledIcon
+} from "@radix-ui/react-icons";
+
+interface AnnounceProps {
+  announceType: "warn" | "info";
+  title: string;
+  body: string;
+  updatedAt: Date;
+}
+
+export const Announce = ({
+  announceType,
+  title,
+  body,
+  updatedAt
+}: AnnounceProps) => {
+  return (
+    <>
+      <div className={styles.announceTitleContainer}>
+        <div className={styles.announceTitle}>
+          <Tooltip
+            content={t(
+              announceType === "warn" ? "announce.warn" : "announce.info"
+            )}
+          >
+            <Text as="span">
+              ️
+              {announceType === "warn" ? (
+                <ExclamationTriangleIcon />
+              ) : (
+                <InfoCircledIcon />
+              )}
+            </Text>
+          </Tooltip>
+          <Text as="p" size="5" weight="medium">
+            {title}
+          </Text>
+        </div>
+        <Tooltip content={t("notification.read")}>
+          <IconButton className={styles.readButton} variant="outline">
+            <ThickCheckIcon />
+          </IconButton>
+        </Tooltip>
+      </div>
+
+      <p>{body}</p>
+
+      <Text size="2" color="gray">
+        <Time date={updatedAt} />
+      </Text>
+    </>
+  );
+};

app/components/Time.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Time } from "./Time";
+
+const meta = {
+  component: Time
+} satisfies Meta<typeof Time>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    date: new Date()
+  }
+};

app/components/Time.tsx

@@ -0,0 +1,48 @@
+interface TimeProps {
+  date: Date;
+}
+
+const timeFormatter = new Intl.DateTimeFormat();
+const relativeTimeFormatter = new Intl.RelativeTimeFormat(undefined, {
+  style: "short"
+});
+
+const getRelativeTimeDiff = (date: Date, now = new Date()) => {
+  const diffMilliSeconds = now.getTime() - date.getTime();
+  const absDiff = Math.abs(diffMilliSeconds);
+
+  if (absDiff < 60_000) {
+    const diffSeconds = Math.floor(diffMilliSeconds / 1_000);
+    return relativeTimeFormatter.format(-diffSeconds, "second");
+  } else if (absDiff < 3_600_000) {
+    const diffMinutes = Math.floor(diffMilliSeconds / 60_000);
+    return relativeTimeFormatter.format(-diffMinutes, "minute");
+  } else if (absDiff < 86_400_000) {
+    const diffHours = Math.floor(diffMilliSeconds / 3_600_000);
+    return relativeTimeFormatter.format(-diffHours, "hour");
+  }
+
+  const diffDays = Math.floor(diffMilliSeconds / 86_400_000);
+  if (Math.abs(diffDays) < 30) {
+    return relativeTimeFormatter.format(-diffDays, "day");
+  }
+
+  const diffMonths = Math.floor(diffDays / 30);
+  if (Math.abs(diffMonths) < 12) {
+    return relativeTimeFormatter.format(-diffMonths, "month");
+  }
+
+  const yearsDifference = Math.floor(diffMonths / 12);
+  return relativeTimeFormatter.format(-yearsDifference, "year");
+};
+
+export const Time = ({ date }: TimeProps) => {
+  const formattedDate = timeFormatter.format(date);
+  const formattedRelativeDate = getRelativeTimeDiff(date);
+
+  return (
+    <p>
+      {formattedDate} ({formattedRelativeDate})
+    </p>
+  );
+};

app/components/announce.module.css

@@ -0,0 +1,23 @@
+.announceTitleContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  .announceTitle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  margin-bottom: .5em;
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  span {
+    margin-right: 1rem;
+  }
+}

i18n/locales/en_US.json

@@ -15,5 +15,8 @@
   "followers": "followers",
   "editProfile": "edit profile",
   "blocking": "blocking",
-  "followBack": "followback"
+  "followBack": "followback",
+  "notification.read": "Mark as read",
+  "announce.warn": "Warning",
+  "announce.info": "Information"
 }

i18n/locales/ja_JP.json

@@ -15,5 +15,8 @@
   "followers": "フォロワー",
   "editProfile": "プロフィールを編集",
   "blocking": "ブロック中",
-  "followBack": "フォローバック"
+  "followBack": "フォローバック",
+  "notification.read": "既読にする",
+  "announce.warn": "警告",
+  "announce.info": "情報"
 }

package.json

@@ -23,6 +23,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.1",
     "@remix-run/node": "^2.10.3",
     "@remix-run/react": "^2.10.3",