bigbuffet-rw/app/soapbox/features/chats/components/ui/pane.tsx

34 lines
870 B
TypeScript
Raw Normal View History

2023-02-06 10:01:03 -08:00
import clsx from 'clsx';
import React from 'react';
interface IPane {
/** Whether the pane is open or minimized. */
2022-08-16 13:35:06 -07:00
isOpen: boolean,
/** Positions the pane on the screen, with 0 at the right. */
index: number,
/** Children to display in the pane. */
children: React.ReactNode,
/** Whether this is the main chat pane. */
main?: boolean,
}
/** Chat pane UI component for desktop. */
2022-08-16 13:35:06 -07:00
const Pane: React.FC<IPane> = ({ isOpen = false, index, children, main = false }) => {
2022-07-20 18:58:45 -07:00
const right = (404 * index) + 20;
return (
<div
2023-02-06 10:06:44 -08:00
className={clsx('fixed bottom-0 right-1 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl dark:bg-gray-900', {
2022-08-16 13:35:06 -07:00
'h-[550px] max-h-[100vh]': isOpen,
'h-16': !isOpen,
2022-07-20 18:58:45 -07:00
})}
style={{ right: `${right}px` }}
2022-10-03 06:14:45 -07:00
data-testid='pane'
>
{children}
</div>
);
};
export { Pane };