[Glitch] Profile redesign: Badges

Port 22ec368574 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/badge.jsx

@@ -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' />} />
-);

app/javascript/flavours/glitch/components/badge.tsx

@@ -0,0 +1,46 @@
+import type { FC, ReactNode } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+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: FC<{
+  label: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+  domain?: ReactNode;
+  roleId?: string;
+}> = ({ icon = <PersonIcon />, label, className, domain, roleId }) => (
+  <div
+    className={classNames('account-role', className)}
+    data-account-role-id={roleId}
+  >
+    {icon}
+    {label}
+    {domain && <span className='account-role__domain'>{domain}</span>}
+  </div>
+);
+
+export const GroupBadge: FC<{ className?: string }> = ({ className }) => (
+  <Badge
+    icon={<GroupsIcon />}
+    label={
+      <FormattedMessage id='account.badges.group' defaultMessage='Group' />
+    }
+    className={className}
+  />
+);
+
+export const AutomatedBadge: FC<{ className?: string }> = ({ className }) => (
+  <Badge
+    icon={<SmartToyIcon />}
+    label={
+      <FormattedMessage id='account.badges.bot' defaultMessage='Automated' />
+    }
+    className={className}
+  />
+);