Update react page (#924)

Author: ethanpalm

react-components.mdx

@@ -4,69 +4,101 @@ description: "Build interactive and reusable elements with React components"
 icon: "react"
 ---
 
-import { Counter } from "/snippets/counter.mdx";
 import { ColorGenerator } from "/snippets/color-generator.jsx";
 
 [React components](https://react.dev) are a powerful way to create interactive and reusable elements in your documentation.
 
-You can use React components directly in your `MDX` files without any additional setup.
-
 ## Using React components
 
-You can build components directly in your MDX files using [React hooks](https://react.dev/reference/react/hooks).
+You can build React components directly in your `MDX` files using [React hooks](https://react.dev/reference/react/hooks).
 
-### Basic example
+### Example
 
-Here is a basic example of a counter component:
+This example declares a `Counter` component and then uses it with `<Counter />`.
 
 ```mdx
 export const Counter = () => {
-  const [count, setCount] = useState(0);
-  
+  const [count, setCount] = useState(0)
+
+  const increment = () => setCount(count + 1)
+  const decrement = () => setCount(count - 1)
+
   return (
-    <div>
-      <p>Current count: {count}</p>
-      <button onClick={() => setCount(count + 1)}>
-        +
-      </button>
+  <div className="flex items-center justify-center">
+      <div className="flex items-center rounded-xl overflow-hidden border border-zinc-950/20 dark:border-white/20">
+        <button
+          onClick={decrement}
+          className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-r border-zinc-950/20 dark:border-white/20"
+          aria-label="Decrease"
+        >
+          -
+        </button>
+
+        <div className="flex text-sm items-center justify-center h-8 px-6 text-zinc-950/80 dark:text-white/80 font-medium min-w-[4rem] text-center">
+          {count}
+        </div>
+
+        <button
+          onClick={increment}
+          className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-l border-zinc-950/20 dark:border-white/20"
+          aria-label="Increase"
+        >
+          +
+        </button>
+      </div>
     </div>
-  );
+  )
 }
-```
 
-The `Counter` component can be used in your `MDX` files like this:
-
-```mdx
 <Counter />
 ```
 
-The counter renders as an interactive React component.
+export const Counter = () => {
+  const [count, setCount] = useState(0)
 
-<Counter />
+  const increment = () => setCount(count + 1)
+  const decrement = () => setCount(count - 1)
 
-## Importing components
+  return (
+  <div className="flex items-center justify-center">
+      <div className="flex items-center rounded-xl overflow-hidden border border-zinc-950/20 dark:border-white/20">
+        <button
+          onClick={decrement}
+          className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-r border-zinc-950/20 dark:border-white/20"
+          aria-label="Decrease"
+        >
+          -
+        </button>
+
+        <div className="flex text-sm items-center justify-center h-8 px-6 text-zinc-950/80 dark:text-white/80 font-medium min-w-[4rem] text-center">
+          {count}
+        </div>
 
-Just like in regular React, you can import components from other files.
+        <button
+          onClick={increment}
+          className="flex items-center justify-center h-8 w-8 text-zinc-950/80 dark:text-white/80 border-l border-zinc-950/20 dark:border-white/20"
+          aria-label="Increase"
+        >
+          +
+        </button>
+      </div>
+    </div>
+  )
+}
 
-```mdx
-import { ColorGenerator } from "/snippets/color-generator.jsx"
-```
+The counter renders as an interactive React component.
 
-<Warning>
-  Unlike regular React, you can't import components from every `MDX` file. Reusable components can only be referenced from `MDX` files within the `snippets` folder.
-</Warning>
+<Counter />
 
-After importing the component, use it in your `MDX` files like this:
+## Importing components
 
-```mdx
-<ColorGenerator />
-```
+You can import components from your `snippets` folder. Unlike regular React, you cannot import components from every `MDX` file. Reusable components must be referenced from files within the `snippets` folder. Learn more about [reusable snippets](/reusable-snippets).
 
-Learn more about [reusable snippets](/reusable-snippets).
+### Example
 
-### Complex example
+This example declares a `ColorGenerator` component that uses multiple React hooks and then uses it in an `MDX` file.
 
-You can build much more complex components. Here is an example of a color generator component that uses multiple React hooks:
+Create `color-generator.jsx` file in the `snippets` folder:
 
 ```mdx /snippets/color-generator.jsx [expandable]
 export const ColorGenerator = () => {
@@ -181,9 +213,11 @@ export const ColorGenerator = () => {
 }
 ```
 
-The `ColorGenerator` component can be used in your `MDX` files like this:
+Import the `ColorGenerator` component and use it in an `MDX` file:
 
 ```mdx
+import { ColorGenerator } from "/snippets/color-generator.jsx"
+
 <ColorGenerator />
 ```