feat(website): Add a happy message to playground output pane when no …

…errors or AST (#5868) (#5873) * feat(website): Add a happy message to playground output pane when no errors or AST (#5868) * Apply suggestions from code review Co-authored-by: Josh Goldberg <git@joshuakgoldberg.com>
typescript-eslint · Oct 25, 2022 · c4e0d86 · c4e0d86
1 parent 67744db
commit c4e0d86
Showing 1 changed file with 43 additions and 25 deletions.
diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
@@ -91,6 +91,18 @@ function ErrorBlock({
   );
 }
 
+function SuccessBlock(): JSX.Element {
+  return (
+    <div className="admonition alert alert--success">
+      <div className="admonition-content">
+        <div className={styles.fixerContainer}>
+          <div>All is ok!</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function ErrorsViewer({
   value,
 }: ErrorsViewerProps): JSX.Element {
@@ -113,31 +125,37 @@ export default function ErrorsViewer({
 
   return (
     <div className={styles.list}>
-      {value?.map(({ group, uri, items }) => {
-        return (
-          <div className="margin-top--sm" key={group}>
-            <h4>
-              {group}
-              {uri && (
-                <>
-                  {' - '}
-                  <a href={uri} target="_blank">
-                    docs <IconExternalLink width={13.5} height={13.5} />
-                  </a>
-                </>
-              )}
-            </h4>
-            {items.map((item, index) => (
-              <ErrorBlock
-                isLocked={isLocked}
-                setIsLocked={setIsLocked}
-                item={item}
-                key={index}
-              />
-            ))}
-          </div>
-        );
-      })}
+      {value?.length ? (
+        value.map(({ group, uri, items }) => {
+          return (
+            <div className="margin-top--md" key={group}>
+              <h4>
+                {group}
+                {uri && (
+                  <>
+                    {' - '}
+                    <a href={uri} target="_blank">
+                      docs <IconExternalLink width={13.5} height={13.5} />
+                    </a>
+                  </>
+                )}
+              </h4>
+              {items.map((item, index) => (
+                <ErrorBlock
+                  isLocked={isLocked}
+                  setIsLocked={setIsLocked}
+                  item={item}
+                  key={index}
+                />
+              ))}
+            </div>
+          );
+        })
+      ) : (
+        <div className="margin-top--md">
+          <SuccessBlock />
+        </div>
+      )}
     </div>
   );
 }