feat(Navbar): add as prop (#526) (#528)

Author: mortezasabihi

src/docs/pages/NavbarPage.tsx

@@ -1,4 +1,5 @@
 import type { FC } from 'react';
+import { Link } from 'react-router-dom';
 import { Avatar, Button, Dropdown, Navbar } from '../../lib';
 import type { CodeExample } from './DemoPage';
 import { DemoPage } from './DemoPage';
@@ -9,7 +10,7 @@ const NavbarPage: FC = () => {
       title: 'Default navbar',
       code: (
         <Navbar fluid rounded>
-          <Navbar.Brand href="https://flowbite.com/">
+          <Navbar.Brand as={Link} to="/navbars">
             <img src="https://flowbite.com/docs/images/logo.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
             <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
           </Navbar.Brand>
@@ -18,7 +19,9 @@ const NavbarPage: FC = () => {
             <Navbar.Link href="/navbars" active>
               Home
             </Navbar.Link>
-            <Navbar.Link href="/navbars">About</Navbar.Link>
+            <Navbar.Link as={Link} to={'/navbars'}>
+              About
+            </Navbar.Link>
             <Navbar.Link href="/navbars">Services</Navbar.Link>
             <Navbar.Link href="/navbars">Pricing</Navbar.Link>
             <Navbar.Link href="/navbars">Contact</Navbar.Link>

src/lib/components/Navbar/NavbarBrand.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import type { ComponentProps, ElementType, FC, PropsWithChildren } from 'react';
+import type { LinkProps } from 'react-router-dom';
 import { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { useTheme } from '../Flowbite/ThemeContext';
@@ -8,16 +9,24 @@ export interface FlowbiteNavbarBrandTheme {
   base: string;
 }
 
-export interface NavbarBrandProps extends PropsWithChildren<ComponentProps<'a'>> {
+export interface NavbarBrandProps extends PropsWithChildren<ComponentProps<'a'>>, Partial<Pick<LinkProps, 'to'>> {
   theme?: DeepPartial<FlowbiteNavbarBrandTheme>;
+  as?: ElementType;
+  href?: string;
 }
 
-export const NavbarBrand: FC<NavbarBrandProps> = ({ theme: customTheme = {}, children, href, className, ...props }) => {
+export const NavbarBrand: FC<NavbarBrandProps> = ({
+  theme: customTheme = {},
+  children,
+  className,
+  as: Component = 'a',
+  ...props
+}) => {
   const theme = mergeDeep(useTheme().theme.navbar.brand, customTheme);
 
   return (
-    <a href={href} className={classNames(theme.base, className)} {...props}>
+    <Component className={classNames(theme.base, className)} {...props}>
       {children}
-    </a>
+    </Component>
   );
 };

src/lib/components/Navbar/NavbarLink.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import type { ComponentProps, ElementType, FC, PropsWithChildren } from 'react';
+import type { LinkProps } from 'react-router-dom';
 import { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
@@ -11,28 +12,28 @@ export interface FlowbiteNavbarLinkTheme {
   disabled: FlowbiteBoolean;
 }
 
-export interface NavbarLinkProps extends PropsWithChildren<ComponentProps<'a'>> {
+export interface NavbarLinkProps extends PropsWithChildren<ComponentProps<'a'>>, Partial<Pick<LinkProps, 'to'>> {
   active?: boolean;
   disabled?: boolean;
   href?: string;
   theme?: DeepPartial<FlowbiteNavbarLinkTheme>;
+  as?: ElementType;
 }
 
 export const NavbarLink: FC<NavbarLinkProps> = ({
   active,
   disabled,
-  href,
   theme: customTheme = {},
   children,
   className,
+  as: Component = 'a',
   ...props
 }) => {
   const theme = mergeDeep(useTheme().theme.navbar.link, customTheme);
 
   return (
     <li>
-      <a
-        href={href}
+      <Component
         className={classNames(
           theme.base,
           {
@@ -45,7 +46,7 @@ export const NavbarLink: FC<NavbarLinkProps> = ({
         {...props}
       >
         {children}
-      </a>
+      </Component>
     </li>
   );
 };