All files page.tsx

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

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                                                                                                                                                         
import { Component, IComponentPropsWithoutRef } from "@clutchd/component";
import { composeClassNames as cn } from "@clutchd/compose-props";
import { Flex, IFlexProps } from "@clutchd/flex";
import {
  WithFontSmoothing,
  WithMinHeight,
  WithMinWidth,
  WithTransition,
  WithTransitionTiming,
} from "@clutchd/tailwind";
import * as React from "react";

/**
 * Type to define `Page` element
 */
type IPage = React.ElementRef<typeof Component.div>;

/**
 * Type to define `Page` props
 */
interface IPageProps
  extends IFlexProps,
    WithMinWidth,
    WithMinHeight,
    WithTransition,
    WithTransitionTiming,
    WithFontSmoothing {}

/**
 * Type to define `Page` props with html attributes
 */
interface IPageHtmlProps
  extends IPageProps,
    IComponentPropsWithoutRef<typeof Component.div> {}

/**
 * `Page` - A `Container` designed to contain an entire page. Renders as a `div` element that fills the screen
 * @param props `IPageHtmlProps` used to render this `Page`
 * @returns `Page` component
 */
const Page = React.forwardRef<IPage, IPageHtmlProps>(
  (
    {
      className,
      fontSmoothing = "subpixel-antialiased",
      flexDirection = "flex-col",
      minWidth = "min-w-screen",
      minHeight = "min-h-screen",
      transition = "transition-all",
      transitionTiming = "ease-out",
      ...props
    },
    forwardedRef,
  ) => {
    return (
      <Flex
        className={cn(
          fontSmoothing,
          minWidth,
          minHeight,
          transition,
          transitionTiming,
          className,
        )}
        flexDirection={flexDirection}
        ref={forwardedRef}
        {...props}
      />
    );
  },
);

Page.displayName = "Page";

export { Page };
export type { IPage, IPageHtmlProps, IPageProps };