Global-sales/src/views/accounts/ShorturlConversion.jsx

import { Input, Button, Space, Typography } from 'antd'
import { LinkOutlined } from '@ant-design/icons'
import useShortUrlChange from '@/components/Shorturlchange'
import { useState } from 'react'

const { Title, Text, Paragraph } = Typography

function ShorturlConversion() {
  const [longUrl, setLongUrl] = useState('')
  const [shortUrl, setShortUrl] = useState('')
  const { convertUrl } = useShortUrlChange()

  const handleConvert = async () => {
    const result = await convertUrl(longUrl);
    if (result) {
      setShortUrl(result);
    }
  };

    return (
      <Space direction='vertical' size='large' className='w-full'>
        <div>
          <Text strong style={{ fontSize: '18px' }}>长链接：</Text>
          <Input 
            placeholder="输入需要转换的长链接" 
            value={longUrl} 
            onChange={(e) => setLongUrl(e.target.value)}
            prefix={<LinkOutlined />}
            size="large"
          />
        </div>
        <Button 
          type='primary' 
          size='medium'
          onClick={handleConvert}
          icon={<LinkOutlined />}
        >
          转换
        </Button>
        {shortUrl && (
          <div>
          <Text strong style={{ fontSize: '18px' }}>转换后的短链接：</Text>
          <Paragraph 
            copyable={shortUrl ? { 
              text: shortUrl,
              tooltips: ['点击复制', '已复制!'], 
            } : false}
            style={{ fontSize: '17px' }}
          >
            {shortUrl}
          </Paragraph>
        </div>)}
      </Space>
    );
}

export default ShorturlConversion