Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566import type { BoxProps } from '@luke-ui/react/box';import { Box } from '@luke-ui/react/box';import { Cluster } from '@luke-ui/react/cluster';import { Stack } from '@luke-ui/react/stack';import { Text } from '@luke-ui/react/text';import type { PropsWithChildren } from 'react';import { createContext, useContext } from 'react';
const ComparisonAlignContext = createContext<'center' | 'start'>('start');
type ComparisonProps = PropsWithChildren<{ /** * The alignment of items within the comparison * @default 'start' */ align?: 'center' | 'start'; /** * The direction of the comparison * @default 'vertical' */ direction?: 'horizontal' | 'vertical';}>;
type ComparisonItemProps = PropsWithChildren<{ label: string;}>;
export function Comparison({ align = 'start', children, direction = 'vertical' }: ComparisonProps) { const Element = direction === 'vertical' ? Stack : Cluster; return ( <ComparisonAlignContext.Provider value={align}> <Element gap="sp16" inlineSize="max-content" marginInline="auto" maxInlineSize="100%"> {children} </Element> </ComparisonAlignContext.Provider> );}
export function ComparisonItem({ children, label }: ComparisonItemProps) { const align = useContext(ComparisonAlignContext);
return ( <Stack alignItems={align === 'center' ? 'center' : 'stretch'} gap="sp4"> <Text color="secondary" textAlign={align} typography="caption"> {label} </Text> {children} </Stack> );}
/** A bordered placeholder for layout examples, so each child's box is visible. */export function ExampleItem(props: BoxProps) { return ( <Box backgroundColor="surface.subdued" borderColor="decorative" borderRadius="detail" borderStyle="solid" borderWidth="thin" padding="sp12" {...props} /> );}