fixes select styles on home page

.prettierignore

@@ -17,5 +17,5 @@ website/src/pages/docs/config-reference/schema-field.mdx
 website/src/pages/docs/getting-started/index.mdx
 website/src/pages/docs/guides/graphql-server-apollo-yoga.mdx
 website/src/pages/docs/guides/react.mdx
-website/src/pages/plugin-hub/index.mdx
-website/src/pages/plugin-hub/presets/near-operation-file-preset.mdx
+website/src/pages/plugins/index.mdx
+website/src/pages/plugins/presets/near-operation-file-preset.mdx

package.json

@@ -100,10 +100,7 @@
     "packages/**/src/**/*.{ts,tsx}": [
       "eslint --fix"
     ],
-    "**/*.{ts,tsx,graphql,yml}": [
-      "prettier --write"
-    ],
-    "**/*.json": [
+    "**/*.{js,jsx,cjs,mjs,ts,tsx,graphql,gql,yml,yaml,json,md}": [
       "prettier --write"
     ],
     "yarn.lock": [

website/package.json

@@ -75,7 +75,7 @@
     "@guild-docs/client": "4.0.0-alpha-977f9d3.0",
     "@guild-docs/server": "4.0.0",
     "@monaco-editor/react": "4.4.5",
-    "@theguild/components": "2.0.0-alpha-067b6c4.0",
+    "@theguild/components": "2.0.0-alpha-8c5e72a.0",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
     "dedent": "0.7.0",

website/src/components/live-demo/Editor.tsx

@@ -14,7 +14,7 @@ const Editor = ({
   readOnly?: boolean;
   onEdit: (value?: string) => void;
 }): ReactElement | null => {
-  const { theme } = useTheme()
+  const { theme } = useTheme();
   if (!canUseDOM) {
     return null;
   }

website/src/components/live-demo/LiveDemo.tsx

@@ -1,15 +1,14 @@
-import { useState, useEffect, Suspense, Fragment, ReactElement } from 'react';
+import { useState, useEffect, Suspense, ReactElement } from 'react';
 import { load } from 'js-yaml';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
-import { useTheme } from 'next-themes';
+import { useTheme } from '@theguild/components';
 import Select from 'react-select';
 import { EXAMPLES, EXAMPLES_ICONS } from './examples';
 import { getMode } from './formatter';
 import { generate } from './generate';
 import { Loading } from '../ui/Loading';
 import LiveDemoEditors from './LiveDemoEditors';
-import classes from './styles.module.css';
 
 const ErrorBoundary = dynamic(import('./ErrorBoundary'), { ssr: false });
 
@@ -49,8 +48,8 @@ const DEFAULT_EXAMPLE = {
 } as const;
 
 export const LiveDemo = (): ReactElement => {
-  const { theme } = useTheme()
-  const isDarkTheme = theme === 'dark'
+  const { theme } = useTheme();
+  const isDarkTheme = theme === 'dark';
   const [template, setTemplate] = useState(`${DEFAULT_EXAMPLE.catName}__${DEFAULT_EXAMPLE.index}`);
   const [schema, setSchema] = useState(EXAMPLES[DEFAULT_EXAMPLE.catName][DEFAULT_EXAMPLE.index].schema);
   const [documents, setDocuments] = useState(EXAMPLES[DEFAULT_EXAMPLE.catName][DEFAULT_EXAMPLE.index].documents);
@@ -83,60 +82,45 @@ export const LiveDemo = (): ReactElement => {
 
   return (
     <div className="hidden lg:!block">
-      <div className={classes.picker}>
-        <h3>Choose Live Example: </h3>
-        <div>
-          <Select
-            isSearchable={false}
-            styles={{
-              menu: styles => ({ ...styles, ...(isDarkTheme && { backgroundColor: 'black' }) }),
-              control: styles => ({ ...styles, ...(isDarkTheme && { backgroundColor: 'black' }) }),
-              container: styles => ({
-                ...styles,
-                display: 'inline-block',
-                width: '100%',
-                textAlign: 'left',
-              }),
-              option: (styles, { isFocused }) => ({
-                ...styles,
-                fontSize: 13,
-                ...(isDarkTheme && isFocused && { backgroundColor: 'gray' }),
-              }),
-              singleValue: styles => ({
-                ...styles,
-                width: '100%',
-                ...(isDarkTheme && { color: 'white' }),
-              }),
-            }}
-            isMulti={false}
-            isClearable={false}
-            onChange={e => changeTemplate(e.selectId)}
-            getOptionValue={o => o.selectId}
-            getOptionLabel={o => (
-              <>
-                <span>{o.name}</span>
-                <span className={classes.exampleTags}>
-                  {o.tags?.map((t, index) => {
-                    const icon = EXAMPLES_ICONS[t];
-                    const key = `${o.name}_${index}`;
-                    return icon ? (
-                      <Fragment key={key}>
-                        <Image priority height={18} width={18} alt={icon.alt} src={icon.src} />
-                        &nbsp;
-                      </Fragment>
-                    ) : (
-                      <span key={key} className={classes.exampleTag}>
-                        {t}
-                      </span>
-                    );
-                  })}
-                </span>
-              </>
-            )}
-            defaultValue={groupedExamples[0].options[0]}
-            options={groupedExamples}
-          />
-        </div>
+      <div className="mx-auto mb-4 w-1/2">
+        <h3 className="mb-2 text-center">Choose Live Example:</h3>
+        <Select
+          isSearchable={false}
+          className="
+            rounded-md
+            [&>div]:dark:bg-black
+            [&>div>div>div]:dark:text-gray-200
+          "
+          styles={{
+            option: (styles, { isFocused }) => ({
+              ...styles,
+              fontSize: 13,
+              ...(isFocused && isDarkTheme && { backgroundColor: 'gray' }),
+            }),
+          }}
+          isMulti={false}
+          isClearable={false}
+          onChange={e => changeTemplate(e.selectId)}
+          getOptionValue={o => o.selectId}
+          getOptionLabel={o => (
+            <div className="flex items-center justify-end gap-1.5">
+              <span className="mr-auto">{o.name}</span>
+              {o.tags?.map((t, index) => {
+                const icon = EXAMPLES_ICONS[t];
+                const key = `${o.name}_${index}`;
+                return icon ? (
+                  <Image key={key} priority height={18} width={18} alt={icon.alt} src={icon.src} />
+                ) : (
+                  <span key={key} className="rounded-lg bg-gray-200 px-2 px-1 text-xs text-gray-800">
+                    {t}
+                  </span>
+                );
+              })}
+            </div>
+          )}
+          defaultValue={groupedExamples[0].options[0]}
+          options={groupedExamples}
+        />
       </div>
       <div className="flex border-y border-gray-300">
         <ErrorBoundary>

website/src/components/live-demo/styles.module.css

@@ -1,43 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
 
-.picker {
-  padding-left: 30px;
-  padding-right: 30px;
-  padding-bottom: 5px;
-  margin: 30px auto 0 auto;
-  text-align: center;
-  width: 50%;
-}
-
-.exampleDesc {
-  font-size: 0.9em;
-  border-left: 10px #f1f1f1 solid;
-  padding-left: 10px;
-  margin-top: 10px;
-  text-align: left;
-}
-
 .react-monaco-editor-container,
 .monaco-editor {
   height: 400px;
 }
 
-.exampleTag {
-  background-color: gainsboro;
-  border-radius: 10px;
-  font-size: 11px;
-  padding: 3px 5px 3px 5px;
-  color: black !important;
-  margin-right: 3px;
-  margin-left: 3px;
-}
-
-.exampleTags {
-  padding-right: 20px;
-  float: right;
-  display: flex;
-}
-
 .column {
   align-self: stretch;
   flex-flow: column;

website/src/pages/_app.tsx

@@ -1,9 +1,8 @@
 import { ReactElement } from 'react';
 import Script from 'next/script';
 import { AppProps } from 'next/app';
-import { ThemeProvider } from 'next-themes';
 import { useGoogleAnalytics } from '@guild-docs/client';
-import { Header, FooterExtended } from '@theguild/components';
+import { Header, ThemeProvider, FooterExtended } from '@theguild/components';
 
 import 'nextra-theme-docs/style.css';
 import '../../public/style.css';

website/src/pages/docs/custom-codegen/contributing.mdx

@@ -261,7 +261,7 @@ const PACKAGES: Package<Tags>[] = [
     title: 'my-plugin', // page title
     npmPackage: '@graphql-codegen/my-plugin', // name of the npm package
     iconUrl: '/assets/img/icons/codegen.svg', // you can specify a custom icon, or use codegen's
-    tags: ['plugin', 'utilities'], // add tags for the search engine
+    tags: ['plugin', 'utilities'] // add tags for the search engine
   }
   // …
 ]

website/src/pages/plugins/c-sharp/c-sharp-operations.mdx

@@ -1,6 +1,7 @@
 ---
 title: c-sharp-operations
 ---
+
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'
 

website/src/pages/plugins/flow/flow-operations.mdx

@@ -1,6 +1,7 @@
 ---
 title: flow-operations
 ---
+
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'
 

website/src/pages/plugins/flow/flow-resolvers.mdx

@@ -1,6 +1,7 @@
 ---
 title: flow-resolvers
 ---
+
 import Callout from 'nextra-theme-docs/callout'
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'

website/src/pages/plugins/java/java-apollo-android.mdx

@@ -1,6 +1,7 @@
 ---
 title: java-apollo-android
 ---
+
 import Callout from 'nextra-theme-docs/callout'
 import { PackageApiDocs, PackageHeader, PackageCmd } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'

website/src/pages/plugins/java/java-resolvers.mdx

@@ -1,6 +1,7 @@
 ---
 title: java-resolvers
 ---
+
 import Callout from 'nextra-theme-docs/callout'
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'

website/src/pages/plugins/java/java.mdx

@@ -1,6 +1,7 @@
 ---
 title: java
 ---
+
 import Callout from 'nextra-theme-docs/callout'
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'

website/src/pages/plugins/java/kotlin.mdx

@@ -1,6 +1,7 @@
 ---
 title: kotlin
 ---
+
 import Callout from 'nextra-theme-docs/callout'
 import { PackageApiDocs, PackageHeader, PackageCmd } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'

website/src/pages/plugins/other/add.mdx

@@ -1,6 +1,7 @@
 ---
 title: add
 ---
+
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'
 

website/src/pages/plugins/other/fragment-matcher.mdx

@@ -1,6 +1,7 @@
 ---
 title: fragment-matcher
 ---
+
 import Callout from 'nextra-theme-docs/callout'
 import { Tabs, Tab } from 'nextra-theme-docs/tabs'
 import { PackageApiDocs, PackageHeader } from '@/components'

website/src/pages/plugins/other/hasura-allow-list.mdx

@@ -1,6 +1,7 @@
 ---
 title: hasura-allow-list
 ---
+
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'
 

website/src/pages/plugins/other/introspection.mdx

@@ -1,6 +1,7 @@
 ---
 title: introspection
 ---
+
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'
 

website/src/pages/plugins/other/jsdoc.mdx

@@ -1,6 +1,7 @@
 ---
 title: jsdoc
 ---
+
 import { PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'
 

website/src/pages/plugins/other/reason-client.mdx

@@ -1,6 +1,7 @@
 ---
 title: reason-client
 ---
+
 import { PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'
 

website/src/pages/plugins/other/schema-ast.mdx

@@ -1,6 +1,7 @@
 ---
 title: schema-ast
 ---
+
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'
 

website/src/pages/plugins/other/time.mdx

@@ -1,6 +1,7 @@
 ---
 title: time
 ---
+
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'
 

website/src/pages/plugins/other/urql-introspection.mdx

@@ -1,6 +1,7 @@
 ---
 title: urql-introspection
 ---
+
 import Callout from 'nextra-theme-docs/callout'
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'

website/src/pages/plugins/presets/gql-tag-operations-preset.mdx

@@ -1,6 +1,7 @@
 ---
 title: gql-tag-operations-preset
 ---
+
 import Callout from 'nextra-theme-docs/callout'
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'

website/src/pages/plugins/presets/graphql-modules-preset.mdx

@@ -1,6 +1,7 @@
 ---
 title: graphql-modules-preset
 ---
+
 import Callout from 'nextra-theme-docs/callout'
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'

website/src/pages/plugins/presets/import-types-preset.mdx

@@ -1,6 +1,7 @@
 ---
 title: import-types-preset
 ---
+
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'
 

website/src/pages/plugins/presets/near-operation-file-preset.mdx

@@ -1,6 +1,7 @@
 ---
 title: near-operation-file-preset
 ---
+
 import Callout from 'nextra-theme-docs/callout'
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'

website/src/pages/plugins/typescript/named-operations-object.mdx

@@ -1,6 +1,7 @@
 ---
 title: named-operations-object
 ---
+
 import { PackageApiDocs, PackageHeader } from '@/components'
 import { getNpmInfo } from '@/lib/get-npm-info'