empty states

apps/client/src/components/common/recent-changes.tsx

@@ -11,7 +11,8 @@ import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { formattedDate } from "@/lib/time.ts";
 import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
-import { IconFileDescription } from "@tabler/icons-react";
+import { IconFileDescription, IconFiles } from "@tabler/icons-react";
+import { EmptyState } from "@/components/ui/empty-state.tsx";
 import { getSpaceUrl } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";
 import { getInitialsColor } from "@/lib/get-initials-color.ts";
@@ -85,8 +86,10 @@ export default function RecentChanges({ spaceId }: Props) {
       </Table>
     </Table.ScrollContainer>
   ) : (
-    <Text size="md" ta="center">
-      {t("No pages yet")}
-    </Text>
+    <EmptyState
+      icon={IconFiles}
+      title={t("No pages yet")}
+      description={t("Pages you create will show up here.")}
+    />
   );
 }

apps/client/src/components/ui/empty-state.module.css

@@ -0,0 +1,8 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}

apps/client/src/components/ui/empty-state.tsx

@@ -0,0 +1,30 @@
+import { Stack, Text } from "@mantine/core";
+import { type TablerIcon } from "@tabler/icons-react";
+import { ReactNode } from "react";
+import classes from "./empty-state.module.css";
+
+type EmptyStateProps = {
+  icon: TablerIcon;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+};
+
+export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
+  return (
+    <div className={classes.root}>
+      <Stack align="center" gap="xs">
+        <Icon size={40} stroke={1.5} color="var(--mantine-color-dimmed)" />
+        <Text size="lg" fw={500}>
+          {title}
+        </Text>
+        {description && (
+          <Text size="sm" c="dimmed" maw={350}>
+            {description}
+          </Text>
+        )}
+        {action}
+      </Stack>
+    </div>
+  );
+}