From dc3c191d3e229530430803f8dfd35a17dfe7ad21 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 13 Dec 2024 14:04:01 +0800
Subject: [PATCH] refactor(docs): use onPress event instead

---
 apps/docs/app/examples/modal/placement/page.tsx      |  2 +-
 apps/docs/app/examples/navbar/bordered/page.tsx      | 12 +-----------
 .../app/examples/navbar/controlled-menu/page.tsx     |  5 +----
 .../app/examples/navbar/custom-active-item/page.tsx  | 12 +-----------
 .../examples/navbar/disable-menu-animation/page.tsx  |  5 +----
 apps/docs/app/examples/navbar/disabled-blur/page.tsx | 12 +-----------
 .../docs/app/examples/navbar/hide-on-scroll/page.tsx | 12 +-----------
 apps/docs/app/examples/navbar/static/page.tsx        | 12 +-----------
 apps/docs/app/examples/navbar/usage/page.tsx         | 12 +-----------
 apps/docs/app/examples/navbar/with-avatar/page.tsx   |  5 +----
 .../app/examples/navbar/with-dropdown-menu/page.tsx  |  5 +----
 apps/docs/app/examples/navbar/with-menu/page.tsx     |  5 +----
 .../app/examples/navbar/with-search-input/page.tsx   |  5 +----
 apps/docs/components/marketing/install-banner.tsx    |  4 ++--
 apps/docs/components/marketing/sponsor-item.tsx      |  2 +-
 apps/docs/components/mdx-components.tsx              |  2 +-
 apps/docs/components/sandpack/copy-button.tsx        |  2 +-
 17 files changed, 18 insertions(+), 96 deletions(-)

diff --git a/apps/docs/app/examples/modal/placement/page.tsx b/apps/docs/app/examples/modal/placement/page.tsx
index a6f2c3ac9a..ac5f472908 100644
--- a/apps/docs/app/examples/modal/placement/page.tsx
+++ b/apps/docs/app/examples/modal/placement/page.tsx
@@ -58,7 +58,7 @@ export default function Page() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>
diff --git a/apps/docs/app/examples/navbar/bordered/page.tsx b/apps/docs/app/examples/navbar/bordered/page.tsx
index 3479e7da34..ed0f668cbb 100644
--- a/apps/docs/app/examples/navbar/bordered/page.tsx
+++ b/apps/docs/app/examples/navbar/bordered/page.tsx
@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
diff --git a/apps/docs/app/examples/navbar/controlled-menu/page.tsx b/apps/docs/app/examples/navbar/controlled-menu/page.tsx
index 226d1256cb..5c71a2b3f2 100644
--- a/apps/docs/app/examples/navbar/controlled-menu/page.tsx
+++ b/apps/docs/app/examples/navbar/controlled-menu/page.tsx
@@ -9,13 +9,10 @@ import {
   NavbarMenuItem,
   NavbarMenuToggle,
   Button,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
 } from "@nextui-org/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path
diff --git a/apps/docs/app/examples/navbar/custom-active-item/page.tsx b/apps/docs/app/examples/navbar/custom-active-item/page.tsx
index 536badb8bc..ea209af433 100644
--- a/apps/docs/app/examples/navbar/custom-active-item/page.tsx
+++ b/apps/docs/app/examples/navbar/custom-active-item/page.tsx
@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
diff --git a/apps/docs/app/examples/navbar/disable-menu-animation/page.tsx b/apps/docs/app/examples/navbar/disable-menu-animation/page.tsx
index 167e1a5ae7..447f0d509c 100644
--- a/apps/docs/app/examples/navbar/disable-menu-animation/page.tsx
+++ b/apps/docs/app/examples/navbar/disable-menu-animation/page.tsx
@@ -6,16 +6,13 @@ import {
   NavbarContent,
   NavbarItem,
   Button,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   NavbarMenu,
   NavbarMenuItem,
   NavbarMenuToggle,
 } from "@nextui-org/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path
diff --git a/apps/docs/app/examples/navbar/disabled-blur/page.tsx b/apps/docs/app/examples/navbar/disabled-blur/page.tsx
index f62fb0f8f0..eabfd06544 100644
--- a/apps/docs/app/examples/navbar/disabled-blur/page.tsx
+++ b/apps/docs/app/examples/navbar/disabled-blur/page.tsx
@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
diff --git a/apps/docs/app/examples/navbar/hide-on-scroll/page.tsx b/apps/docs/app/examples/navbar/hide-on-scroll/page.tsx
index 459bf756b8..e32ef4ef44 100644
--- a/apps/docs/app/examples/navbar/hide-on-scroll/page.tsx
+++ b/apps/docs/app/examples/navbar/hide-on-scroll/page.tsx
@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
diff --git a/apps/docs/app/examples/navbar/static/page.tsx b/apps/docs/app/examples/navbar/static/page.tsx
index 4e61243ddd..5330a23f22 100644
--- a/apps/docs/app/examples/navbar/static/page.tsx
+++ b/apps/docs/app/examples/navbar/static/page.tsx
@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
diff --git a/apps/docs/app/examples/navbar/usage/page.tsx b/apps/docs/app/examples/navbar/usage/page.tsx
index cadb7e3cf0..732cab36ad 100644
--- a/apps/docs/app/examples/navbar/usage/page.tsx
+++ b/apps/docs/app/examples/navbar/usage/page.tsx
@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
diff --git a/apps/docs/app/examples/navbar/with-avatar/page.tsx b/apps/docs/app/examples/navbar/with-avatar/page.tsx
index 4975acad05..e33a4831a9 100644
--- a/apps/docs/app/examples/navbar/with-avatar/page.tsx
+++ b/apps/docs/app/examples/navbar/with-avatar/page.tsx
@@ -5,8 +5,7 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   DropdownItem,
   DropdownTrigger,
   Dropdown,
@@ -14,8 +13,6 @@ import {
   Avatar,
 } from "@nextui-org/react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path
diff --git a/apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx b/apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx
index 5ba435f9e1..6d2c2f7a6c 100644
--- a/apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx
+++ b/apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx
@@ -5,8 +5,7 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Button,
   DropdownItem,
   DropdownTrigger,
@@ -15,8 +14,6 @@ import {
 } from "@nextui-org/react";
 import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "@nextui-org/shared-icons";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path
diff --git a/apps/docs/app/examples/navbar/with-menu/page.tsx b/apps/docs/app/examples/navbar/with-menu/page.tsx
index 7695a31ec7..481ba3f134 100644
--- a/apps/docs/app/examples/navbar/with-menu/page.tsx
+++ b/apps/docs/app/examples/navbar/with-menu/page.tsx
@@ -5,8 +5,7 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Button,
   NavbarMenuToggle,
   NavbarMenu,
@@ -14,8 +13,6 @@ import {
 } from "@nextui-org/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path
diff --git a/apps/docs/app/examples/navbar/with-search-input/page.tsx b/apps/docs/app/examples/navbar/with-search-input/page.tsx
index d63b61d82c..82a91d46de 100644
--- a/apps/docs/app/examples/navbar/with-search-input/page.tsx
+++ b/apps/docs/app/examples/navbar/with-search-input/page.tsx
@@ -5,8 +5,7 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Input,
   DropdownItem,
   DropdownTrigger,
@@ -15,8 +14,6 @@ import {
   Avatar,
 } from "@nextui-org/react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 import {SearchLinearIcon} from "@/components/icons";
 
 const AcmeLogo = () => (
diff --git a/apps/docs/components/marketing/install-banner.tsx b/apps/docs/components/marketing/install-banner.tsx
index 4d0c99adfc..3bc77fc9c4 100644
--- a/apps/docs/components/marketing/install-banner.tsx
+++ b/apps/docs/components/marketing/install-banner.tsx
@@ -72,7 +72,7 @@ export const InstallBanner = () => {
               href="/docs/guide/installation"
               radius="full"
               size="md"
-              onClick={() => {
+              onPress={() => {
                 posthog.capture("InstallBanner - Get Started", {
                   action: "press",
                   category: "landing-page",
@@ -91,7 +91,7 @@ export const InstallBanner = () => {
               size="md"
               startContent={<GithubIcon />}
               variant="bordered"
-              onClick={() => {
+              onPress={() => {
                 posthog.capture("InstallBanner - Github", {
                   action: "press",
                   category: "landing-page",
diff --git a/apps/docs/components/marketing/sponsor-item.tsx b/apps/docs/components/marketing/sponsor-item.tsx
index 27be8a8ff5..2e2fb6ef20 100644
--- a/apps/docs/components/marketing/sponsor-item.tsx
+++ b/apps/docs/components/marketing/sponsor-item.tsx
@@ -17,7 +17,7 @@ export const SponsorItem = ({name, href, logo}: Sponsor) => {
       isExternal
       className="flex flex-col items-center justify-center"
       href={href}
-      onClick={() => {
+      onPress={() => {
         posthog.capture("Hero - Sponsors", {
           name,
           action: "click",
diff --git a/apps/docs/components/mdx-components.tsx b/apps/docs/components/mdx-components.tsx
index 55cca008d6..ca266dbd6f 100644
--- a/apps/docs/components/mdx-components.tsx
+++ b/apps/docs/components/mdx-components.tsx
@@ -198,7 +198,7 @@ const Link = ({href, children}: {href?: string; children?: React.ReactNode}) =>
       disableAnimation={true}
       href={href}
       {...externalProps}
-      onClick={handleClick}
+      onPress={handleClick}
     >
       {children}
     </Components.Link>
diff --git a/apps/docs/components/sandpack/copy-button.tsx b/apps/docs/components/sandpack/copy-button.tsx
index 2ba1db1436..0aa266318d 100644
--- a/apps/docs/components/sandpack/copy-button.tsx
+++ b/apps/docs/components/sandpack/copy-button.tsx
@@ -23,7 +23,7 @@ export const CopyButton = ({code: codeProp}: {code?: string}) => {
       content={copied ? "Copied!" : "Copy"}
       radius="md"
     >
-      <Button isIconOnly size="sm" title="Copy Code" variant="light" onClick={copyHandler}>
+      <Button isIconOnly size="sm" title="Copy Code" variant="light" onPress={copyHandler}>
         <CopyLinearIcon className="text-white dark:text-zinc-500" height={16} width={16} />
       </Button>
     </Tooltip>