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 }; |