All files header.tsx

100% Statements 43/43
100% Branches 1/1
100% Functions 0/0
100% Lines 43/43

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 441x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x  
import { Component } from "@clutchd/component";
import { Flex, IFlexProps } from "@clutchd/flex";
import * as React from "react";
 
/**
 * Type to define `Header` element.
 */
type IHeader = React.ElementRef<typeof Component.header>;
 
/**
 * Type to define `Header` props.
 */
interface IHeaderProps extends IFlexProps {}
 
/**
 * Type to define `Header` props with html attributes.
 */
interface IHeaderHtmlProps
  extends IHeaderProps,
    React.ComponentPropsWithoutRef<typeof Component.header> {}
 
/**
 * `Header` - A layout component designed to contain a page's header content. Renders as a `header` element.
 * @param props `IHeaderHtmlProps` used to render this `Header`.
 * @returns `Header` component.
 */
const Header = React.forwardRef<IHeader, IHeaderHtmlProps>(
  (
    { children, direction = "flex-row", justify = "justify-between", ...props },
    forwardedRef,
  ) => {
    return (
      <Flex asChild direction={direction} justify={justify} {...props}>
        <header ref={forwardedRef}>{children}</header>
      </Flex>
    );
  },
);
 
Header.displayName = "Header";
 
export { Header };
export type { IHeader, IHeaderHtmlProps, IHeaderProps };