初始化

wwf

2025-05-20 938c3e5a587ce950a94964ea509b9e7f8834dfae

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
'use client'
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
  RiClipboardFill,
  RiClipboardLine,
} from '@remixicon/react'
import { debounce } from 'lodash-es'
import copy from 'copy-to-clipboard'
import copyStyle from './style.module.css'
import Tooltip from '@/app/components/base/tooltip'
import ActionButton from '@/app/components/base/action-button'
 
type Props = {
  content: string
  className?: string
}
 
const prefixEmbedded = 'appOverview.overview.appInfo.embedded'
 
const CopyFeedback = ({ content }: Props) => {
  const { t } = useTranslation()
  const [isCopied, setIsCopied] = useState<boolean>(false)
 
  const onClickCopy = debounce(() => {
    copy(content)
    setIsCopied(true)
  }, 100)
 
  const onMouseLeave = debounce(() => {
    setIsCopied(false)
  }, 100)
 
  return (
    <Tooltip
      popupContent={
        (isCopied
          ? t(`${prefixEmbedded}.copied`)
          : t(`${prefixEmbedded}.copy`)) || ''
      }
    >
      <ActionButton>
        <div
          onClick={onClickCopy}
          onMouseLeave={onMouseLeave}
        >
          {isCopied && <RiClipboardFill className='h-4 w-4' />}
          {!isCopied && <RiClipboardLine className='h-4 w-4' />}
        </div>
      </ActionButton>
    </Tooltip>
  )
}
 
export default CopyFeedback
 
export const CopyFeedbackNew = ({ content, className }: Pick<Props, 'className' | 'content'>) => {
  const { t } = useTranslation()
  const [isCopied, setIsCopied] = useState<boolean>(false)
 
  const onClickCopy = debounce(() => {
    copy(content)
    setIsCopied(true)
  }, 100)
 
  const onMouseLeave = debounce(() => {
    setIsCopied(false)
  }, 100)
 
  return (
    <Tooltip
      popupContent={
        (isCopied
          ? t(`${prefixEmbedded}.copied`)
          : t(`${prefixEmbedded}.copy`)) || ''
      }
    >
      <div
        className={`h-8 w-8 cursor-pointer rounded-lg hover:bg-components-button-ghost-bg-hover ${className ?? ''
        }`}
      >
        <div
          onClick={onClickCopy}
          onMouseLeave={onMouseLeave}
          className={`h-full w-full ${copyStyle.copyIcon} ${isCopied ? copyStyle.copied : ''
          }`}
        ></div>
      </div>
    </Tooltip>
  )
}