MantineUI（v7）でカードレイアウトを作成

実装したソースコード

page.tsx

    <Container>
      <Tabs defaultValue="articles" variant="default">
        <Tabs.List mb={40} grow>
          <Tabs.Tab value="articles" leftSection={<IconPhoto />} children="記事一覧" />
          <Tabs.Tab value="members" leftSection={<IconMessageCircle />} children="メンバー" />
        </Tabs.List>
        <Tabs.Panel value="articles">
          <Grid>
            {articles.map(article => (
              <Grid.Col span={{ base: 12, xs: 6, sm: 4 }} key={article.id}>
                <Card shadow="md" h="100%" component="a" target="_blank" href={article.path}>
                  <Card.Section>
                    <Image h={120} src={article.imageUrl} />
                  </Card.Section>
                  <Stack justify="space-between">
                    <Text mt="md" fw="bold" children={article.title} />
                    <Flex mt="xs" gap={8} align="center">
                      <Image w={28} h={28} radius="100%" src={article.userIconUrl} />
                      <Text children={article.username} />
                    </Flex>
                  </Stack>
                </Card>
              </Grid.Col>
            ))}
          </Grid>
        </Tabs.Panel>
        <Tabs.Panel value="members">メンバー一覧</Tabs.Panel>
      </Tabs>
    </Container>

実装したUI