Query Block w GraphiQL

components/FeatureTabsLeft.jsx

@@ -59,16 +59,16 @@ const FeatureTabsLeft = (layout) => {
                         'group relative my-2 rounded-full px-4  py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
                         selectedIndex === featureIndex
                           ? 'bg-slate-600 group-hover:text-white dark:bg-slate-800 lg:ring-1 lg:ring-inset lg:ring-white/10 lg:dark:bg-slate-700 '
-                          : 'bg-gray-100 group-hover:text-white hover:bg-slate-600 dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700',
+                          : 'bg-gray-100 hover:bg-slate-600 group-hover:text-white dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700',
                       )}
                     >
                       <h3>
                         <Tab
                           className={clsx(
                             'font-display text-lg [&:not(:focus-visible)]:focus:outline-none',
                             selectedIndex === featureIndex
-                              ? 'text-white group-hover:text-white hover:text-white dark:text-slate-200 dark:hover:text-slate-300 lg:dark:hover:text-slate-200'
-                              : 'text-slate-800 group-hover:text-white hover:text-white dark:hover:text-slate-200',
+                              ? 'text-white hover:text-white group-hover:text-white dark:text-slate-200 dark:hover:text-slate-300 lg:dark:hover:text-slate-200'
+                              : 'text-slate-800 hover:text-white group-hover:text-white dark:hover:text-slate-200',
                           )}
                         >
                           <span className="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none" />

components/MiniGraphiQL.jsx

@@ -0,0 +1,158 @@
+import { useTheme } from 'next-themes';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+
+const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly }) => {
+  const [GraphiQL, setGraphiQL] = useState(null);
+  const { theme, resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    let isMounted = true;
+    (async () => {
+      if (typeof window !== 'undefined') {
+        try {
+          const GraphiQLModule = await import('graphiql');
+          await import('graphiql/graphiql.min.css');
+          if (isMounted) {
+            setGraphiQL(() => GraphiQLModule.default);
+          }
+        } catch (error) {
+          console.error('Failed to load GraphiQL module:', error);
+        }
+      }
+    })();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem('graphiql:tabState');
+      localStorage.setItem('graphiql:theme', theme);
+
+      // Check for the theme and update the body class
+      const bodyClassList = document.body.classList;
+      if (theme === 'dark') {
+        bodyClassList.add('graphiql-dark');
+      } else {
+        bodyClassList.remove('graphiql-dark');
+      }
+    }
+  }, [theme]);
+
+  const fetcher = async (graphQLParams) => {
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(graphQLParams),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Network response was not ok: ${response.statusText}`);
+      }
+
+      return await response.json();
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error; // Re-throw to make sure GraphiQL displays the error
+    }
+  };
+
+  let parsedVariables = initialVariables;
+  if (typeof initialVariables === 'string') {
+    try {
+      parsedVariables = JSON.parse(initialVariables);
+    } catch (e) {
+      console.error('Failed to parse variables as JSON:', e);
+    }
+  }
+
+  const containerStyles = {
+    height: '80vh',
+    maxHeight: 'auto',
+    borderRadius: '4px',
+    padding: '0.5rem',
+    display: 'flex',
+    flex: '1 1 0%',
+  };
+
+  const graphiqlStyles = `
+    :root {
+      color-scheme: ${theme};
+    }
+    .graphiql-container {
+      background-color: transparent !important;
+      font-size: 14px;
+    }
+    .graphiql-container * {
+      box-shadow: none !important;
+    }
+    .graphiql-container .graphiql-editor-tools button:nth-child(2) {
+      display: none;
+    }
+    .graphiql-container .graphiql-editors {
+      border-radius: 2px;
+    }
+    .graphiql-container .graphiql-editors.full-height {
+      margin-top: 8px;
+    }
+    .graphiql-container .graphiql-query-editor {
+      border-bottom: 0;
+      padding: 6px;
+      column-gap: 6px;
+    }
+    .graphiql-container .graphiql-response .result-window {
+      padding-top: 8px;
+    }
+    .graphiql-container .graphiql-session-header {
+      display: none;
+    }
+    .graphiql-container .graphiql-sessions {
+      border-radius: 2px;
+    }
+    .graphiql-container .graphiql-sidebar {
+      display: none;
+    }
+    .graphiql-toolbar button:nth-child(2) {
+      display: none; /* prettify */
+    }
+    .graphiql-toolbar button:nth-child(3) {
+      display: none; /* merge */
+    }
+  `;
+
+  return (
+    <div style={containerStyles} className={resolvedTheme}>
+      <style dangerouslySetInnerHTML={{ __html: graphiqlStyles }} />
+      {GraphiQL ? (
+        <GraphiQL
+          fetcher={fetcher}
+          shouldPersistHeaders={false}
+          query={initialQuery}
+          variables={parsedVariables}
+          readOnly={readOnly}
+        />
+      ) : (
+        <div>Loading GraphiQL...</div>
+      )}
+    </div>
+  );
+};
+
+MiniGraphiQLClient.propTypes = {
+  initialQuery: PropTypes.string,
+  initialVariables: PropTypes.string,
+  endpoint: PropTypes.string.isRequired,
+  readOnly: PropTypes.bool,
+};
+
+MiniGraphiQLClient.defaultProps = {
+  initialQuery: '# Type a GraphQL query here',
+  initialVariables: '{}',
+  readOnly: false,
+};
+
+export default MiniGraphiQLClient;

components/SiteHeader.jsx

@@ -8,7 +8,7 @@ import { Logo } from '@/components/Logo'
 import { MobileNavigation } from '@/components/MobileNavigation'
 import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { Search } from '@/components/Search'
-import { ThemeSelector } from '@/components/ThemeSelector'
+import { ModeToggle } from '@/components/ThemeSelector'
 
 export function SiteHeader({ navigation }) {
   let [isScrolled, setIsScrolled] = useState(false)
@@ -48,7 +48,7 @@ export function SiteHeader({ navigation }) {
         <Search />
       </div>
       <div className="relative flex basis-0 justify-end gap-4 sm:gap-8 md:grow">
-        <ThemeSelector className="relative z-10" />
+        <ModeToggle className="relative z-10" />
         <Link
           href="https://github.com/wp-graphql/wpgraphql-acf"
           className="group"

components/ThemeProvider.jsx

@@ -0,0 +1,8 @@
+"use client"
+
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import * as React from "react"
+
+export function ThemeProvider({ children, ...props }) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}