🚧 WIP on about page

src/components/layout/header/About/Contributors.tsx

@@ -0,0 +1,94 @@
+import {
+  Anchor,
+  Avatar,
+  Group,
+  Loader,
+  ScrollArea,
+  Stack,
+  Table,
+  Text,
+  createStyles,
+} from '@mantine/core';
+import { useQuery } from '@tanstack/react-query';
+import { cache } from 'react';
+import { REPO_URL } from '../../../../../data/constants';
+
+// Generated by https://quicktype.io
+
+export interface Contributors {
+  login: string;
+  id: number;
+  node_id: string;
+  avatar_url: string;
+  gravatar_id: string;
+  url: string;
+  html_url: string;
+  followers_url: string;
+  following_url: string;
+  gists_url: string;
+  starred_url: string;
+  subscriptions_url: string;
+  organizations_url: string;
+  repos_url: string;
+  events_url: string;
+  received_events_url: string;
+  type: Type;
+  site_admin: boolean;
+  contributions: number;
+}
+
+export enum Type {
+  Bot = 'Bot',
+  User = 'User',
+}
+
+export function ContributorsTable() {
+  // Type data as Contributors
+  const { data, isFetching } = useQuery({
+    queryKey: ['contributors'],
+    cacheTime: 1000 * 60 * 60 * 24,
+    staleTime: 1000 * 60 * 60 * 5,
+    queryFn: () =>
+      fetch(`https://api.github.com/repos/${REPO_URL}/contributors?per_page=25`, {
+        cache: 'force-cache',
+      }).then((res) => res.json()) as Promise<Contributors[]>,
+  });
+  if (isFetching || !data) return <Loader />;
+
+  const rows = data.map((contributor) => (
+    <tr key={contributor.id}>
+      <td>
+        <Anchor href={`https://github.com/${contributor.login}`} target="_blank">
+          <Group noWrap>
+            <Avatar
+              size={25}
+              radius="lg"
+              src={contributor.avatar_url}
+              alt={contributor.login}
+            />
+            {contributor.login}
+          </Group>
+        </Anchor>
+      </td>
+      <td>{contributor.contributions}</td>
+    </tr>
+  ));
+
+  return (
+    <Stack>
+      <h5>Credits to our amazing contributors</h5>
+
+      <ScrollArea h={800}>
+        <Table miw={700}>
+          <thead>
+            <tr>
+              <th>Contributor</th>
+							<th>Contributions</th>
+            </tr>
+          </thead>
+          <tbody>{rows}</tbody>
+        </Table>
+      </ScrollArea>
+    </Stack>
+  );
+}