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,56 @@
+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";
+
+export interface AnnounceProps {
+  announceType: "warn" | "info";
+  title: string;
+  body: string;
+  updatedAt: Date;
+}
+
+export const Announce = ({
+  announceType,
+  title,
+  body,
+  updatedAt
+}: AnnounceProps) => {
+  return (
+    <div>
+      <div className={styles.announceTitleContainer}>
+        <div className={styles.announceTitle}>
+          <Tooltip
+            content={t(
+              announceType === "warn" ? "announce.warn" : "announce.info"
+            )}
+          >
+            {announceType === "warn" ? (
+              <ExclamationTriangleIcon className={styles.announceIcon} />
+            ) : (
+              <InfoCircledIcon className={styles.announceIcon} />
+            )}
+          </Tooltip>
+          <Text as="p" size="5" weight="medium">
+            {title}
+          </Text>
+        </div>
+        <Tooltip content={t("notification.read")}>
+          <IconButton variant="outline">
+            <ThickCheckIcon className={styles.readButtonIcon} />
+          </IconButton>
+        </Tooltip>
+      </div>
+
+      <p>{body}</p>
+
+      <Text size="2" color="gray">
+        <Time date={updatedAt} />
+      </Text>
+    </div>
+  );
+};

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,54 @@
+export interface TimeProps {
+  date: Date;
+}
+
+const timeFormatter = new Intl.DateTimeFormat();
+const relativeTimeFormatter = new Intl.RelativeTimeFormat(undefined, {
+  style: "short"
+});
+
+const Millisecond = 1 as const;
+const SECOND = Millisecond * 1000;
+const MINUTE = SECOND * 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+
+const getRelativeTimeDiff = (date: Date, now = new Date()) => {
+  const diffMilliseconds = now.getTime() - date.getTime();
+  const absDiff = Math.abs(diffMilliseconds);
+
+  if (absDiff < MINUTE) {
+    const diffSeconds = Math.floor(diffMilliseconds / SECOND);
+    return relativeTimeFormatter.format(-diffSeconds, "second");
+  } else if (absDiff < HOUR) {
+    const diffMinutes = Math.floor(diffMilliseconds / MINUTE);
+    return relativeTimeFormatter.format(-diffMinutes, "minute");
+  } else if (absDiff < DAY) {
+    const diffHours = Math.floor(diffMilliseconds / HOUR);
+    return relativeTimeFormatter.format(-diffHours, "hour");
+  }
+
+  const diffDays = Math.floor(diffMilliseconds / DAY);
+  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 diffYears = Math.floor(diffMonths / 12);
+  return relativeTimeFormatter.format(-diffYears, "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,31 @@
+.announceTitleContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  .announceIcon {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: .5rem;
+  }
+
+  .readButtonIcon {
+    width: .8rem;
+    height: .8rem;
+  }
+
+  .announceTitle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  margin-bottom: .5em;
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+}

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",