222: add contributors field on snippet

snippets/javascript/color-manipulation/rgb-to-hex-color.md

@@ -9,10 +9,10 @@ tags: color,conversion
 function rgbToHex(r, g, b) {
   const toHex = (n) => {
     const hex = n.toString(16);
-    return hex.length === 1 ? '0' + hex : hex;
+    return hex.length === 1 ? "0" + hex : hex;
   };
-  
-  return '#' + toHex(r) + toHex(g) + toHex(b);
+
+  return "#" + toHex(r) + toHex(g) + toHex(b);
 }
 
 // Usage:

src/components/SnippetModal.tsx

@@ -68,7 +68,7 @@ const SnippetModal: React.FC<Props> = ({
             {snippet.description}
           </p>
           <p>
-            Contributed by{" "}
+            Created by{" "}
             <a
               href={`https://github.com/${snippet.author}`}
               target="_blank"
@@ -78,6 +78,30 @@ const SnippetModal: React.FC<Props> = ({
               @{snippet.author}
             </a>
           </p>
+          {(snippet.contributors ?? []).length > 0 && (
+            <div className="contributors">
+              <span>Contributors: </span>
+              {snippet.contributors
+                ?.slice(0, 3)
+                .map((contributor, index, slicedArray) => (
+                  <>
+                    <a
+                      key={contributor}
+                      href={`https://github.com/${contributor}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="styled-link"
+                    >
+                      @{contributor}
+                    </a>
+                    {index < slicedArray.length - 1 && ", "}
+                  </>
+                ))}
+              {(snippet.contributors?.length ?? 0) > 3 && (
+                <span> & {snippet.contributors!.length - 3} more</span>
+              )}
+            </div>
+          )}
           <ul role="list" className="modal__tags">
             {snippet.tags.map((tag) => (
               <li key={tag} className="modal__tag">

src/types/index.ts

@@ -18,6 +18,7 @@ export type SnippetType = {
   code: string;
   tags: string[];
   author: string;
+  contributors?: string[];
 };
 
 export type AppState = {