feat: home space list (#1400)

apps/client/src/features/space/components/space-grid.tsx

@@ -1,4 +1,4 @@
-import { Text, Avatar, SimpleGrid, Card, rem } from "@mantine/core";
+import { Text, Avatar, SimpleGrid, Card, rem, Group, Button } from "@mantine/core";
 import React, { useEffect } from 'react';
 import {
   prefetchSpace,
@@ -9,10 +9,11 @@ import { Link } from "react-router-dom";
 import classes from "./space-grid.module.css";
 import { formatMemberCount } from "@/lib";
 import { useTranslation } from "react-i18next";
+import { IconArrowRight } from "@tabler/icons-react";
 
 export default function SpaceGrid() {
   const { t } = useTranslation();
-  const { data, isLoading } = useGetSpacesQuery({ page: 1 });
+  const { data, isLoading } = useGetSpacesQuery({ page: 1, limit: 9 });
 
   const cards = data?.items.map((space, index) => (
     <Card
@@ -46,11 +47,25 @@ export default function SpaceGrid() {
 
   return (
     <>
-      <Text fz="sm" fw={500} mb={"md"}>
-        {t("Spaces you belong to")}
-      </Text>
+      <Group justify="space-between" align="center" mb="md">
+        <Text fz="sm" fw={500}>
+          {t("Spaces you belong to")}
+        </Text>
+      </Group>
 
       <SimpleGrid cols={{ base: 1, xs: 2, sm: 3 }}>{cards}</SimpleGrid>
+      
+      <Group justify="flex-end" mt="lg">
+        <Button
+          component={Link}
+          to="/spaces"
+          variant="subtle"
+          rightSection={<IconArrowRight size={16} />}
+          size="sm"
+        >
+          {t("View all spaces")}
+        </Button>
+      </Group>
     </>
   );
 }