NapCatQQ/napcat.webui/src/components/github_info/release.tsx

import { useEffect, useState } from 'react';

import { getReleaseTime } from '@/utils/time';

import type { GithubRelease as GithubReleaseType } from '@/types/github';

export interface GithubReleaseProps {
  releaseData: GithubReleaseType
}
const GithubRelease: React.FC<GithubReleaseProps> = (props) => {
  const { releaseData } = props;
  const [releaseTime, setReleaseTime] = useState<string | null>(null);

  useEffect(() => {
    if (releaseData) {
      const timer = setInterval(() => {
        const time = getReleaseTime(releaseData.published_at);

        setReleaseTime(time);
      }, 1000);

      return () => clearInterval(timer);
    }
  }, [releaseData]);

  return (
    <div className='flex flex-col gap-1'>
      <span>Releases</span>
      <div className='px-2 py-1 rounded-small bg-default-100 bg-opacity-50 backdrop-blur-sm group-data-[hover=true]:bg-default-200'>
        <span className='text-tiny text-default-600'>{releaseData.name}</span>
        <div className='flex gap-2 text-tiny'>
          <span className='text-default-500'>{releaseTime}</span>
          <span className='text-success'>Latest</span>
        </div>
      </div>
    </div>
  );
};

export default GithubRelease;