All files main.tsx

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

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 411x 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, IComponentPropsWithoutRef } from "@clutchd/component";
import { Flex, IFlexProps } from "@clutchd/flex";
import * as React from "react";
 
/**
 * Type to define `Main` element.
 */
type IMain = React.ElementRef<typeof Component.main>;
 
/**
 * Type to define `Main` props.
 */
interface IMainProps extends IFlexProps {}
 
/**
 * Type to define `Main` props with html attributes.
 */
interface IMainHtmlProps
  extends IMainProps,
    IComponentPropsWithoutRef<typeof Component.main> {}
 
/**
 * `Main` - A layout component designed to contain a page's primary Main. Renders as a `main` element.
 * @param props `IMainHtmlProps` used to render this `Main`.
 * @returns `Main` component.
 */
const Main = React.forwardRef<IMain, IMainHtmlProps>(
  ({ children, direction = "flex-col", ...props }, forwardedRef) => {
    return (
      <Flex asChild direction={direction} {...props}>
        <main ref={forwardedRef}>{children}</main>
      </Flex>
    );
  },
);
 
Main.displayName = "Main";
 
export { Main };
export type { IMain, IMainProps, IMainHtmlProps };