Profile Section - Copy this React, Tailwind Component to your project

Add functionality for profile click section in this code:import React, { useState } from "react"; import { FaDice, FaUserCircle, FaHistory, FaCog, FaWallet, FaSignOutAlt, FaChartLine } from "react icons/fa"; import { GiPokerHand, GiSlotMachine, GiRoulette } from "react icons/gi"; const CasinoTemplate = () => { const [activeTab, setActiveTab] = useState("games"); const [selectedGame, setSelectedGame] = useState(null); const [betAmount, setBetAmount] = useState(50); const [showNotification, setShowNotification] = useState(false); const games = [ { id: 1, name: "Poker Master", type: "poker", image: "images.unsplash.com/photo 1541278107931 e006523892df", minBet: 10, maxBet: 1000, }, { id: 2, name: "Lucky Slots", type: "slots", image: "images.unsplash.com/photo 1595769816263 9b910be24d5f", minBet: 5, maxBet: 500, }, { id: 3, name: "Royal Roulette", type: "roulette", image: "images.unsplash.com/photo 1606167668584 78701c57f13d", minBet: 20, maxBet: 2000, }, ]; const userStats = { balance: 5000, totalWins: 127, gamesPlayed: 342, favoriteGame: "Poker", }; const handleGameSelect = (game) => { setSelectedGame(game); }; const handlePlaceBet = () => { setShowNotification(true); setTimeout(() => setShowNotification(false), 3000); }; const renderGames = () => ( <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 6 p 6"> {games.map((game) => ( <div key={game.id} className="bg gray 800 rounded lg overflow hidden shadow lg transform hover:scale 105 transition transform duration 300" onClick={() => handleGameSelect(game)} > <img src={`https://${game.image}`} alt={game.name} className="w full h 48 object cover" onError={(e) => { e.target.src = "https://images.unsplash.com/photo 1605870445919 838d190e8e1b"; }} /> <div className="p 4"> <h3 className="text xl font bold text white mb 2">{game.name}</h3> <p className="text gray 400">Min Bet: ${game.minBet}</p> <p className="text gray 400">Max Bet: ${game.maxBet}</p> <button className="mt 4 w full bg green 500 hover:bg green 600 text white font bold py 2 px 4 rounded lg transition colors duration 300"> Play Now </button> </div> </div> ))} </div> ); const renderDashboard = () => ( <div className="p 6 space y 6"> <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 4 gap 6"> <div className="bg gray 800 p 6 rounded lg"> <div className="flex items center justify between"> <div> <p className="text gray 400">Balance</p> <p className="text 2xl font bold text white">${userStats.balance}</p> </div> <FaWallet className="text 4xl text green 500" /> </div> </div> <div className="bg gray 800 p 6 rounded lg"> <div className="flex items center justify between"> <div> <p className="text gray 400">Total Wins</p> <p className="text 2xl font bold text white">{userStats.totalWins}</p> </div> <FaChartLine className="text 4xl text blue 500" /> </div> </div> <div className="bg gray 800 p 6 rounded lg"> <div className="flex items center justify between"> <div> <p className="text gray 400">Games Played</p> <p className="text 2xl font bold text white">{userStats.gamesPlayed}</p> </div> <FaDice className="text 4xl text purple 500" /> </div> </div> <div className="bg gray 800 p 6 rounded lg"> <div className="flex items center justify between"> <div> <p className="text gray 400">Favorite Game</p> <p className="text 2xl font bold text white">{userStats.favoriteGame}</p> </div> <GiPokerHand className="text 4xl text red 500" /> </div> </div> </div> <div className="bg gray 800 p 6 rounded lg"> <h3 className="text xl font bold text white mb 4">Recent Activity</h3> <div className="space y 4"> {[1, 2, 3].map((item) => ( <div key={item} className="flex items center justify between border b border gray 700 pb 4"> <div className="flex items center space x 4"> <div className="w 10 h 10 bg gray 700 rounded full flex items center justify center"> <FaHistory className="text gray 400" /> </div> <div> <p className="text white">Played Poker Master</p> <p className="text gray 400">2 hours ago</p> </div> </div> <span className="text green 500 font bold">+$250</span> </div> ))} </div> </div> </div> ); const renderBettingInterface = () => ( <div className="p 6"> {selectedGame ? ( <div className="bg gray 800 rounded lg p 6"> <div className="flex flex col md:flex row gap 6"> <img src={`https://${selectedGame.image}`} alt={selectedGame.name} className="w full md:w 1/3 h 64 object cover rounded lg" onError={(e) => { e.target.src = "https://images.unsplash.com/photo 1605870445919 838d190e8e1b"; }} /> <div className="flex 1 space y 6"> <h2 className="text 2xl font bold text white">{selectedGame.name}</h2> <div className="space y 4"> <label className="block text gray 400">Bet Amount</label> <input type="range" min={selectedGame.minBet} max={selectedGame.maxBet} value={betAmount} onChange={(e) => setBetAmount(e.target.value)} className="w full" /> <div className="flex justify between text white"> <span>${selectedGame.minBet}</span> <span>${betAmount}</span> <span>${selectedGame.maxBet}</span> </div> <button onClick={handlePlaceBet} className="w full bg green 500 hover:bg green 600 text white font bold py 3 px 6 rounded lg transition colors duration 300" > Place Bet </button> </div> </div> </div> </div> ) : ( <div className="text center text gray 400"> <p>Select a game to place your bet</p> </div> )} </div> ); return ( <div className="min h screen bg gray 900 text white"> <header className="bg gray 800 border b border gray 700"> <div className="container mx auto px 4 py 4"> <div className="flex items center justify between"> <div className="flex items center space x 4"> <FaDice className="text 4xl text green 500" /> <h1 className="text 2xl font bold">Casino Royale</h1> </div> <div className="flex items center space x 4"> <span className="text green 500 font bold">${userStats.balance}</span> <FaUserCircle className="text 2xl" /> </div> </div> </div> </header> <div className="container mx auto px 4 py 8"> <div className="flex flex col md:flex row gap 8"> <aside className="w full md:w 64 space y 2"> <button onClick={() => setActiveTab("games")} className={`w full flex items center space x 2 px 4 py 3 rounded lg transition colors duration 300 ${activeTab === "games" ? "bg gray 800 text white" : "text gray 400 hover:bg gray 800"}`} > <FaDice /> <span>Games</span> </button> <button onClick={() => setActiveTab("dashboard")} className={`w full flex items center space x 2 px 4 py 3 rounded lg transition colors duration 300 ${activeTab === "dashboard" ? "bg gray 800 text white" : "text gray 400 hover:bg gray 800"}`} > <FaChartLine /> <span>Dashboard</span> </button> <button onClick={() => setActiveTab("betting")} className={`w full flex items center space x 2 px 4 py 3 rounded lg transition colors duration 300 ${activeTab === "betting" ? "bg gray 800 text white" : "text gray 400 hover:bg gray 800"}`} > <FaWallet /> <span>Betting</span> </button> </aside> <main className="flex 1 bg gray 800 rounded lg"> {activeTab === "games" && renderGames()} {activeTab === "dashboard" && renderDashboard()} {activeTab === "betting" && renderBettingInterface()} </main> </div> </div> {showNotification && ( <div className="fixed bottom 4 right 4 bg green 500 text white px 6 py 3 rounded lg shadow lg animate fade in up"> Bet placed successfully! </div> )} </div> ); }; export default CasinoTemplate;