sforkowany z mirror/soapbox
117 wiersze
3.6 KiB
TypeScript
117 wiersze
3.6 KiB
TypeScript
import classNames from 'clsx';
|
|
import React from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { HStack, Text } from 'soapbox/components/ui';
|
|
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
|
|
|
|
const sizes = {
|
|
md: 'p-4 sm:rounded-xl',
|
|
lg: 'p-4 sm:p-6 sm:rounded-xl',
|
|
xl: 'p-4 sm:p-10 sm:rounded-3xl',
|
|
};
|
|
|
|
const messages = defineMessages({
|
|
back: { id: 'card.back.label', defaultMessage: 'Back' },
|
|
});
|
|
|
|
interface ICard {
|
|
/** The type of card. */
|
|
variant?: 'default' | 'rounded'
|
|
/** Card size preset. */
|
|
size?: keyof typeof sizes
|
|
/** Extra classnames for the <div> element. */
|
|
className?: string
|
|
/** Elements inside the card. */
|
|
children: React.ReactNode
|
|
}
|
|
|
|
/** An opaque backdrop to hold a collection of related elements. */
|
|
const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'default', size = 'md', className, ...filteredProps }, ref): JSX.Element => (
|
|
<div
|
|
ref={ref}
|
|
{...filteredProps}
|
|
className={classNames({
|
|
'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded',
|
|
[sizes[size]]: variant === 'rounded',
|
|
}, className)}
|
|
>
|
|
{children}
|
|
</div>
|
|
));
|
|
|
|
interface ICardHeader {
|
|
backHref?: string,
|
|
onBackClick?: (event: React.MouseEvent) => void
|
|
className?: string
|
|
/** Callback when the card action is clicked. */
|
|
onActionClick?: () => void,
|
|
/** URL to the svg icon for the card action. */
|
|
actionIcon?: string,
|
|
/** Text for the action. */
|
|
actionTitle?: string,
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
/**
|
|
* Card header container with back button.
|
|
* Typically holds a CardTitle.
|
|
*/
|
|
const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBackClick, onActionClick, actionIcon, actionTitle }): JSX.Element => {
|
|
const intl = useIntl();
|
|
|
|
const renderBackButton = () => {
|
|
if (!backHref && !onBackClick) {
|
|
return null;
|
|
}
|
|
|
|
const Comp: React.ElementType = backHref ? Link : 'button';
|
|
const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
|
|
|
|
return (
|
|
<Comp {...backAttributes} className='p-0.5 -m-0.5 text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2 rounded-full' aria-label={intl.formatMessage(messages.back)}>
|
|
<SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' />
|
|
<span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
|
|
</Comp>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<HStack alignItems='center' space={2} className={classNames('mb-4', className)}>
|
|
{renderBackButton()}
|
|
|
|
{children}
|
|
|
|
{onActionClick && actionIcon && (
|
|
<button className='p-0.5 -m-0.5 text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2 rounded-full' onClick={onActionClick} title={actionTitle}>
|
|
<SvgIcon src={actionIcon} className='h-6 w-6' />
|
|
</button>
|
|
)}
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
interface ICardTitle {
|
|
title: React.ReactNode
|
|
}
|
|
|
|
/** A card's title. */
|
|
const CardTitle: React.FC<ICardTitle> = ({ title }): JSX.Element => (
|
|
<Text className='grow' size='xl' weight='bold' tag='h1' data-testid='card-title' truncate>{title}</Text>
|
|
);
|
|
|
|
interface ICardBody {
|
|
/** Classnames for the <div> element. */
|
|
className?: string
|
|
/** Children to appear inside the card. */
|
|
children: React.ReactNode
|
|
}
|
|
|
|
/** A card's body. */
|
|
const CardBody: React.FC<ICardBody> = ({ className, children }): JSX.Element => (
|
|
<div data-testid='card-body' className={className}>{children}</div>
|
|
);
|
|
|
|
export { Card, CardHeader, CardTitle, CardBody };
|