refactor: use tabs instead of spaces

inertia/pages/admin/dashboard.tsx

@@ -13,109 +13,109 @@ import { UserWithRelationCount } from '~/types/app';
 dayjs.extend(relativeTime);
 
 interface AdminDashboardProps {
-  users: UserWithRelationCount[];
-  totalCollections: number;
-  totalLinks: number;
+	users: UserWithRelationCount[];
+	totalCollections: number;
+	totalLinks: number;
 }
 
 const CenteredCell = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+	flexDirection: 'column',
 });
 
 const RenderDateCell = (info: any) => (
-  <CenteredCell>
-    <span>{dayjs(info.getValue().toString()).fromNow()}</span>
-    <span>{dayjs(info.getValue().toString()).format(DATE_FORMAT)}</span>
-  </CenteredCell>
+	<CenteredCell>
+		<span>{dayjs(info.getValue().toString()).fromNow()}</span>
+		<span>{dayjs(info.getValue().toString()).format(DATE_FORMAT)}</span>
+	</CenteredCell>
 );
 
 const ThemeProvider = (props: AdminDashboardProps) => (
-  <ContentLayout>
-    <AdminDashboard {...props} />
-  </ContentLayout>
+	<ContentLayout>
+		<AdminDashboard {...props} />
+	</ContentLayout>
 );
 export default ThemeProvider;
 
 function AdminDashboard({
-  users,
-  totalCollections,
-  totalLinks,
+	users,
+	totalCollections,
+	totalLinks,
 }: AdminDashboardProps) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const columns = useMemo(
-    () =>
-      [
-        {
-          accessorKey: 'id',
-          header: (
-            <>
-              # <span css={{ color: theme.colors.grey }}>({users.length})</span>
-            </>
-          ),
-          cell: (info) => info.getValue(),
-        },
-        {
-          accessorKey: 'fullname',
-          header: t('common:name'),
-          cell: (info) => info.getValue(),
-        },
-        {
-          accessorKey: 'email',
-          header: t('common:email'),
-          cell: (info) => info.getValue(),
-        },
-        {
-          accessorKey: 'count',
-          header: (
-            <>
-              {t('common:collection.collections', { count: totalCollections })}{' '}
-              <span css={{ color: theme.colors.grey }}>
-                ({totalCollections})
-              </span>
-            </>
-          ),
-          cell: (info) => (info.getValue() as any)?.collection,
-        },
-        {
-          accessorKey: 'count',
-          header: (
-            <>
-              {t('common:link.links', { count: totalLinks })}{' '}
-              <span css={{ color: theme.colors.grey }}>({totalLinks})</span>
-            </>
-          ),
-          cell: (info: any) => info.getValue()?.link,
-        },
-        {
-          accessorKey: 'isAdmin',
-          header: t('admin:role'),
-          cell: (info) =>
-            info.getValue() ? (
-              <span style={{ color: theme.colors.lightRed }}>
-                {t('admin:admin')}
-              </span>
-            ) : (
-              <span style={{ color: theme.colors.green }}>
-                {t('admin:user')}
-              </span>
-            ),
-        },
-        {
-          accessorKey: 'createdAt',
-          header: t('admin:created_at'),
-          cell: RenderDateCell,
-        },
-        {
-          accessorKey: 'updatedAt',
-          header: t('admin:updated_at'),
-          cell: RenderDateCell,
-        },
-      ] as ColumnDef<UserWithRelationCount>[],
-    []
-  );
-  return <Table columns={columns} data={users} />;
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const columns = useMemo(
+		() =>
+			[
+				{
+					accessorKey: 'id',
+					header: (
+						<>
+							# <span css={{ color: theme.colors.grey }}>({users.length})</span>
+						</>
+					),
+					cell: (info) => info.getValue(),
+				},
+				{
+					accessorKey: 'fullname',
+					header: t('common:name'),
+					cell: (info) => info.getValue(),
+				},
+				{
+					accessorKey: 'email',
+					header: t('common:email'),
+					cell: (info) => info.getValue(),
+				},
+				{
+					accessorKey: 'count',
+					header: (
+						<>
+							{t('common:collection.collections', { count: totalCollections })}{' '}
+							<span css={{ color: theme.colors.grey }}>
+								({totalCollections})
+							</span>
+						</>
+					),
+					cell: (info) => (info.getValue() as any)?.collection,
+				},
+				{
+					accessorKey: 'count',
+					header: (
+						<>
+							{t('common:link.links', { count: totalLinks })}{' '}
+							<span css={{ color: theme.colors.grey }}>({totalLinks})</span>
+						</>
+					),
+					cell: (info: any) => info.getValue()?.link,
+				},
+				{
+					accessorKey: 'isAdmin',
+					header: t('admin:role'),
+					cell: (info) =>
+						info.getValue() ? (
+							<span style={{ color: theme.colors.lightRed }}>
+								{t('admin:admin')}
+							</span>
+						) : (
+							<span style={{ color: theme.colors.green }}>
+								{t('admin:user')}
+							</span>
+						),
+				},
+				{
+					accessorKey: 'createdAt',
+					header: t('admin:created_at'),
+					cell: RenderDateCell,
+				},
+				{
+					accessorKey: 'updatedAt',
+					header: t('admin:updated_at'),
+					cell: RenderDateCell,
+				},
+			] as ColumnDef<UserWithRelationCount>[],
+		[]
+	);
+	return <Table columns={columns} data={users} />;
 }