refactor: extract user badge role

inertia/components/admin/users/users_table.tsx

@@ -1,5 +1,4 @@
 import {
-	Badge,
 	ScrollArea,
 	Table,
 	Text,
@@ -14,6 +13,7 @@ import { useTranslation } from 'react-i18next';
 import { TbSearch } from 'react-icons/tb';
 import { Th } from '~/components/admin/users/th';
 import { sortData } from '~/components/admin/users/utils';
+import { UserBadgeRole } from '~/components/common/user_badge_role';
 import { DATE_FORMAT } from '~/constants';
 import { User } from '~/types/app';
 
@@ -71,15 +71,7 @@ export function UsersTable({
 		<Table.Tr key={user.id}>
 			<Table.Td>{user.fullname}</Table.Td>
 			<Table.Td>
-				{user.isAdmin ? (
+				<UserBadgeRole user={user} />
-					<Badge variant="light" color="red">
-						{t('admin:admin')}
-					</Badge>
-				) : (
-					<Badge variant="light" color="green">
-						{t('admin:user')}
-					</Badge>
-				)}
 			</Table.Td>
 			<Table.Td>{user.collectionsCount}</Table.Td>
 			<Table.Td>{user.linksCount}</Table.Td>

inertia/components/common/user_badge_role.tsx

@@ -0,0 +1,24 @@
+import { Badge } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import type { PublicUser, User } from '~/types/app';
+
+interface UserBadgeRoleProps {
+	user: User | PublicUser;
+}
+
+export function UserBadgeRole({ user }: UserBadgeRoleProps) {
+	const { t } = useTranslation('common');
+	return (
+		<>
+			{user.isAdmin ? (
+				<Badge variant="light" color="red">
+					{t('admin')}
+				</Badge>
+			) : (
+				<Badge variant="light" color="green">
+					{t('user')}
+				</Badge>
+			)}
+		</>
+	);
+}

inertia/components/navbar/mobile.module.css

@@ -1,7 +1,5 @@
 .header {
 	height: rem(60px);
-	padding-left: var(--mantine-spacing-md);
-	padding-right: var(--mantine-spacing-md);
 	border-bottom: rem(1px) solid
 		light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
 }