From a3651e837051f42b63c14867c9eecd66cb73b7b4 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Sat, 9 Nov 2024 02:26:04 +0100
Subject: [PATCH] refactor: extract user badge role

---
 .../components/admin/users/users_table.tsx    | 12 ++--------
 inertia/components/common/user_badge_role.tsx | 24 +++++++++++++++++++
 inertia/components/navbar/mobile.module.css   |  2 --
 3 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 inertia/components/common/user_badge_role.tsx

diff --git a/inertia/components/admin/users/users_table.tsx b/inertia/components/admin/users/users_table.tsx
index 24994dd..ec9d2c6 100644
--- a/inertia/components/admin/users/users_table.tsx
+++ b/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 ? (
-					<Badge variant="light" color="red">
-						{t('admin:admin')}
-					</Badge>
-				) : (
-					<Badge variant="light" color="green">
-						{t('admin:user')}
-					</Badge>
-				)}
+				<UserBadgeRole user={user} />
 			</Table.Td>
 			<Table.Td>{user.collectionsCount}</Table.Td>
 			<Table.Td>{user.linksCount}</Table.Td>
diff --git a/inertia/components/common/user_badge_role.tsx b/inertia/components/common/user_badge_role.tsx
new file mode 100644
index 0000000..4d34e8c
--- /dev/null
+++ b/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>
+			)}
+		</>
+	);
+}
diff --git a/inertia/components/navbar/mobile.module.css b/inertia/components/navbar/mobile.module.css
index b3b4196..4c23cf4 100644
--- a/inertia/components/navbar/mobile.module.css
+++ b/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));
 }