Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. ui.lukebennett.dev
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788import { Box } from '@luke-ui/react/box';import { Heading } from '@luke-ui/react/heading';import { Link } from '@luke-ui/react/link';import { Stack } from '@luke-ui/react/stack';import { Text } from '@luke-ui/react/text';import { cx } from '@luke-ui/react/utils';import { VisuallyHidden } from '@luke-ui/react/visually-hidden';import type { ReactNode } from 'react';import * as styles from './docs-card.css.js';import { DocsLink } from './docs-link.js';
const EXTERNAL_HREF_PATTERN = /^(?:\w+:|\/\/)/;
interface DocsCardLinkProps { align?: 'end' | 'start'; children: ReactNode; href: string;}
/** Bordered whole-surface link shared by the components index, MDX cards, and the pager. */export function DocsCardLink({ align = 'start', children, href }: DocsCardLinkProps) { const isExternal = EXTERNAL_HREF_PATTERN.test(href);
return ( <Box blockSize="100%" borderColor="decorative" borderRadius="surface" borderStyle="solid" borderWidth="thin" className={cx(styles.cardLink, align === 'end' && styles.cardLinkAlignEnd)} minInlineSize="0" padding="sp16" renderRoot={(domProps) => { if (isExternal) { return ( <Link {...domProps} appearance="text" href={href} rel="noreferrer noopener" target="_blank" /> ); }
const { hash, path } = splitHash(href); return <DocsLink {...domProps} appearance="text" hash={hash} to={path} />; }} > {children} {isExternal ? <VisuallyHidden> (opens in a new tab)</VisuallyHidden> : null} </Box> );}
interface DocsCardProps { description: ReactNode; href: string; title: ReactNode;}
/** * Title + description card used by the components index and MDX Continue learning links. * The title is a heading so topic cards join the document outline; callers nest * `HeadingLevels` so the level sits under the section heading (usually h3 under an h2). */export function DocsCard({ description, href, title }: DocsCardProps) { return ( <DocsCardLink href={href}> <Stack gap="sp12"> <Heading fontWeight="label" typography="label"> {title} </Heading> <Text color="secondary" elementType="div" fontWeight="body" typography="label"> {description} </Text> </Stack> </DocsCardLink> );}
function splitHash(href: string) { const hashIndex = href.indexOf('#'); if (hashIndex === -1) return { hash: undefined, path: href }; return { hash: href.slice(hashIndex + 1) || undefined, path: href.slice(0, hashIndex) };}