File size: 2,038 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | import { ChevronLeft, ChevronRight } from 'lucide-react';
import type { TMessageProps } from '~/common';
import { cn } from '~/utils';
type TSiblingSwitchProps = Pick<TMessageProps, 'siblingIdx' | 'siblingCount' | 'setSiblingIdx'>;
export default function SiblingSwitch({
siblingIdx,
siblingCount,
setSiblingIdx,
}: TSiblingSwitchProps) {
if (siblingIdx === undefined) {
return null;
} else if (siblingCount === undefined) {
return null;
}
const previous = () => {
setSiblingIdx && setSiblingIdx(siblingIdx - 1);
};
const next = () => {
setSiblingIdx && setSiblingIdx(siblingIdx + 1);
};
const buttonStyle = cn(
'hover-button rounded-lg p-1.5 text-text-secondary-alt transition-colors duration-200',
'hover:text-text-primary hover:bg-surface-hover',
'md:group-hover:visible md:group-focus-within:visible md:group-[.final-completion]:visible',
'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none',
);
return siblingCount > 1 ? (
<nav
className="visible flex items-center justify-center gap-2 self-center pt-0 text-xs"
aria-label="Sibling message navigation"
>
<button
className={buttonStyle}
type="button"
onClick={previous}
disabled={siblingIdx == 0}
aria-label="Previous sibling message"
aria-disabled={siblingIdx == 0}
>
<ChevronLeft size="19" aria-hidden="true" />
</button>
<span
className="flex-shrink-0 flex-grow tabular-nums"
aria-live="polite"
aria-atomic="true"
role="status"
>
{siblingIdx + 1} / {siblingCount}
</span>
<button
className={buttonStyle}
type="button"
onClick={next}
disabled={siblingIdx == siblingCount - 1}
aria-label="Next sibling message"
aria-disabled={siblingIdx == siblingCount - 1}
>
<ChevronRight size="19" aria-hidden="true" />
</button>
</nav>
) : null;
}
|