/
githubmirror
/
traefik
Обзор
Документация
Войти
/
githubmirror
/
traefik
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
webui/src/components/buttons/CopyButton.tsx
57 строк
1 KB
Murat Aslan
Display server weight in service detail view
30 мар 2026, 17:58
Не верифицирован
30 мар 2026, 17:58
9a8ff96
Код
Авторство
О чём код?
import { Flex, Button, CSS, AccessibleIcon } from '@traefik-labs/faency' import React, { useState } from 'react' import { FiCheck, FiCopy } from 'react-icons/fi' type CopyButtonProps = { text: string disabled?: boolean css?: CSS onClick?: () => void iconOnly?: boolean title?: string color?: string } const CopyButton = ({ text, disabled, css, onClick, iconOnly = false, title = 'Copy', color = 'var(--colors-textSubtle)', }: CopyButtonProps) => { const [showConfirmation, setShowConfirmation] = useState(false) return ( <Button ghost size="small" css={{ color: '$hiContrast', px: iconOnly ? '$1' : undefined, ...css, }} title={title} onClick={async (e: React.MouseEvent): Promise<void> => { e.preventDefault() e.stopPropagation() await navigator.clipboard.writeText(text) if (onClick) onClick() setShowConfirmation(true) setTimeout(() => setShowConfirmation(false), 1500) }} disabled={disabled} type="button" > <Flex align="center" gap={2} css={{ userSelect: 'none' }}> <AccessibleIcon label="copy"> {showConfirmation ? <FiCheck color={color} size={14} /> : <FiCopy color={color} size={14} />} </AccessibleIcon> {!iconOnly ? (showConfirmation ? 'Copied!' : title) : null} </Flex> </Button> ) } export default CopyButton