休闲一下

独狼2910

1. import React, { useState } from 'react';
   
2. 
   
3. export default function App() {
   
4.   const [showAnswer, setShowAnswer] = useState(false);
   
5.   const word = "strawberrrrry";
   
6.   const countR = () => {
   
7.     return word.split('').filter(char => char === 'r').length;
   
8.   };
   
9. 
   
10.   return (
    
11.     <div className="min-h-screen bg-gradient-to-br from-pink-100 to-purple-200 flex items-center justify-center p-4">
    
12.       <div
    
13.         className={`bg-white rounded-2xl shadow-xl p-8 w-full max-w-md transform transition-all duration-500 ${
    
14.           showAnswer ? 'scale-105' : 'scale-100'
    
15.         }`}
    
16.       >
    
17.         <div className="flex justify-center mb-6">
    
18.           <div className="text-3xl">🍓</div>
    
19.         </div>
    
20.         
    
21.         <h1 className="text-2xl font-bold text-center text-gray-800 mb-4">神奇单词冒险</h1>
    
22.         
    
23.         <div className="bg-gradient-to-r from-yellow-100 to-orange-100 p-4 rounded-xl mb-6 text-center">
    
24.           <p className="font-mono text-xl text-gray-700 tracking-wider">{word}</p>
    
25.         </div>
    
26.         
    
27.         <p className="text-gray-600 text-center mb-8">这里面藏了多少个小「r」精灵呢？</p>
    
28.         
    
29.         <button
    
30.           onClick={() => setShowAnswer(!showAnswer)}
    
31.           className="w-full py-3 bg-gradient-to-r from-pink-500 to-red-500 text-white font-semibold rounded-xl shadow-md hover:shadow-lg transform transition-all duration-300 hover:scale-105 focus:outline-none"
    
32.         >
    
33.           {showAnswer ? '再猜一次' : '揭晓答案'}
    
34.         </button>
    
35.         
    
36.         {showAnswer && (
    
37.           <div className="mt-8 animate-fadeIn">
    
38.             <div className="bg-purple-50 rounded-xl p-4 text-center">
    
39.               <p className="text-2xl font-bold text-purple-600">✨ 答案是：{countR()} 个「r」精灵！</p>
    
40.               <div className="mt-2 flex justify-center space-x-1">
    
41.                 {word.split('').map((char, index) => (
    
42.                   <span
    
43.                     key={index}
    
44.                     className={`inline-block w-6 h-6 rounded-full text-center ${
    
45.                       char === 'r' ? 'bg-pink-200 text-pink-700 font-bold' : 'text-gray-400'
    
46.                     }`}
    
47.                   >
    
48.                     {char}
    
49.                   </span>
    
50.                 ))}
    
51.               </div>
    
52.             </div>
    
53.           </div>
    
54.         )}
    
55.       </div>
    
56.     </div>
    
57.   );
    
58. }

复制代码