import { useState } from 'react' import { Button } from "/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { format } from 'date-fns' export default function ReadingSpeedTest() { const [text, setText] = useState('') const [isRunning, setIsRunning] = useState(false) const [elapsedTime, setElapsedTime] = useState(0) const [results, setResults] = useState<{ time: number; wpm: number; date: string }[]>([]) const [intervalId, setIntervalId] = useState(null) const startStopwatch = () => { if (!isRunning) { const id = setInterval(() => { setElapsedTime((prevTime) => prevTime + 1000) }, 1000) setIntervalId(id) setIsRunning(true) } } const stopStopwatch = () => { if (isRunning && intervalId) { clearInterval(intervalId) setIsRunning(false) const wpm = calculateWPM() setResults((prevResults) => [ ...prevResults, { time: elapsedTime, wpm, date: format(new Date(), 'yyyy-MM-dd HH:mm:ss') }, ]) } } const resetStopwatch = () => { setElapsedTime(0) setIsRunning(false) if (intervalId) { clearInterval(intervalId) } } const countWords = () => { return text.trim().split(/\s+/).filter(word => word.length > 0).length } const calculateWPM = () => { const words = countWords() const minutes = elapsedTime / 60000 return Math.round(words / minutes) } const formatTime = (time: number) => { const minutes = Math.floor(time / 60000) const seconds = Math.floor((time % 60000) / 1000) return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}` } return ( Reading Speed Test

setText(e.target.value)}
          placeholder="Paste your text here..."
          className="resize-y h-40"
        />
        <div className="flex justify-between items-center">
          <div className="text-2xl font-bold">{formatTime(elapsedTime)}</div>
          <div className="space-x-2">
            <Button onClick={startStopwatch} disabled={isRunning}>
              Start
            </Button>
            <Button onClick={stopStopwatch} disabled={!isRunning}>
              Stop
            </Button>
            <Button onClick={resetStopwatch}>
              Reset
            </Button>
          </div>
        </div>
        {isRunning ? null : (
          <div className="text-2xl font-bold">
            WPM: {calculateWPM()}
          </div>
        )}
        <div className="mt-4">
          <CardTitle className="text-xl">History</CardTitle>
          <ul className="space-y-2">
            {results.map((result, index) => (
              <li key={index} className="bg-gray-100 p-2 rounded">
                <div className="font-bold">Test {index + 1}</div>
                <div>Time: {formatTime(result.time)}</div>
                <div>WPM: {result.wpm}</div>
                <div>Date: {result.date}</div>
              </li>
            ))}
          </ul>
        </div>
      </CardContent>
    </Card>
  )
}</article></body></html>