fix: formatting drift & linter in playground

playground/README.md

@@ -16,7 +16,7 @@ import "@wundergraph/playground/style.css"
 
 export const YourComponent {
     return (
-        <Playground 
+        <Playground
             routingUrl={} // the endpoint of the router
             hideLogo={} // boolean to hide the wundergraph logo
             theme={} // 'light' or 'dark';
@@ -25,14 +25,14 @@ export const YourComponent {
 }
 ```
 
-
-
 # Development
+
 This is a version of the playground that is found in cosmo studio that can be built and bundled into the router.
 
 ```bash
 pnpm run build:router
 ```
+
 This will build a single html file and update the [graphiql.html](/router/internal/graphiql/graphiql.html) in the router.
 
 Note: To build it as a plugin just run `pnpm build`

playground/postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

playground/src/components/code-viewer.tsx

@@ -1,24 +1,24 @@
-import { cn } from "@/lib/utils";
-import babelPlugin from "prettier/plugins/babel";
-import estreePlugin from "prettier/plugins/estree";
-import graphQLPlugin from "prettier/plugins/graphql";
-import * as prettier from "prettier/standalone";
-import { Highlight, themes } from "prism-react-renderer";
-import * as Prism from "prismjs";
-import "prismjs/components/prism-graphql";
-import "prismjs/components/prism-json";
-import { useEffect, useState } from "react";
+import { cn } from '@/lib/utils';
+import babelPlugin from 'prettier/plugins/babel';
+import estreePlugin from 'prettier/plugins/estree';
+import graphQLPlugin from 'prettier/plugins/graphql';
+import * as prettier from 'prettier/standalone';
+import { Highlight, themes } from 'prism-react-renderer';
+import * as Prism from 'prismjs';
+import 'prismjs/components/prism-graphql';
+import 'prismjs/components/prism-json';
+import { useEffect, useState } from 'react';
 
 export const CodeViewer = ({
   code,
   className,
-  language = "graphql",
+  language = 'graphql',
 }: {
   code: string;
   className?: string;
-  language?: "graphql" | "json";
+  language?: 'graphql' | 'json';
 }) => {
-  const [content, setContent] = useState("");
+  const [content, setContent] = useState('');
 
   useEffect(() => {
     const set = async (source: string) => {
@@ -34,39 +34,27 @@ export const CodeViewer = ({
   }, [code, language]);
 
   return (
-    <Highlight
-      theme={themes.nightOwl}
-      code={content}
-      language={language}
-      prism={Prism}
-    >
+    <Highlight theme={themes.nightOwl} code={content} language={language} prism={Prism}>
       {({ style, tokens, getLineProps, getTokenProps }) => (
-        <pre
-          style={{ ...style, background: "", backgroundColor: "" }}
-          className={cn("py-4 text-xs", className)}
-        >
+        <pre style={{ ...style, background: '', backgroundColor: '' }} className={cn('py-4 text-xs', className)}>
           {tokens.map((line, i, allLines) => {
             const numberSectionWidth =
               allLines.length > 10
                 ? allLines.length > 100
                   ? allLines.length > 1000
-                    ? "w-18"
-                    : "w-16"
-                  : "w-12"
-                : "w-8";
+                    ? 'w-18'
+                    : 'w-16'
+                  : 'w-12'
+                : 'w-8';
 
             const lineNo = `L${i + 1}`;
 
             return (
-              <div
-                id={`id-${lineNo}`}
-                key={i.toString()}
-                {...getLineProps({ line })}
-              >
+              <div id={`id-${lineNo}`} key={i.toString()} {...getLineProps({ line })}>
                 <div
                   className={cn(
-                    "sticky left-0 mr-4 inline-block select-none border-r bg-background pr-2 text-right text-muted-foreground",
-                    numberSectionWidth
+                    'sticky left-0 mr-4 inline-block select-none border-r bg-background pr-2 text-right text-muted-foreground',
+                    numberSectionWidth,
                   )}
                 >
                   <span>{i + 1}</span>

playground/src/components/empty-state.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 export interface EmptyStateProps {
   icon?: React.ReactNode;
@@ -12,20 +12,11 @@ export const EmptyState: React.FC<EmptyStateProps> = (props) => {
   const { icon, title, description, actions, className } = props;
 
   return (
-    <div
-      className={cn(
-        "flex h-[520px] w-full items-center justify-center rounded-md",
-        className
-      )}
-    >
+    <div className={cn('flex h-[520px] w-full items-center justify-center rounded-md', className)}>
       <div className="mx-auto flex w-full flex-col items-center justify-center px-6 text-center md:max-w-2xl">
-        <span className="m-auto flex h-12 w-12 items-center justify-center text-6xl text-muted-foreground">
-          {icon}
-        </span>
+        <span className="m-auto flex h-12 w-12 items-center justify-center text-6xl text-muted-foreground">{icon}</span>
         <h3 className="mt-4 text-lg font-semibold">{title}</h3>
-        <p className="mb-4 mt-2 break-words text-sm text-muted-foreground">
-          {description}
-        </p>
+        <p className="mb-4 mt-2 break-words text-sm text-muted-foreground">{description}</p>
         <div className="mb-4 flex w-full justify-center">{actions}</div>
       </div>
     </div>