@defikitdotnet/x-ai-combat/lib/esm/components/Dashboard.js

XCombatAI - Social Media Engagement Template for the Agent Framework

import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import StatisticsPanel from './StatisticsPanel';
import LeaderboardPanel from './LeaderboardPanel';
import PostPanel from './PostPanel';
import { useAuth } from '../contexts/AuthContext';
/**
 * Dashboard component displaying all content in a unified layout
 */
export const Dashboard = ({ agentId }) => {
    const { user } = useAuth();
    const [showExplanation, setShowExplanation] = useState(false);
    return (_jsxs("div", { className: "w-full px-4 py-6", children: [user ? (_jsx(_Fragment, { children: _jsxs("section", { id: "dashboard", className: "mb-8", children: [_jsxs("div", { className: "bg-blue-400 dark:bg-brand-600 text-text-dark rounded-lg shadow-lg p-6 mb-8", children: [_jsxs("h1", { className: "text-3xl font-bold mb-2", children: ["Welcome, @", user.username, "!"] }), _jsx("p", { className: "text-text-dark/80", children: "Track your engagement and climb the ranks of X-AI Combat." })] }), _jsxs("div", { className: "bg-background dark:bg-foreground shadow-md rounded-lg overflow-hidden mb-8", children: [_jsx("div", { className: "p-4 bg-brand-400 dark:bg-brand-500 text-text-dark", children: _jsx("h2", { className: "text-xl font-semibold", children: "Your Stats" }) }), _jsx("div", { className: "p-4", children: _jsx(StatisticsPanel, {}) })] })] }) })) : (_jsx("section", { className: "mb-8", children: _jsxs("div", { className: "bg-brand-500 dark:bg-brand-600 text-text-dark rounded-lg shadow-lg p-6 mb-8", children: [_jsx("h1", { className: "text-3xl font-bold mb-2", children: "X-AI Combat" }), _jsx("p", { className: "text-text-dark/80", children: "Tag our bot on X/Twitter and climb the leaderboard!" })] }) })), user ? (
            // Two-column layout for logged in users
            _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", children: [_jsx("section", { id: "posts", className: "flex flex-col h-full", children: _jsxs("div", { className: "bg-background dark:bg-foreground shadow-md rounded-lg overflow-hidden flex flex-col h-full", children: [_jsx("div", { className: "p-4 bg-brand-400 dark:bg-brand-500 text-text-dark flex items-center justify-between", children: _jsx("h2", { className: "text-xl font-semibold", children: "Your Tweets" }) }), _jsx("div", { className: "p-4 flex-grow overflow-auto", style: { minHeight: '500px', maxHeight: '500px' }, children: _jsx(PostPanel, {}) })] }) }), _jsx("section", { id: "leaderboard", className: "flex flex-col h-full", children: _jsxs("div", { className: "bg-background dark:bg-foreground shadow-md rounded-lg overflow-hidden flex flex-col h-full", children: [_jsxs("div", { className: "p-4 bg-brand-400 dark:bg-brand-500 text-text-dark flex items-center justify-between", children: [_jsx("h2", { className: "text-xl font-semibold", children: "Fame Leaderboard" }), _jsx("button", { onClick: () => setShowExplanation(!showExplanation), className: "bg-text-dark/20 hover:bg-text-dark/30 text-text-dark px-2 py-1 rounded-full text-xs transition duration-200", children: showExplanation ? 'Hide Scoring' : 'How Scoring Works' })] }), _jsx("div", { className: "p-4 flex-grow overflow-auto", style: { minHeight: '500px', maxHeight: '500px' }, children: _jsx(LeaderboardPanel, { limit: 10, showHeader: false, skipTopThree: false, agentId: agentId, initialShowExplanation: showExplanation }) })] }) })] })) : (
            // Single-column leaderboard for non-logged in users
            _jsx("section", { id: "leaderboard", className: "flex flex-col h-full max-w-3xl mx-auto", children: _jsxs("div", { className: "bg-background dark:bg-foreground shadow-md rounded-lg overflow-hidden flex flex-col h-full", children: [_jsxs("div", { className: "p-4 bg-brand-400 dark:bg-brand-500 text-text-dark flex items-center justify-between", children: [_jsx("h2", { className: "text-xl font-semibold", children: "Fame Leaderboard" }), _jsx("button", { onClick: () => setShowExplanation(!showExplanation), className: "bg-text-dark/20 hover:bg-text-dark/30 text-text-dark px-2 py-1 rounded-full text-xs transition duration-200", children: showExplanation ? 'Hide Scoring' : 'How Scoring Works' })] }), _jsxs("div", { className: "p-4 flex-grow overflow-auto", style: { minHeight: '600px', maxHeight: '600px' }, children: [_jsx("div", { className: "mb-4 bg-brand-50 p-4 rounded-lg border border-brand-100", children: _jsx("p", { className: "text-center text-brand-700 dark:text-brand-400", children: "Connect X to see your stats and tweets!" }) }), _jsx(LeaderboardPanel, { limit: 15, showHeader: false, skipTopThree: false, agentId: agentId, initialShowExplanation: showExplanation })] })] }) })), _jsx("div", { className: "text-center text-gray-400 dark:text-gray-500 text-xs mt-12 pt-4 border-t border-gray-200 dark:border-gray-700", children: _jsxs("p", { children: ["X-AI Combat \u2022 ", new Date().getFullYear()] }) })] }));
};
export default Dashboard;
//# sourceMappingURL=Dashboard.js.map