feat: create simple example list

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

apps/docs/app/components/Example.tsx

@@ -0,0 +1,38 @@
+import { ZendeskContextValues, useZendesk } from "react-use-zendesk";
+import styles from "../page.module.css";
+
+export interface ExampleProps {
+  id: string;
+  title: string;
+  description: React.ReactNode;
+  buttonText: string;
+  onClick: (hook: ZendeskContextValues) => void;
+}
+
+export const Example: React.FC<ExampleProps> = ({
+  title,
+  description,
+  buttonText,
+  onClick,
+}) => {
+  const hook = useZendesk();
+
+  function handleClick() {
+    onClick(hook);
+  }
+
+  return (
+    <section className={styles.section}>
+      <div className={styles.title}>{title}</div>
+      <div className={styles.grid}>
+        <div>{description}</div>
+
+        <div>
+          <button className={styles.button} onClick={handleClick}>
+            {buttonText}
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};

apps/docs/app/components/ExampleList.tsx

@@ -0,0 +1,53 @@
+import { Example, ExampleProps } from "./Example";
+
+export const ExampleList = () => {
+  const examples: ExampleProps[] = [
+    {
+      id: "messenger show",
+      title: "Show",
+      description: (
+        <div>
+          Displays the widget on the host page in the state it was in before it
+          was hidden. The widget is displayed by default on page load. You don't
+          need to call <code>show</code> to display the widget unless you use{" "}
+          <code>hide.</code>
+        </div>
+      ),
+      buttonText: "show",
+      onClick: ({ show }) => {
+        show();
+      },
+    },
+    {
+      id: "messenger hide",
+      title: "Hide",
+      description: (
+        <div>
+          Hides all parts of the widget from the page. You can invoke it before
+          or after page load.
+        </div>
+      ),
+      buttonText: "hide",
+      onClick: ({ hide }) => {
+        hide();
+      },
+    },
+  ];
+  return (
+    <>
+      {examples.map((example) => {
+        const { title, description, onClick, buttonText, id } = example;
+        return (
+          <Example
+            id={id}
+            key={id}
+            title={title}
+            description={description}
+            onClick={onClick}
+            buttonText={buttonText}
+          />
+        );
+      })}
+    </>
+  );
+};

apps/docs/app/globals.css

@@ -14,12 +14,7 @@
   --card-rgb: 100, 100, 100;
   --card-border-rgb: 200, 200, 200;
 
-  --glow-conic: conic-gradient(
-    from 180deg at 50% 50%,
-    #2a8af6 0deg,
-    #a853ba 180deg,
-    #e92a67 360deg
-  );
+  --background-button: #a853ba;
 }
 
 * {
@@ -48,3 +43,10 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
+code {
+  color: rgb(189, 217, 215);
+  overflow-wrap: break-word;
+  background-color: rgb(23, 73, 77);
+  font-weight: bold;
+}

apps/docs/app/layout.tsx

@@ -5,8 +5,7 @@ import { Inter } from "next/font/google";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Turborepo",
-  description: "Generated by create turbo",
+  title: "react-use-zendesk",
 };
 
 export default function RootLayout({