Update src/App.js

src/App.js

@@ -1,342 +1,12 @@
 import React, { useState } from 'react';
+import './index.css';
 
-const HoroscopeApp = () => {
-  const [selectedSign, setSelectedSign] = useState('taurus');
-  const [selectedGender, setSelectedGender] = useState('female');
-  const [selectedPeriod, setSelectedPeriod] = useState('today');
-  const [selectedCategory, setSelectedCategory] = useState('love');
-  const [isDarkMode, setIsDarkMode] = useState(false);
-
-  const zodiacSigns = [
-    { id: 'taurus', name: 'Taurus', dates: 'April 20 - May 20', emoji: '🐂', image: 'http://cbx-prod.b-cdn.net/COLOURBOX42780190.jpg?width=800&height=800&quality=70' },
-    { id: 'sagittarius', name: 'Sagittarius', dates: 'Nov 22 - Dec 21', emoji: '🏹', image: null },
-    { id: 'pisces', name: 'Pisces', dates: 'Feb 19 - Mar 20', emoji: '🐠', image: null },
-    { id: 'libra', name: 'Libra', dates: 'Sep 23 - Oct 22', emoji: '⚖️', image: null },
-    { id: 'gemini', name: 'Gemini', dates: 'May 21 - Jun 20', emoji: '👯', image: null },
-    { id: 'leo', name: 'Leo', dates: 'Jul 23 - Aug 22', emoji: '🦁', image: null },
-    { id: 'virgo', name: 'Virgo', dates: 'Aug 23 - Sep 22', emoji: '👸', image: null },
-    { id: 'aquarius', name: 'Aquarius', dates: 'Jan 20 - Feb 18', emoji: '🏺', image: null },
-    { id: 'aries', name: 'Aries', dates: 'Mar 21 - Apr 19', emoji: '🐏', image: null },
-    { id: 'cancer', name: 'Cancer', dates: 'Jun 21 - Jul 22', emoji: '🦀', image: null },
-    { id: 'scorpio', name: 'Scorpio', dates: 'Oct 23 - Nov 21', emoji: '🦂', image: null },
-    { id: 'capricorn', name: 'Capricorn', dates: 'Dec 22 - Jan 19', emoji: '🐐', image: null }
-  ];
-
-  const periods = [
-    { id: 'today', name: 'Today' },
-    { id: 'week', name: 'Week' },
-    { id: 'month', name: 'Month' },
-    { id: 'year', name: 'Year' }
-  ];
-
-  const categories = [
-    { id: 'love', name: 'Love', icon: '💖' },
-    { id: 'health', name: 'Health', icon: '🌟' },
-    { id: 'relationship', name: 'Relationship', icon: '👥' },
-    { id: 'finance', name: 'Finance', icon: '💰' }
-  ];
-
-  const horoscopeContent = {
-    love: {
-      today: "Love is in the air today! Your romantic side is highlighted, making it a perfect day for expressing your feelings.",
-      week: "This week brings romantic opportunities and deepening connections with your loved ones.",
-      month: "A month of passionate encounters and meaningful relationships awaits you.",
-      year: "This year will be transformative for your love life, bringing lasting happiness."
-    },
-    health: {
-      today: "Your energy levels are high today. Focus on maintaining balance between work and rest.",
-      week: "Pay attention to your physical wellbeing this week. Small changes can make big differences.",
-      month: "This month emphasizes the importance of mental and physical health harmony.",
-      year: "A year of wellness and vitality lies ahead. Make health your priority."
-    },
-    relationship: {
-      today: "Relationships flourish under today's cosmic energy. Communication is key to success.",
-      week: "Strengthen your bonds with family and friends through meaningful conversations.",
-      month: "Social connections expand this month, bringing new friendships and opportunities.",
-      year: "Your social circle will grow significantly, enriching your life in unexpected ways."
-    },
-    finance: {
-      today: "Financial opportunities present themselves today. Stay alert for new possibilities.",
-      week: "This week favors careful financial planning and smart investments.",
-      month: "Money matters require attention this month. Budget wisely for future security.",
-      year: "Financial growth and stability are highlighted throughout this year."
-    }
-  };
-
-  const luckyData = {
-    colors: ['Green', 'Blue', 'Purple', 'Gold', 'Silver', 'Red', 'Pink', 'Orange', 'Yellow', 'Turquoise', 'Violet', 'Indigo'],
-    numbers: [1, 3, 7, 9, 11, 13, 21, 23, 27, 33, 42, 77],
-    stones: ['Emerald', 'Sapphire', 'Ruby', 'Diamond', 'Amethyst', 'Topaz', 'Opal', 'Pearl', 'Garnet', 'Aquamarine', 'Citrine', 'Turquoise'],
-    moods: ['Optimistic', 'Energetic', 'Peaceful', 'Confident', 'Creative', 'Adventurous', 'Romantic', 'Focused', 'Joyful', 'Balanced', 'Inspired', 'Harmonious']
-  };
-
-  const getCurrentSign = () => {
-    return zodiacSigns.find(sign => sign.id === selectedSign);
-  };
-
-  const getHoroscopeText = () => {
-    return horoscopeContent[selectedCategory][selectedPeriod];
-  };
-
-  const getLuckyElement = (type) => {
-    const data = luckyData[type];
-    return data[Math.floor(Math.random() * data.length)];
-  };
-
-  const getPeriodTitle = () => {
-    const titles = {
-      today: 'Horoscope for Today',
-      week: 'Horoscope for This Week',
-      month: 'Horoscope for This Month',
-      year: 'Horoscope for This Year'
-    };
-    return titles[selectedPeriod];
-  };
-
-  const toggleTheme = () => {
-    setIsDarkMode(!isDarkMode);
-  };
-
+// Paste toàn bộ code component HoroscopeApp của chúng ta vào đây
+const App = () => {
+  // Code component hoàn chỉnh từ artifact
   return (
-    <div className={`min-h-screen transition-all duration-500 ${
-      isDarkMode 
-        ? 'bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900 text-white' 
-        : 'bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 text-gray-800'
-    }`}>
-      <div className="max-w-6xl mx-auto p-5">
-        {/* Header Controls */}
-        <div className="flex justify-between items-center mb-8">
-          {/* Theme Toggle */}
-          <button
-            onClick={toggleTheme}
-            className={`flex items-center gap-2 px-4 py-2 rounded-full font-medium transition-all duration-300 ${
-              isDarkMode 
-                ? 'bg-white bg-opacity-10 text-white hover:bg-opacity-20' 
-                : 'bg-white bg-opacity-90 text-gray-700 hover:bg-opacity-100'
-            } shadow-lg hover:scale-105`}
-          >
-            <span className="text-xl">{isDarkMode ? '☀️' : '🌙'}</span>
-            {isDarkMode ? 'Light Mode' : 'Dark Mode'}
-          </button>
-
-          {/* Gender Selection */}
-          <div className={`flex rounded-full p-1 shadow-lg ${
-            isDarkMode ? 'bg-white bg-opacity-10' : 'bg-white bg-opacity-90'
-          }`}>
-            <button
-              onClick={() => setSelectedGender('female')}
-              className={`px-6 py-2 rounded-full font-medium transition-all ${
-                selectedGender === 'female'
-                  ? 'bg-pink-400 text-white shadow-md'
-                  : isDarkMode ? 'text-white hover:text-pink-300' : 'text-gray-600 hover:text-pink-400'
-              }`}
-            >
-              Female
-            </button>
-            <button
-              onClick={() => setSelectedGender('male')}
-              className={`px-6 py-2 rounded-full font-medium transition-all ${
-                selectedGender === 'male'
-                  ? 'bg-blue-400 text-white shadow-md'
-                  : isDarkMode ? 'text-white hover:text-blue-300' : 'text-gray-600 hover:text-blue-400'
-              }`}
-            >
-              Male
-            </button>
-          </div>
-        </div>
-
-        {/* App Title */}
-        <div className="text-center mb-10">
-          <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full mb-4 shadow-lg">
-            <span className="text-2xl text-white">🔮</span>
-          </div>
-          <h1 className="text-4xl font-bold mb-2">Horoscope App</h1>
-        </div>
-
-        {/* Zodiac Signs Grid - Single Row */}
-        <div className="flex justify-center gap-3 mb-10 overflow-x-auto pb-4">
-          {zodiacSigns.map((sign) => (
-            <div
-              key={sign.id}
-              onClick={() => setSelectedSign(sign.id)}
-              className="flex flex-col items-center cursor-pointer transition-all duration-300 hover:scale-105 min-w-max"
-            >
-              <div className={`w-16 h-16 rounded-full p-1 transition-all ${
-                selectedSign === sign.id
-                  ? 'shadow-lg'
-                  : ''
-              }`} 
-              style={{
-                background: selectedSign === sign.id 
-                  ? 'linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)'
-                  : 'linear-gradient(135deg, #07090A 0%, #979999 100%)'
-              }}>
-                <div className={`w-full h-full rounded-full flex items-center justify-center text-xl overflow-hidden ${
-                  isDarkMode ? 'bg-gray-800' : 'bg-gray-100'
-                }`}>
-                  {sign.image ? (
-                    <img 
-                      src={sign.image} 
-                      alt={sign.name}
-                      className="w-full h-full object-cover rounded-full"
-                      onError={(e) => {
-                        e.target.style.display = 'none';
-                        e.target.nextSibling.style.display = 'block';
-                      }}
-                    />
-                  ) : null}
-                  <span style={{ display: sign.image ? 'none' : 'block' }}>
-                    {sign.emoji}
-                  </span>
-                </div>
-              </div>
-              <p className="text-xs font-medium mt-2 text-center">{sign.name}</p>
-            </div>
-          ))}
-        </div>
-
-        {/* Period Selection */}
-        <div className="flex justify-center mb-8">
-          <div className={`flex rounded-full p-1 shadow-lg ${
-            isDarkMode ? 'bg-white bg-opacity-10' : 'bg-white bg-opacity-90'
-          }`}>
-            {periods.map((period) => (
-              <button
-                key={period.id}
-                onClick={() => setSelectedPeriod(period.id)}
-                className={`px-6 py-3 rounded-full font-medium transition-all ${
-                  selectedPeriod === period.id
-                    ? 'bg-blue-400 text-white shadow-md'
-                    : isDarkMode ? 'text-white hover:text-blue-300' : 'text-gray-600 hover:text-blue-400'
-                }`}
-              >
-                {period.name}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Category Selection */}
-        <div className="flex justify-center flex-wrap gap-3 mb-10">
-          {categories.map((category) => (
-            <button
-              key={category.id}
-              onClick={() => setSelectedCategory(category.id)}
-              className={`flex items-center gap-2 px-4 py-2 rounded-full font-medium transition-all duration-300 shadow-lg hover:scale-105 ${
-                selectedCategory === category.id
-                  ? 'bg-purple-400 text-white shadow-lg'
-                  : isDarkMode 
-                    ? 'bg-white bg-opacity-10 text-white hover:bg-opacity-20' 
-                    : 'bg-white bg-opacity-90 text-gray-600 hover:bg-opacity-100'
-              }`}
-            >
-              <span>{category.icon}</span>
-              {category.name}
-            </button>
-          ))}
-        </div>
-
-        {/* Horoscope Content */}
-        <div className={`rounded-3xl p-8 mb-4 shadow-2xl backdrop-blur-lg transition-all ${
-          isDarkMode 
-            ? 'bg-white bg-opacity-10 border border-white border-opacity-20' 
-            : 'bg-white bg-opacity-95'
-        }`}>
-          <div className="flex items-center gap-6 mb-8">
-            <div className="w-16 h-16 rounded-full p-1 shadow-lg"
-                 style={{
-                   background: 'linear-gradient(135deg, #1D3249 0%, #96D1E2 100%)'
-                 }}>
-              <div className={`w-full h-full rounded-full flex items-center justify-center text-2xl overflow-hidden ${
-                isDarkMode ? 'bg-gray-800' : 'bg-gray-100'
-              }`}>
-                {getCurrentSign()?.image ? (
-                  <img 
-                    src={getCurrentSign()?.image} 
-                    alt={getCurrentSign()?.name}
-                    className="w-full h-full object-cover rounded-full"
-                    onError={(e) => {
-                      e.target.style.display = 'none';
-                      e.target.nextSibling.style.display = 'block';
-                    }}
-                  />
-                ) : null}
-                <span style={{ display: getCurrentSign()?.image ? 'none' : 'block' }}>
-                  {getCurrentSign()?.emoji}
-                </span>
-              </div>
-            </div>
-            <div className="flex-1">
-              <h2 className="text-3xl font-bold text-blue-400 flex items-center gap-2 mb-2">
-                {getPeriodTitle()}
-                <span className="text-xl">📈</span>
-              </h2>
-              <div className="flex items-center gap-2">
-                <span className="text-xl">{getCurrentSign()?.emoji}</span>
-                <span className="font-semibold">{getCurrentSign()?.name}</span>
-              </div>
-            </div>
-          </div>
-
-          <p className={`font-medium mb-6 ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
-            {getCurrentSign()?.name} ({getCurrentSign()?.dates})
-          </p>
-
-          <p className="text-lg leading-relaxed mb-8">
-            {getHoroscopeText()}
-          </p>
-
-          {/* Lucky Elements */}
-          <div className={`grid grid-cols-2 md:grid-cols-4 gap-6 pt-6 border-t ${
-            isDarkMode ? 'border-gray-700' : 'border-gray-200'
-          }`}>
-            <div className="text-center">
-              <div className="text-3xl mb-3">🍀</div>
-              <p className={`text-xs uppercase tracking-wider mb-2 ${
-                isDarkMode ? 'text-gray-400' : 'text-gray-500'
-              }`}>
-                Lucky Color
-              </p>
-              <p className="font-bold text-green-500">{getLuckyElement('colors')}</p>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl mb-3">🔢</div>
-              <p className={`text-xs uppercase tracking-wider mb-2 ${
-                isDarkMode ? 'text-gray-400' : 'text-gray-500'
-              }`}>
-                Lucky Number
-              </p>
-              <p className="font-bold text-blue-500">{getLuckyElement('numbers')}</p>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl mb-3">💎</div>
-              <p className={`text-xs uppercase tracking-wider mb-2 ${
-                isDarkMode ? 'text-gray-400' : 'text-gray-500'
-              }`}>
-                Lucky Stone
-              </p>
-              <p className="font-bold text-purple-500">{getLuckyElement('stones')}</p>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl mb-3">⭐</div>
-              <p className={`text-xs uppercase tracking-wider mb-2 ${
-                isDarkMode ? 'text-gray-400' : 'text-gray-500'
-              }`}>
-                Mood
-              </p>
-              <p className="font-bold text-yellow-500">{getLuckyElement('moods')}</p>
-            </div>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="text-center text-sm opacity-70 mt-4">
-          <p>✨ Discover your daily horoscope and unlock the secrets of the stars ✨</p>
-        </div>
-      </div>
-    </div>
+    // JSX của horoscope app
   );
 };
 
-export default HoroscopeApp;
+export default App;