remove query hooks

Author: walker-tx

example/src/App.css

@@ -5,7 +5,7 @@
 }
 
 h1 {
-  font-size: 3rem;
+  font-size: 2rem;
   margin-bottom: 18px;
   font-weight: 600;
   text-align: center;

example/src/App.tsx

@@ -1,34 +1,29 @@
+import { SpeakeasyCodeSamplesCore } from "@speakeasyapi/code-samples/core";
 import {
-  CodeSample,
-  SpeakeasyCodeSamplesProvider,
   CodeSampleFilenameTitle,
+  CodeSamplesViewer,
+  SpeakeasyCodeSamplesProvider,
 } from "@speakeasyapi/code-samples/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "./App.css";
-import { SpeakeasyCodeSamplesCore } from "@speakeasyapi/code-samples/core";
-import { SpeakeasyCodeSamples } from "@speakeasyapi/code-samples";
 
 function App() {
-  console.log({ SpeakeasyCodeSamples });
-
-  const queryClient = new QueryClient();
   const coreSdk = new SpeakeasyCodeSamplesCore({
     apiKey: import.meta.env.VITE_SPEAKEASY_API_KEY,
     registryUrl: import.meta.env.VITE_SPEAKEASY_REGISTRY_URL,
   });
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <SpeakeasyCodeSamplesProvider client={coreSdk}>
-        <h1 className="">Speakeasy Code Samples</h1>
-        <div style={{ width: "100%", marginInline: "auto" }}>
-          <CodeSample
-            title={CodeSampleFilenameTitle}
-            operation={"getPassageText"}
-          />
-        </div>
-      </SpeakeasyCodeSamplesProvider>
-    </QueryClientProvider>
+    <SpeakeasyCodeSamplesProvider client={coreSdk}>
+      <h1 className="">Speakeasy Code Samples</h1>
+      <div style={{ width: "50%", marginInline: "auto" }}>
+        <CodeSamplesViewer
+          copyable
+          defaultLang={"typescript"}
+          title={CodeSampleFilenameTitle}
+          operation={"getPassageText"}
+        />
+      </div>
+    </SpeakeasyCodeSamplesProvider>
   );
 }
 

src/react-components/code-playground.tsx

@@ -0,0 +1,30 @@
+import { css } from "@emotion/css";
+import { cssVarKey } from "./styles.js";
+
+const classes = {
+  root: css({
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: `var(${cssVarKey.border})`,
+    borderRadius: "0.5rem",
+    position: "relative",
+    backgroundColor: `var(${cssVarKey.bgPrimary})`,
+  }),
+  heading: css({
+    display: "flex",
+    justifyContent: "space-between",
+    borderBottom: `1px solid var(${cssVarKey.border})`,
+    padding: "0.5rem",
+  }),
+  selector: css({}),
+  codeContainer: css({
+    position: "relative",
+    paddingInline: "0.75rem",
+    overflowX: "scroll",
+  }),
+  pre: css({
+    position: "relative",
+  }),
+};
+
+export default classes;