Navigation Header component

packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx

@@ -81,9 +81,9 @@ const meta: Meta<StoryProps> = {
   },
 };
 
-type Story = StoryObj<StoryProps>;
+type IStory = StoryObj<StoryProps>;
 
-export const Dynamic: Story = {
+export const Dynamic: IStory = {
   name: 'NavHeader',
   args: {
     brand: logoVariants[0],
@@ -107,8 +107,8 @@ export const Dynamic: Story = {
             </NavHeader.Link>
           ))}
         </NavHeader.Navigation>
-        {renderSampleContent && (
-          <NavHeader.Content>
+        <NavHeader.Content>
+          {renderSampleContent && (
             <Button
               as="button"
               icon="Link"
@@ -119,8 +119,8 @@ export const Dynamic: Story = {
             >
               Connect your wallet
             </Button>
-          </NavHeader.Content>
-        )}
+          )}
+        </NavHeader.Content>
       </NavHeader.Root>
     );
   },

packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx

@@ -1,9 +1,10 @@
 import { containerClass, logoClass } from './NavHeader.css';
+import { INavHeaderProps } from '.';
 
 import type { LogoVariant } from '@components/BrandLogo';
 import Logo, { logoVariants } from '@components/BrandLogo';
 import { Link } from '@components/Link';
-import React, { FC } from 'react';
+import React, { FC, FunctionComponentElement } from 'react';
 
 export type INavItemTarget = '_self' | '_blank';
 export interface INavItem {
@@ -15,7 +16,7 @@ export type INavItems = INavItem[];
 
 export interface INavHeaderContainerProps {
   brand?: LogoVariant;
-  children?: React.ReactNode;
+  children?: FunctionComponentElement<INavHeaderProps>[];
   items?: INavItems;
 }
 

packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import React, { FC } from 'react';
 
 export interface INavHeaderLinkProps {
-  children: React.ReactNode;
+  children: string;
   href: string;
   active?: boolean;
 }

packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx

@@ -3,7 +3,7 @@ import { glowClass, navListClass, navWrapperClass } from './NavHeader.css';
 import { INavHeaderLinkProps } from './NavHeaderLink';
 import useGlow from './useGlow';
 
-import React, { FC } from 'react';
+import React, { FC, FunctionComponentElement } from 'react';
 
 export type INavItemTarget = '_self' | '_blank';
 export interface INavItem {
@@ -14,7 +14,7 @@ export interface INavItem {
 export type INavItems = INavItem[];
 
 export interface INavHeaderNavigationProps {
-  children: React.ReactNode;
+  children: FunctionComponentElement<INavHeaderLinkProps>[];
 }
 
 export const NavHeaderNavigation: FC<INavHeaderNavigationProps> = ({
@@ -40,7 +40,7 @@ export const NavHeaderNavigation: FC<INavHeaderNavigationProps> = ({
           <li key={`navItem-${index}`} onClick={() => setActiveNav(index + 1)}>
             {React.cloneElement(
               child as React.ReactElement<
-                HTMLElement & INavHeaderLinkProps,
+                HTMLElement | INavHeaderLinkProps,
                 | string
                 | React.JSXElementConstructor<JSX.Element & INavHeaderLinkProps>
               >,