add recent changes tab to home

client/src/features/home/components/recent-changes.tsx

@@ -0,0 +1,46 @@
+import { Text, Group, Stack, UnstyledButton, Divider } from '@mantine/core';
+import { format } from 'date-fns';
+import classes from './home.module.css';
+import { Link } from 'react-router-dom';
+import PageListSkeleton from '@/features/home/components/page-list-skeleton';
+import usePage from '@/features/page/hooks/use-page';
+
+function RecentChanges() {
+  const { recentPagesQuery } = usePage();
+  const { data, isLoading, isError } = recentPagesQuery;
+
+  if (isLoading) {
+    return <PageListSkeleton />;
+  }
+
+  if (isError) {
+    return <Text>Failed to fetch recent pages</Text>;
+  }
+
+  return (
+    <div>
+      {data.map((page) => (
+        <>
+          <UnstyledButton component={Link} to={`/p/${page.id}`}
+                          className={classes.page} p="xs" key={page.id}>
+            <Group wrap="noWrap">
+
+              <Stack gap="xs" style={{ flex: 1 }}>
+                <Text fw={500} size="sm">
+                  {page.title || 'Untitled'}
+                </Text>
+              </Stack>
+
+              <Text c="dimmed" size="xs">
+                {format(new Date(page.createdAt), 'PPP')}
+              </Text>
+            </Group>
+          </UnstyledButton>
+          <Divider />
+        </>
+      ))}
+    </div>
+  );
+}
+
+export default RecentChanges;