# All files / layout NavigationLink.tsx

0% Statements 0/83
0% Branches 0/1
0% Functions 0/1
0% Lines 0/83

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84

     import type { ElementType, HTMLAttributes, ReactNode } from "react";
    import { forwardRef } from "react";
    import type {
      PolymorphicComponent,
      PolymorphicProps,
      PolymorphicRef,
      PropsWithRef,
    } from "../types.js";
    import {
      navigationLink,
      navigationLinkChildren,
      navigationLinkIcon,
    } from "./navigationLinkStyles.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface NavigationLinkProps {
      icon: ReactNode;
      active: boolean;
      className?: string;
      children: ReactNode;
      iconWrapperProps?: PropsWithRef<
        HTMLAttributes<HTMLSpanElement>,
        HTMLSpanElement
      >;
      childrenWrapperProps?: PropsWithRef<
        HTMLAttributes<HTMLSpanElement>,
        HTMLSpanElement
      >;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export type PolymorphicNavigationLinkProps<T extends ElementType = "a"> =
      PolymorphicProps<T, NavigationLinkProps>;

    /**
     * **Server Component**
     *
     * @remarks \@since 6.0.0
     */
    export const NavigationLink: PolymorphicComponent = forwardRef(
      function NavigationLink<T extends ElementType = "a">(
        props: PolymorphicNavigationLinkProps<T>,
        ref: PolymorphicRef<T>
      ) {
        const {
          as: Component = "a",
          icon,
          active,
          children,
          className,
          "aria-current": ariaCurrent = active ? "page" : undefined,
          iconWrapperProps,
          childrenWrapperProps,
          ...remaining
        } = props;

        return (
          <Component
            {...remaining}
            aria-current={ariaCurrent}
            ref={ref}
            className={navigationLink({ className })}
          >
            <span
              {...iconWrapperProps}
              className={navigationLinkIcon(iconWrapperProps)}
            >
              {icon}
            </span>
            <span
              {...childrenWrapperProps}
              className={navigationLinkChildren(childrenWrapperProps)}
            >
              {children}
            </span>
          </Component>
        );
      }
    );