From f3c0e8ba0a4a8e18b52e6fd97e6d9d79b8e206bf Mon Sep 17 00:00:00 2001
From: Pavan Kumar Jadda <17564080+pavankjadda@users.noreply.github.com>
Date: Mon, 12 May 2025 17:04:59 -0400
Subject: [PATCH] feat: updates OpenInNewIconLink and adds LinksDemo component
 and update routing in Home and App

---
 apps/react-kit-demo/src/app/Home.tsx          |  2 +
 apps/react-kit-demo/src/app/app.tsx           |  2 +-
 .../src/app/links/LinksDemo.tsx               | 20 +++++++++
 apps/react-kit-demo/src/routes/Routes.tsx     | 11 +++--
 apps/react-kit-demo/src/styles.scss           |  1 -
 .../src/lib/components/OpenInNewIconLink.tsx  | 45 +++++++++++--------
 6 files changed, 58 insertions(+), 23 deletions(-)
 create mode 100644 apps/react-kit-demo/src/app/links/LinksDemo.tsx

diff --git a/apps/react-kit-demo/src/app/Home.tsx b/apps/react-kit-demo/src/app/Home.tsx
index e57cc52..8fc7027 100644
--- a/apps/react-kit-demo/src/app/Home.tsx
+++ b/apps/react-kit-demo/src/app/Home.tsx
@@ -9,6 +9,8 @@ export default function Home() {
 				<Link to="/dialog">Dialog</Link> <br />
 				<Link to="/circular-progress">Circular Progress</Link> <br />
 				<Link to="/books">All Books</Link> <br />
+				<Link to="/react-if">React If Demo</Link> <br />
+				<Link to="/links">Links Demo</Link> <br />
 			</ul>
 		</div>
 	);
diff --git a/apps/react-kit-demo/src/app/app.tsx b/apps/react-kit-demo/src/app/app.tsx
index 435a237..26bd394 100644
--- a/apps/react-kit-demo/src/app/app.tsx
+++ b/apps/react-kit-demo/src/app/app.tsx
@@ -1,5 +1,4 @@
 import { Link, Outlet } from 'react-router-dom';
-import React from 'react';
 
 export default function App() {
 	return (
@@ -13,6 +12,7 @@ export default function App() {
 					<Link to="/circular-progress">Circular Progress</Link> <br />
 					<Link to="/books">All Books</Link> <br />
 					<Link to="/react-if">React If Demo</Link> <br />
+					<Link to="/links">Links Demo</Link> <br />
 				</ul>
 			</div>
 
diff --git a/apps/react-kit-demo/src/app/links/LinksDemo.tsx b/apps/react-kit-demo/src/app/links/LinksDemo.tsx
new file mode 100644
index 0000000..0b08d9d
--- /dev/null
+++ b/apps/react-kit-demo/src/app/links/LinksDemo.tsx
@@ -0,0 +1,20 @@
+import { Divider } from "@mui/material";
+import { NextLink, OpenInNewIconLink } from "@react-kit/*";
+
+
+export default function LinksDemo() {
+  return (
+		<div>
+			<div style={{ marginInline: '1rem', textAlign: 'center' }}>
+				<h2>Links Demo</h2>
+				<Divider sx={{ mb: 3 }} />
+				MUI Link:
+				<NextLink href={"/buttons-demo"}> Buttons Demo</NextLink>
+				<br />
+				Open In New Icon Link :
+				<OpenInNewIconLink href={`https://www.google.com/`} target="_blank" linkText={'Open In New Tab'} />
+				<br />
+			</div>
+		</div>
+	);
+}
diff --git a/apps/react-kit-demo/src/routes/Routes.tsx b/apps/react-kit-demo/src/routes/Routes.tsx
index 17e045e..eea2f6b 100644
--- a/apps/react-kit-demo/src/routes/Routes.tsx
+++ b/apps/react-kit-demo/src/routes/Routes.tsx
@@ -1,12 +1,13 @@
 import { createBrowserRouter } from 'react-router-dom';
 import Home from '../app/Home';
+import AllBooks from '../app/all-books/AllBooks';
+import App from '../app/app';
 import ButtonsDemo from '../app/buttons/ButtonsDemo';
-import SnackBarDemo from '../app/snack-bar/SnackBarDemo';
 import DialogDemo from '../app/dialog/DialogDemo';
+import LinksDemo from '../app/links/LinksDemo';
 import CenterCircularProgressDemo from '../app/progress-bar/CenterCircularProgressDemo';
-import AllBooks from '../app/all-books/AllBooks';
-import App from '../app/app';
 import ReactIfDemo from '../app/react-if/ReactIfDemo';
+import SnackBarDemo from '../app/snack-bar/SnackBarDemo';
 
 export const router = createBrowserRouter([
 	{
@@ -45,6 +46,10 @@ export const router = createBrowserRouter([
 				path: '/react-if',
 				element: <ReactIfDemo />,
 			},
+			{
+				path: '/links',
+				element: <LinksDemo />,
+			},
 		],
 	},
 ]);
diff --git a/apps/react-kit-demo/src/styles.scss b/apps/react-kit-demo/src/styles.scss
index 2510449..7d1d631 100644
--- a/apps/react-kit-demo/src/styles.scss
+++ b/apps/react-kit-demo/src/styles.scss
@@ -34,4 +34,3 @@
   font-size: 20px;
   display: block;
 }
-
diff --git a/react-kit/src/lib/components/OpenInNewIconLink.tsx b/react-kit/src/lib/components/OpenInNewIconLink.tsx
index 174c731..ebcd614 100644
--- a/react-kit/src/lib/components/OpenInNewIconLink.tsx
+++ b/react-kit/src/lib/components/OpenInNewIconLink.tsx
@@ -1,12 +1,13 @@
-import React from 'react';
-import { Icon } from '@mui/material';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { Icon, Link as MuiLink } from '@mui/material';
+import React from 'react';
+import { Link } from 'react-router-dom';
 
 interface OpenInNewIconLinkProps {
-  href: string;
-  linkText: string;
-  target: string;
-  children?: React.ReactNode;
+	href: string;
+	linkText: string;
+	target: string;
+	children?: React.ReactNode;
 }
 
 /**
@@ -18,16 +19,24 @@ interface OpenInNewIconLinkProps {
  * @since 1.2.24
  */
 export function OpenInNewIconLink(props: OpenInNewIconLinkProps) {
-  return (
-    <a
-      href={props.href}
-      target={'_blank'}
-      rel="noreferrer"
-      style={{ display: 'flex', alignItems: 'center' }}
-    >
-      {props.linkText}
-      <Icon sx={{ fontSize: '1.1rem', mx: 0.75 }} component={OpenInNewIcon} />
-      {props.children}
-    </a>
-  );
+	return (
+		<MuiLink
+			component={Link}
+			to={props.href}
+			target={props.target || '_blank'}
+			rel="noreferrer"
+			className={'next-btn-link'}
+			underline="hover">
+			{props.linkText ?? props.children}
+			<Icon
+				sx={{
+					fontSize: '1.1rem',
+					mx: 0.75,
+					verticalAlign: 'middle',
+					display: 'inline-flex',
+				}}
+				component={OpenInNewIcon}
+			/>
+		</MuiLink>
+	);
 }