Viewing File: /home/markqprx/iniasli.pro/client/charts/chart-layout.tsx

import {ReactNode, Ref} from 'react';
import clsx from 'clsx';

export interface ChartLayoutProps {
  title: ReactNode;
  description?: ReactNode;
  className?: string;
  children: ReactNode;
  contentIsFlex?: boolean;
  contentClassName?: string;
  minHeight?: string;
  contentRef?: Ref<HTMLDivElement>;
  isLoading?: boolean;
}
export function ChartLayout(props: ChartLayoutProps) {
  const {
    title,
    description,
    children,
    className,
    contentIsFlex = true,
    contentClassName,
    contentRef,
    minHeight = 'min-h-440',
  } = props;

  return (
    <div
      className={clsx(
        'rounded-panel flex h-full flex-auto flex-col border bg',
        minHeight,
        className,
      )}
    >
      <div className="flex flex-shrink-0 items-center justify-between p-14 text-xs">
        <div className="text-sm font-semibold">{title}</div>
        {description && <div className="text-muted">{description}</div>}
      </div>
      <div
        ref={contentRef}
        className={clsx(
          'relative p-14',
          contentIsFlex && 'flex flex-auto items-center justify-center',
          contentClassName,
        )}
      >
        {children}
      </div>
    </div>
  );
}