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

import { Button, ButtonGroup } from '@heroui/button'
import { Switch } from '@heroui/switch'
import { useState } from 'react'
import { CgDebug } from 'react-icons/cg'
import { FiEdit3 } from 'react-icons/fi'
import { MdDeleteForever } from 'react-icons/md'

import DisplayCardContainer from './container'

type NetworkType = OneBotConfig['network']

export type NetworkDisplayCardFields<T extends keyof NetworkType> = Array<{
  label: string
  value: NetworkType[T][0][keyof NetworkType[T][0]]
  render?: (
    value: NetworkType[T][0][keyof NetworkType[T][0]]
  ) => React.ReactNode
}>

export interface NetworkDisplayCardProps<T extends keyof NetworkType> {
  data: NetworkType[T][0]
  showType?: boolean
  typeLabel: string
  fields: NetworkDisplayCardFields<T>
  onEdit: () => void
  onEnable: () => Promise<void>
  onDelete: () => Promise<void>
  onEnableDebug: () => Promise<void>
}

const NetworkDisplayCard = <T extends keyof NetworkType>({
  data,
  showType,
  typeLabel,
  fields,
  onEdit,
  onEnable,
  onDelete,
  onEnableDebug
}: NetworkDisplayCardProps<T>) => {
  const { name, enable, debug } = data
  const [editing, setEditing] = useState(false)

  const handleEnable = () => {
    setEditing(true)
    onEnable().finally(() => setEditing(false))
  }

  const handleDelete = () => {
    setEditing(true)
    onDelete().finally(() => setEditing(false))
  }

  const handleEnableDebug = () => {
    setEditing(true)
    onEnableDebug().finally(() => setEditing(false))
  }

  return (
    <DisplayCardContainer
      action={
        <ButtonGroup
          fullWidth
          isDisabled={editing}
          radius="sm"
          size="sm"
          variant="flat"
        >
          <Button
            color="warning"
            startContent={<FiEdit3 size={16} />}
            onPress={onEdit}
          >
            编辑
          </Button>

          <Button
            color={debug ? 'secondary' : 'success'}
            variant="flat"
            startContent={
              <CgDebug
                style={{
                  width: '16px',
                  height: '16px',
                  minWidth: '16px',
                  minHeight: '16px'
                }}
              />
            }
            onPress={handleEnableDebug}
          >
            {debug ? '关闭调试' : '开启调试'}
          </Button>
          <Button
            className="bg-danger/20 text-danger hover:bg-danger/30 transition-colors"
            variant="flat"
            startContent={<MdDeleteForever size={16} />}
            onPress={handleDelete}
          >
            删除
          </Button>
        </ButtonGroup>
      }
      enableSwitch={
        <Switch
          isDisabled={editing}
          isSelected={enable}
          onChange={handleEnable}
        />
      }
      tag={showType && typeLabel}
      title={name}
    >
      <div className="grid grid-cols-2 gap-1">
        {fields.map((field, index) => (
          <div
            key={index}
            className={`flex items-center gap-2 ${
              field.label === 'URL' ? 'col-span-2' : ''
            }`}
          >
            <span className="text-default-400">{field.label}</span>
            {field.render ? (
              field.render(field.value)
            ) : (
              <span>{field.value}</span>
            )}
          </div>
        ))}
      </div>
    </DisplayCardContainer>
  )
}

export default NetworkDisplayCard