From 1fa95e13cdc50c7a8ffb1e985aeef956d987f285 Mon Sep 17 00:00:00 2001
From: scarf <greenscarf005@gmail.com>
Date: Thu, 27 Mar 2025 02:10:09 +0900
Subject: [PATCH] refactor: Badge

---
 app/javascript/mastodon/components/badge.jsx | 31 --------------
 app/javascript/mastodon/components/badge.tsx | 45 ++++++++++++++++++++
 2 files changed, 45 insertions(+), 31 deletions(-)
 delete mode 100644 app/javascript/mastodon/components/badge.jsx
 create mode 100644 app/javascript/mastodon/components/badge.tsx

diff --git a/app/javascript/mastodon/components/badge.jsx b/app/javascript/mastodon/components/badge.jsx
deleted file mode 100644
index 2a335d7f50..0000000000
--- a/app/javascript/mastodon/components/badge.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage } from 'react-intl';
-
-import GroupsIcon from '@/material-icons/400-24px/group.svg?react';
-import PersonIcon from '@/material-icons/400-24px/person.svg?react';
-import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
-
-
-export const Badge = ({ icon = <PersonIcon />, label, domain, roleId }) => (
-  <div className='account-role' data-account-role-id={roleId}>
-    {icon}
-    {label}
-    {domain && <span className='account-role__domain'>{domain}</span>}
-  </div>
-);
-
-Badge.propTypes = {
-  icon: PropTypes.node,
-  label: PropTypes.node,
-  domain: PropTypes.node,
-  roleId: PropTypes.string
-};
-
-export const GroupBadge = () => (
-  <Badge icon={<GroupsIcon />} label={<FormattedMessage id='account.badges.group' defaultMessage='Group' />} />
-);
-
-export const AutomatedBadge = () => (
-  <Badge icon={<SmartToyIcon />} label={<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />} />
-);
diff --git a/app/javascript/mastodon/components/badge.tsx b/app/javascript/mastodon/components/badge.tsx
new file mode 100644
index 0000000000..dd588f799a
--- /dev/null
+++ b/app/javascript/mastodon/components/badge.tsx
@@ -0,0 +1,45 @@
+import type { FC, ReactNode } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import GroupsIcon from '@/material-icons/400-24px/group.svg?react';
+import PersonIcon from '@/material-icons/400-24px/person.svg?react';
+import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
+
+interface BadgeProps {
+  icon?: ReactNode;
+  label?: ReactNode;
+  domain?: ReactNode;
+  roleId?: string;
+}
+
+export const Badge: FC<BadgeProps> = ({
+  icon = <PersonIcon />,
+  label,
+  domain,
+  roleId,
+}) => (
+  <div className='account-role' data-account-role-id={roleId}>
+    {icon}
+    {label}
+    {domain && <span className='account-role__domain'>{domain}</span>}
+  </div>
+);
+
+export const GroupBadge = () => (
+  <Badge
+    icon={<GroupsIcon />}
+    label={
+      <FormattedMessage id='account.badges.group' defaultMessage='Group' />
+    }
+  />
+);
+
+export const AutomatedBadge = () => (
+  <Badge
+    icon={<SmartToyIcon />}
+    label={
+      <FormattedMessage id='account.badges.bot' defaultMessage='Automated' />
+    }
+  />
+);