Improve RTL support example

Author: icflorescu

app/examples/rtl-support/RTLSupportExample.module.css

@@ -0,0 +1,4 @@
+.buttonSectionRtl {
+  margin-left: var(--mantine-spacing-xs);
+  margin-right: 0;
+}

app/examples/rtl-support/RTLSupportExample.tsx

@@ -3,8 +3,10 @@
 import { ActionIcon, Box, Button, DirectionProvider, Group, SegmentedControl, Stack, Text } from '@mantine/core';
 import { IconColumns3, IconEdit, IconEye, IconTrash } from '@tabler/icons-react';
 import { DataTable, useDataTableColumns, type DataTableSortStatus } from '__PACKAGE__';
+import clsx from 'clsx';
 import { useMemo, useState } from 'react';
 import { companies, employees, type Employee } from '~/data';
+import classes from './RTLSupportExample.module.css';
 
 // Example 1: Basic table without pinned columns
 export function RTLBasicExample({ direction }: { direction: 'ltr' | 'rtl' }) {
@@ -46,7 +48,13 @@ export function RTLDraggingExample({ direction }: { direction: 'ltr' | 'rtl' })
       <Box dir={direction}>
         <Stack gap="xs">
           <Group gap="xs">
-            <Button size="xs" variant="light" leftSection={<IconColumns3 size={16} />} onClick={resetColumnsOrder}>
+            <Button
+              classNames={{ section: clsx({ [classes.buttonSectionRtl]: direction === 'rtl' }) }}
+              size="xs"
+              variant="light"
+              leftSection={<IconColumns3 size={16} />}
+              onClick={resetColumnsOrder}
+            >
               Reset order
             </Button>
           </Group>

app/examples/rtl-support/page.tsx

@@ -7,15 +7,19 @@ import { PageNavigation } from '~/components/PageNavigation';
 import { PageTitle } from '~/components/PageTitle';
 import { Txt } from '~/components/Txt';
 import { readCodeFile } from '~/lib/code';
-import { getRouteMetadata } from '~/lib/utils';
+import { allPromiseProps, getRouteMetadata } from '~/lib/utils';
 import { RTLSupportExample } from './RTLSupportExample';
 
 const PATH: Route = '/examples/rtl-support';
 
 export const metadata = getRouteMetadata(PATH);
 
 export default async function RTLSupportExamplePage() {
-  const code = await readCodeFile<string>(`${PATH}/RTLSupportExample.tsx`);
+  // const code = await readCodeFile<string>(`${PATH}/RTLSupportExample.tsx`);
+  const code = await allPromiseProps({
+    'RTLSupportExample.tsx': readCodeFile<string>(`${PATH}/RTLSupportExample.tsx`),
+    'RTLSupportExample.module.css': readCodeFile<string>(`${PATH}/RTLSupportExample.module.css`),
+  });
 
   return (
     <>
@@ -35,7 +39,7 @@ export default async function RTLSupportExamplePage() {
       </Txt>
       <RTLSupportExample />
       <Txt>Here is the code:</Txt>
-      <CodeBlock code={code} />
+      <CodeBlock tabs={{ code, keys: ['RTLSupportExample.tsx', 'RTLSupportExample.module.css'] }} />
       <Txt>Head over to the next example to discover more features.</Txt>
       <PageNavigation of={PATH} />
     </>