Merge pull request #3223 from gluestack/feat/web-changes

chore: updated built using gluestack-ui v2 -> v3

Author: Sanchitv3

apps/website/components/custom/toc/index.tsx

@@ -1,5 +1,5 @@
 import { usePathname } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 interface HeadingItem {
   id: string;
@@ -39,6 +39,18 @@ export const TOC: React.FC = () => {
 
   const pathname = usePathname();
 
+  const tocRefs = useRef<Record<string, HTMLAnchorElement | null>>({});
+  useEffect(() => {
+    const activeEl = tocRefs.current[activeId];
+    if (activeEl) {
+      activeEl.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest',
+        behavior: 'smooth',
+      });
+    }
+  }, [activeId]);
+
   useEffect(() => {
     // Grab h1–h5
     const scrollContainer = document.getElementById('layout-content');
@@ -146,6 +158,9 @@ export const TOC: React.FC = () => {
         return (
           <li key={item.id} className="relative">
             <a
+              ref={(el) => {
+                tocRefs.current[item.id] = el;
+              }}
               href={`#${item.id}`}
               onClick={handleClick(item.id)}
               className={`

src/docs/apps/kitchensink-app/index.mdx

@@ -8,7 +8,7 @@ import { KitchenSinkLink } from './kitchen-sink-link';
 
 # Kitchensink App
 
-This [Kitchensink App](https://kitchen-sink-v2.gluestack.io/) is built using `gluestack-ui v2`.
+This [Kitchensink App](https://kitchen-sink-v2.gluestack.io/) is built using `gluestack-ui v3`.
 
 <Responsiveness {...kitchensink} />
 

src/docs/apps/starter-kit/index.mdx

@@ -8,7 +8,7 @@ import { starterKitExpo, starterKitNext } from '@/docs-components/apps/appConfig
 
 # Starter Kit
 
-These Starter Kits are built using `gluestack-ui v2`.
+These Starter Kits are built using `gluestack-ui v3`.
 
 ## Expo