import type { ReactNode } from 'react';
import { Spinner } from '#/components/Spinner';
import { Text } from '#/components/Text';
import { Button, ButtonText } from '#/components/web/Button';
import { m } from '#/paraglide/messages';
import * as css from './ListTail.css';
/**
* reserves space for pagination state.
*
* @param border whether to show the divider
* @param children pagination state
* @returns the list tail
*/
export function Frame({ border = true, children }: { border?: boolean; children?: ReactNode }) {
return <div className={css.frame({ border })}>{children}</div>;
}
/** @returns a pagination spinner */
export function Pending() {
return <Spinner color="default" label={m['common.status.loading']()} size="_2xl" />;
}
/**
* renders a pagination error.
*
* @param message error message
* @param onRetry retry handler
* @returns the error row
*/
export function Error({ message, onRetry }: { message: string; onRetry: () => void }) {
return (
<div className={css.errorOuter}>
<div className={css.errorRow}>
<Text className={css.errorText} color="textContrastMedium" numberOfLines={2} size="sm">
{message}
</Text>
<Button label={m['common.a11y.pressToRetry']()} onClick={onRetry} variant="solid">
<ButtonText>{m['common.action.retry']()}</ButtonText>
</Button>
</div>
</div>
);
}
/**
* renders an end of list message.
*
* @param children end-of-list message
* @returns the end marker
*/
export function End({ children }: { children: ReactNode }) {
return (
<Text color="textContrastLow" size="sm">
{children}
</Text>
);
}