Fix server components warning in examples page

Author: hasparus

website/src/app/(content-pages)/examples/live-demo.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useState } from 'react';
+
+export function LiveDemo() {
+  const [exampleRepo, setExampleRepo] = useState('json-schema-example');
+  return (
+    <div className="min-h-[calc(100vh-var(--nextra-navbar-height))] flex flex-col">
+      <div className="flex items-center justify-center gap-2 py-8">
+        Choose Live Example:
+        <select
+          value={exampleRepo}
+          onChange={e => {
+            setExampleRepo(e.target.value);
+          }}
+          className="border rounded-md py-1.5"
+        >
+          {Object.entries(EXAMPLES).map(([groupName, group]) => (
+            <optgroup key={groupName} label={groupName}>
+              {Object.entries(group).map(([exampleName, value]) => (
+                <option key={exampleName} label={exampleName} value={value}>
+                  {exampleName}
+                </option>
+              ))}
+            </optgroup>
+          ))}
+        </select>
+      </div>
+      <iframe
+        loading="lazy"
+        src={`https://codesandbox.io/embed/github/ardatan/graphql-mesh/tree/master/examples/${exampleRepo}?fontsize=14&hidenavigation=1&theme=dark&module=%2F.meshrc.yml`}
+        className="grow"
+        title={exampleRepo}
+        allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+        sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+      />
+    </div>
+  );
+}
+
+export const EXAMPLES = {
+  OpenAPI: {
+    'JavaScript Wiki': 'openapi-javascript-wiki',
+    'Location Weather': 'openapi-location-weather',
+    YouTrack: 'openapi-youtrack',
+    Stripe: 'openapi-stripe',
+    StackExchange: 'openapi-stackexchange',
+    'WeatherBit on React App': 'openapi-react-weatherbit',
+    'NextJS with Apollo': 'nextjs-apollo-example',
+  },
+  'JSON Schema': {
+    'Fake API': 'json-schema-example',
+    'Covid-19 Statistics': 'json-schema-covid',
+    'Subscriptions, Webhooks & Live Queries': 'json-schema-subscriptions',
+  },
+  OData: {
+    TripPin: 'odata-trippin',
+    'Microsoft Graph': 'odata-microsoft',
+  },
+  SOAP: {
+    'Country Info': 'soap-country-info',
+  },
+  MySQL: {
+    Rfam: 'mysql-rfam',
+  },
+  SQLite: {
+    Chinook: 'sqlite-chinook',
+  },
+  'Apollo Federation': {
+    'Apollo Federation Example': 'federation-example',
+  },
+  'Apache Thrift': {
+    Calculator: 'thrift-calculator',
+  },
+  gRPC: {
+    'Movies Example': 'grpc-example',
+  },
+  Neo4J: {
+    'Movies Example': 'neo4j-example',
+  },
+};

website/src/app/(content-pages)/examples/page.tsx

@@ -1,84 +1,10 @@
-import { useState } from 'react';
+import { LiveDemo } from './live-demo';
 
 export const metadata = {
   title: 'Examples',
   description: 'Examples of Mesh usage',
 };
 
-export default function LiveDemo() {
-  const [exampleRepo, setExampleRepo] = useState('json-schema-example');
-  return (
-    <div className="min-h-[calc(100vh-var(--nextra-navbar-height))] flex flex-col">
-      <div className="flex items-center justify-center gap-2 py-8">
-        Choose Live Example:
-        <select
-          value={exampleRepo}
-          onChange={e => {
-            setExampleRepo(e.target.value);
-          }}
-          className="border rounded-md py-1.5"
-        >
-          {Object.entries(EXAMPLES).map(([groupName, group]) => (
-            <optgroup key={groupName} label={groupName}>
-              {Object.entries(group).map(([exampleName, value]) => (
-                <option key={exampleName} label={exampleName} value={value}>
-                  {exampleName}
-                </option>
-              ))}
-            </optgroup>
-          ))}
-        </select>
-      </div>
-      <iframe
-        loading="lazy"
-        src={`https://codesandbox.io/embed/github/ardatan/graphql-mesh/tree/master/examples/${exampleRepo}?fontsize=14&hidenavigation=1&theme=dark&module=%2F.meshrc.yml`}
-        className="grow"
-        title={exampleRepo}
-        allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
-        sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-      />
-    </div>
-  );
+export default function ExamplesPage() {
+  return <LiveDemo />;
 }
-
-export const EXAMPLES = {
-  OpenAPI: {
-    'JavaScript Wiki': 'openapi-javascript-wiki',
-    'Location Weather': 'openapi-location-weather',
-    YouTrack: 'openapi-youtrack',
-    Stripe: 'openapi-stripe',
-    StackExchange: 'openapi-stackexchange',
-    'WeatherBit on React App': 'openapi-react-weatherbit',
-    'NextJS with Apollo': 'nextjs-apollo-example',
-  },
-  'JSON Schema': {
-    'Fake API': 'json-schema-example',
-    'Covid-19 Statistics': 'json-schema-covid',
-    'Subscriptions, Webhooks & Live Queries': 'json-schema-subscriptions',
-  },
-  OData: {
-    TripPin: 'odata-trippin',
-    'Microsoft Graph': 'odata-microsoft',
-  },
-  SOAP: {
-    'Country Info': 'soap-country-info',
-  },
-  MySQL: {
-    Rfam: 'mysql-rfam',
-  },
-  SQLite: {
-    Chinook: 'sqlite-chinook',
-  },
-  'Apollo Federation': {
-    'Apollo Federation Example': 'federation-example',
-  },
-  'Apache Thrift': {
-    Calculator: 'thrift-calculator',
-  },
-  gRPC: {
-    'Movies Example': 'grpc-example',
-  },
-  Neo4J: {
-    'Movies Example': 'neo4j-example',
-  },
-};