initial avatar and avatar layout components

src/pages/credits/_components/Avatar.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+export interface avatarProps {
+  imgUrl: string;
+  name?: string;
+  userName?: string;
+  description?: string;
+}
+
+export interface avatarLayoutProps {
+  list: list[];
+}
+
+export const Avatar = ({
+  imgUrl,
+  name,
+  userName,
+  description,
+}: avatarProps): JSX.Element => {
+  return (
+    <div className="card m-4 border-2 border-secondary">
+      <div className="card__body">
+        <div className="avatar">
+          <img
+            className="avatar__photo avatar__photo--sm"
+            src={imgUrl}
+          />
+          <div className="avatar__intro">
+            <div className="avatar__name">
+              {name}
+            </div>
+            <small class="avatar__subtitle">
+              {description}
+            </small>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const AvatarLayout = ({
+  list
+} :avatarLayoutProps): JSX.Element => {
+  return (
+    <div className="container">
+      <div className="flex flex-wrap justify-center bg-primary">
+        {list.map((e) => {
+          return <Avatar/>
+          })
+        }
+      </div>
+    </div>
+  )
+}

src/pages/credits/index.tsx

@@ -2,6 +2,11 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 
+import {
+  Avatar,
+  AvatarLayout
+ } from './_components/Avatar';
+
 const Credits = (): JSX.Element => {
   const partnerLogos = [
     {
@@ -72,10 +77,12 @@ const Credits = (): JSX.Element => {
         <h3>
           Open Collective Donations
           {/*Open Collective Donations*/}
+          <AvatarLayout list={[]}/>
         </h3>
         <h3>
           GitHub Sponsor Donations
           {/*GitHub Sponsor Donations*/}
+          <AvatarLayout list={[]}/>
         </h3>
        </div>
        <div className="container mx-auto p-6 leading-normal space-y-4">
@@ -101,8 +108,12 @@ const Credits = (): JSX.Element => {
           Literally thousands of hours have gone into creating, maintaining, and improving Meshtastic. Without our contributors none of this would be possible. Thank you for donating the time for each and every commit, issue, and pull request.
         </p>
         {/*GitHub Organization Contributors*/}
+        <AvatarLayout list={[]}/>
        </div>
        {/*Admin Bios*/}
+       <div className="container mx-auto p-6 leading-normal space-y-4">
+         <AvatarLayout list={[]}/>
+        </div>
      </main>
    </Layout>
  )