feat(react): add Collaborators component

Author: Josem1801

js/react/lib/components/avatar/avatar.component.tsx

@@ -0,0 +1,38 @@
+import { withAs } from "../../utils/hoc/with-as.hoc";
+import { cn } from "../../utils/tw-merge";
+
+type AvatarProps = {
+  avatarUrl: string;
+  alt?: string;
+  className?: string;
+  size?: number;
+  style?: React.CSSProperties;
+};
+
+export const Avatar = withAs(
+  (
+    Component,
+    { avatarUrl, alt, size = 32, className, style, ...rest }: AvatarProps
+  ) => {
+    return (
+      <Component
+        {...rest}
+        className={cn([
+          "grid aspect-square place-items-center overflow-hidden rounded-full border object-cover",
+          className,
+        ])}
+        style={{
+          width: size,
+          height: size,
+          ...style,
+        }}
+      >
+        <img
+          className="aspect-square h-full w-full"
+          src={avatarUrl}
+          alt={alt}
+        />
+      </Component>
+    );
+  }
+);

js/react/lib/components/avatar/index.ts

@@ -0,0 +1 @@
+export * from "./avatar.component";

js/react/lib/components/collaborators/collaborators.component.tsx

@@ -0,0 +1,61 @@
+import { Fragment } from "react/jsx-runtime";
+import { Github } from "../../icons";
+import { Avatar } from "../avatar/avatar.component";
+import { MAX_COLLABORATORS } from "./collaborators.const";
+import { Button } from "../button";
+
+type Collaborator = {
+  avatarUrl: string;
+  nickname: string;
+};
+
+type CollaboratorsProps = {
+  collaborators: Array<Collaborator>;
+  sourceUrl: string;
+};
+
+export const Collaborators = ({
+  collaborators = [],
+  sourceUrl,
+}: CollaboratorsProps) => {
+  const numberOfCollaborators = collaborators.length;
+  const isSingleCollaborator = numberOfCollaborators === 1;
+
+  const hasMaxCollaborators = numberOfCollaborators > MAX_COLLABORATORS;
+  const extraCollaborators = numberOfCollaborators - MAX_COLLABORATORS;
+  return (
+    <div className="flex h-12 w-full items-center justify-between">
+      <div className="flex w-fit items-center">
+        {collaborators.slice(0, MAX_COLLABORATORS).map((collaborator, idx) => {
+          const space = idx ? 12 : 0;
+          return (
+            <Fragment>
+              <Avatar
+                avatarUrl={collaborator.avatarUrl}
+                style={{ marginLeft: `-${space}px` }}
+                as="div"
+              />
+            </Fragment>
+          );
+        })}
+
+        {isSingleCollaborator ? (
+          <span className="text-caption pl-2">{collaborators[0].nickname}</span>
+        ) : null}
+
+        {hasMaxCollaborators ? (
+          <span className="text-caption pl-2">+{extraCollaborators}</span>
+        ) : null}
+      </div>
+
+      <Button
+        as="a"
+        href={sourceUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        icon={<Github />}
+        variant="icon"
+      />
+    </div>
+  );
+};

js/react/lib/components/collaborators/collaborators.const.ts

@@ -0,0 +1 @@
+export const MAX_COLLABORATORS = 4;

js/react/lib/components/collaborators/index.ts

@@ -0,0 +1 @@
+export * from "./collaborators.component";

js/react/lib/index.ts

@@ -4,4 +4,5 @@ export * from "./components/chip";
 export * from "./components/tag";
 export * from "./components/flap";
 export * from "./components/level";
+export * from "./components/collaborators";
 export * from "./icons";

js/react/showcase/App.tsx

@@ -7,9 +7,16 @@ import {
   Flap,
   Chip,
   Level,
+  Collaborators,
 } from "@rustlanges/react";
 import { ShowComponent } from "./ShowComponent";
 
+const collaborator = {
+  avatarUrl:
+    "https://images.unsplash.com/photo-1575936123452-b67c3203c357?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D",
+  nickname: "Colaborador",
+};
+
 export function App() {
   return (
     <div className="mx-auto mt-10 max-w-[1024px] px-5">
@@ -164,6 +171,42 @@ export function App() {
         }}
         component={Level}
       />
+
+      <ShowComponent title="Collaborators">
+        <div className="grid w-full justify-center gap-4">
+          <div className="w-60">
+            <Collaborators
+              collaborators={[
+                collaborator,
+                collaborator,
+                collaborator,
+                collaborator,
+              ]}
+              sourceUrl="https://github.com/RustLangES/design-system-components"
+            />
+          </div>
+          <div className="w-60">
+            <Collaborators
+              collaborators={[collaborator]}
+              sourceUrl="https://github.com/RustLangES/design-system-components"
+            />
+          </div>
+          <div className="w-60">
+            <Collaborators
+              collaborators={[
+                collaborator,
+                collaborator,
+                collaborator,
+                collaborator,
+                collaborator,
+                collaborator,
+                collaborator,
+              ]}
+              sourceUrl="https://github.com/RustLangES/design-system-components"
+            />
+          </div>
+        </div>
+      </ShowComponent>
     </div>
   );
 }