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

XCombatAI - Social Media Engagement Template for the Agent Framework

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dashboard = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const StatisticsPanel_1 = __importDefault(require("./StatisticsPanel"));
const LeaderboardPanel_1 = __importDefault(require("./LeaderboardPanel"));
const PostPanel_1 = __importDefault(require("./PostPanel"));
const AuthContext_1 = require("../contexts/AuthContext");
/**
 * Dashboard component displaying all content in a unified layout
 */
const Dashboard = ({ agentId }) => {
    const { user } = (0, AuthContext_1.useAuth)();
    const [showExplanation, setShowExplanation] = (0, react_1.useState)(false);
    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full px-4 py-6", children: [user ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("section", { id: "dashboard", className: "mb-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-blue-400 dark:bg-brand-600 text-text-dark rounded-lg shadow-lg p-6 mb-8", children: [(0, jsx_runtime_1.jsxs)("h1", { className: "text-3xl font-bold mb-2", children: ["Welcome, @", user.username, "!"] }), (0, jsx_runtime_1.jsx)("p", { className: "text-text-dark/80", children: "Track your engagement and climb the ranks of X-AI Combat." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-background dark:bg-foreground shadow-md rounded-lg overflow-hidden mb-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-4 bg-brand-400 dark:bg-brand-500 text-text-dark", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold", children: "Your Stats" }) }), (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(StatisticsPanel_1.default, {}) })] })] }) })) : ((0, jsx_runtime_1.jsx)("section", { className: "mb-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-brand-500 dark:bg-brand-600 text-text-dark rounded-lg shadow-lg p-6 mb-8", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-3xl font-bold mb-2", children: "X-AI Combat" }), (0, jsx_runtime_1.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
            (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", children: [(0, jsx_runtime_1.jsx)("section", { id: "posts", className: "flex flex-col h-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-background dark:bg-foreground shadow-md rounded-lg overflow-hidden flex flex-col h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-4 bg-brand-400 dark:bg-brand-500 text-text-dark flex items-center justify-between", children: (0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold", children: "Your Tweets" }) }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 flex-grow overflow-auto", style: { minHeight: '500px', maxHeight: '500px' }, children: (0, jsx_runtime_1.jsx)(PostPanel_1.default, {}) })] }) }), (0, jsx_runtime_1.jsx)("section", { id: "leaderboard", className: "flex flex-col h-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-background dark:bg-foreground shadow-md rounded-lg overflow-hidden flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-brand-400 dark:bg-brand-500 text-text-dark flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold", children: "Fame Leaderboard" }), (0, jsx_runtime_1.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' })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-4 flex-grow overflow-auto", style: { minHeight: '500px', maxHeight: '500px' }, children: (0, jsx_runtime_1.jsx)(LeaderboardPanel_1.default, { limit: 10, showHeader: false, skipTopThree: false, agentId: agentId, initialShowExplanation: showExplanation }) })] }) })] })) : (
            // Single-column leaderboard for non-logged in users
            (0, jsx_runtime_1.jsx)("section", { id: "leaderboard", className: "flex flex-col h-full max-w-3xl mx-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-background dark:bg-foreground shadow-md rounded-lg overflow-hidden flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-4 bg-brand-400 dark:bg-brand-500 text-text-dark flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold", children: "Fame Leaderboard" }), (0, jsx_runtime_1.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' })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 flex-grow overflow-auto", style: { minHeight: '600px', maxHeight: '600px' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 bg-brand-50 p-4 rounded-lg border border-brand-100", children: (0, jsx_runtime_1.jsx)("p", { className: "text-center text-brand-700 dark:text-brand-400", children: "Connect X to see your stats and tweets!" }) }), (0, jsx_runtime_1.jsx)(LeaderboardPanel_1.default, { limit: 15, showHeader: false, skipTopThree: false, agentId: agentId, initialShowExplanation: showExplanation })] })] }) })), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("p", { children: ["X-AI Combat \u2022 ", new Date().getFullYear()] }) })] }));
};
exports.Dashboard = Dashboard;
exports.default = exports.Dashboard;
//# sourceMappingURL=Dashboard.js.map