feat: updates OpenInNewIconLink and adds LinksDemo component and upda… (#28)

…te routing in Home and App

Author: pavankjadda

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>
 	);

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>
 

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>
+	);
+}

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 />,
+			},
 		],
 	},
 ]);

apps/react-kit-demo/src/styles.scss

@@ -34,4 +34,3 @@
   font-size: 20px;
   display: block;
 }
-

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>
+	);
 }