NapCatQQ/napcat.webui/src/components/hitokoto.tsx

import { Button } from '@heroui/button';
import { Tooltip } from '@heroui/tooltip';
import { useRequest } from 'ahooks';
import toast from 'react-hot-toast';
import { IoCopy, IoRefresh } from 'react-icons/io5';

import { request } from '@/utils/request';

import PageLoading from './page_loading';

export default function Hitokoto () {
  const {
    data: dataOri,
    error,
    loading,
    run,
  } = useRequest(() => request.get<IHitokoto>('https://hitokoto.152710.xyz/'), {
    pollingInterval: 10000,
    throttleWait: 1000,
  });
  const data = dataOri?.data;
  const onCopy = () => {
    try {
      const text = `${data?.hitokoto} —— ${data?.from} ${data?.from_who}`;
      navigator.clipboard.writeText(text);
      toast.success('复制成功');
    } catch (_error) {
      toast.error('复制失败, 请手动复制');
    }
  };
  return (
    <div>
      <div className='relative'>
        {loading && <PageLoading />}
        {error
          ? (
            <div className='text-primary-400'>一言加载失败：{error.message}</div>
          )
          : (
            <>
              <div>{data?.hitokoto}</div>
              <div className='text-right'>
                —— <span className='text-default-400'>{data?.from}</span>{' '}
                {data?.from_who}
              </div>
            </>
          )}
      </div>
      <div className='flex gap-2'>
        <Tooltip content='刷新' placement='top'>
          <Button
            onPress={run}
            size='sm'
            isLoading={loading}
            isIconOnly
            radius='full'
            color='primary'
            variant='flat'
          >
            <IoRefresh />
          </Button>
        </Tooltip>
        <Tooltip content='复制' placement='top'>
          <Button
            onPress={onCopy}
            size='sm'
            isIconOnly
            radius='full'
            color='success'
            variant='flat'
          >
            <IoCopy />
          </Button>
        </Tooltip>
      </div>
    </div>
  );
}