testing

Author: bjohansebas

apps/site/components/Backers.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import Avatar from '@node-core/ui-components/Common/AvatarGroup/Avatar';
+import { use } from 'react';
+
+export type Backer = {
+  name: string;
+  image: string;
+  url: string;
+};
+
+const Backers = ({ backers }: { backers: Promise<Array<Backer>> }) => {
+  const backer = use(backers);
+
+  return (
+    <div className="flex max-w-full flex-wrap items-center justify-center gap-1">
+      {backer.map(({ name, image, url }, i) => (
+        <Avatar nickname={name} image={image} url={url} key={`${name}-${i}`} />
+      ))}
+    </div>
+  );
+};
+
+export default Backers;

apps/site/components/withBackers.tsx

@@ -1,16 +1,18 @@
-import Avatar from '@node-core/ui-components/Common/AvatarGroup/Avatar';
+// import Avatar from '@node-core/ui-components/Common/AvatarGroup/Avatar';
 import type { FC, PropsWithChildren } from 'react';
 
-import provideBackers from '#site/next-data/providers/backersData';
+// import provideBackers from '#site/next-data/providers/backersData';
+import { fetchOpenCollectiveData } from '#site/next-data/generators/backersData.mjs';
+
+import type { Backer } from './Backers';
+import Backers from './Backers';
 
 const WithBackers: FC<PropsWithChildren> = () => {
-  const backers = provideBackers();
+  const backers = fetchOpenCollectiveData() as Promise<Array<Backer>>;
 
   return (
     <div className="flex max-w-full flex-wrap items-center justify-center gap-1">
-      {backers.map(({ name, image, url }, i) => (
-        <Avatar nickname={name} image={image} url={url} key={`${name}-${i}`} />
-      ))}
+      <Backers backers={backers} />
     </div>
   );
 };