import { clsx } from 'clsx'; import Body from '../body'; import { Size, Typography } from '../common'; import Title from '../title'; export interface TileProps { /** Classes to apply to the Tile container */ /** A label for the accordion item, used for accessibility purposes. */ 'aria-label'?: string; className?: string; description?: React.ReactNode; disabled?: boolean; href?: string; target?: React.HTMLAttributeAnchorTarget; /** Accepts only Avatar and images */ media: React.ReactNode; /** Function called onClick or onKeyDown */ onClick?: (event?: React.MouseEvent) => void; /** The size applied to Tile */ size?: `${Size.SMALL | Size.MEDIUM}`; title: React.ReactNode; } export default function Tile({ 'aria-label': ariaLabel, className, description, disabled, href, target, media, onClick, size = 'md', title, }: TileProps) { const isSmall = size === 'sm'; const Element = href ? 'a' : 'button'; return ( { if (key === 'Enter' || key === ' ') { onClick?.(); } } } >
{media}
{title} {description ? ( {description} ) : null} ); }