squi-HD/src/components/Card/index.tsx

import clsx from 'clsx';
import { defineComponent, PropType } from 'vue-demi';
import './index.scss';
export type CardType =
  | 'message-list'
  | 'incident-info'
  | 'command-chain'
  | 'incident-plan'
  | 'emergency-linkage'
  | 'execution-log'
  | 'live-monitoring';

export default defineComponent({
  name: 'Card',
  props: {
    cardType: {
      type: String as PropType<CardType>,
      default: 'incident-info',
    },
  },
  setup(props, ctx) {
    const className = clsx('card-container', {
      [`card-container-bg-${props.cardType}`]: props.cardType,
    });
    return () => (
      <div class={className}>{ctx.slots.default && ctx.slots.default()}</div>
    );
  },
});