NapCatQQ/napcat.webui/src/components/display_card/container.tsx

import { Card, CardBody, CardFooter, CardHeader } from '@heroui/card';
import clsx from 'clsx';

import { title } from '../primitives';

export interface ContainerProps {
  title: string
  tag?: React.ReactNode
  action: React.ReactNode
  enableSwitch: React.ReactNode
  children: React.ReactNode
}

export interface DisplayCardProps {
  showType?: boolean
  onEdit: () => void
  onEnable: () => Promise<void>
  onDelete: () => Promise<void>
  onEnableDebug: () => Promise<void>
}

const DisplayCardContainer: React.FC<ContainerProps> = ({
  title: _title,
  action,
  tag,
  enableSwitch,
  children,
}) => {
  return (
    <Card className='bg-opacity-50 backdrop-blur-sm'>
      <CardHeader className='pb-0 flex items-center'>
        {tag && (
          <div className='text-center text-default-400 mb-1 absolute top-0 left-1/2 -translate-x-1/2 text-sm pointer-events-none bg-warning-100 dark:bg-warning-50 px-2 rounded-b'>
            {tag}
          </div>
        )}
        <h2
          className={clsx(
            title({
              color: 'foreground',
              size: 'xs',
              shadow: true,
            }),
            'truncate'
          )}
        >
          {_title}
        </h2>
        <div className='ml-auto'>{enableSwitch}</div>
      </CardHeader>
      <CardBody className='text-sm'>{children}</CardBody>
      <CardFooter>{action}</CardFooter>
    </Card>
  );
};

export default DisplayCardContainer;