import React from "react"; import { FaChartLine, FaUsers, FaRocket, FaBell, FaCalendar, FaTasks, FaCode, FaClock } from "react-icons/fa"; // Configuration object for customizable content const config = { analyticsOverview: { title: "Analytics Overview", subtitle: "Monthly Performance", icon: FaChartLine, bgColor: "#FFE4E4", }, teamActivity: { title: "Team Activity", subtitle: "Recent Updates", icon: FaUsers, bgColor: "#96CFFF", activities: [ { user: "Sarah K.", action: "Deployed new feature", time: "2h ago", icon: FaRocket, color: "bg-[#FFE4E4]" }, { user: "Mike R.", action: "Updated dashboard", time: "4h ago", icon: FaCode, color: "bg-[#96CFFF]" }, { user: "Anna M.", action: "Fixed critical bug", time: "5h ago", icon: FaBell, color: "bg-emerald-400" }, { user: "Tom P.", action: "Added analytics", time: "8h ago", icon: FaChartLine, color: "bg-[#FFE899]" }, ], }, quickActions: { title: "Quick Actions", subtitle: "Common Tasks", icon: FaTasks, bgColor: "bg-emerald-400", actions: [ { label: "New Task", icon: FaTasks, color: "bg-[#FFE4E4]" }, { label: "Schedule", icon: FaCalendar, color: "bg-[#96CFFF]" }, { label: "Meetings", icon: FaUsers, color: "bg-emerald-400" }, { label: "Timeline", icon: FaClock, color: "bg-[#FFE899]" }, ], }, updates: { title: "Updates", subtitle: "System Status", icon: FaBell, bgColor: "#FFE899", updates: [ { text: "System update completed", type: "success" }, { text: "Backup in progress...", type: "warning" }, { text: "3 new notifications", type: "info" }, ], }, stats: [ { title: 'Revenue', value: '39,500', percent: '20', fill: '76', trend: 'up' }, { title: 'Sales', value: '56,200', percent: '15', fill: '65', trend: 'up' }, { title: 'Orders', value: '12,750', percent: '8', fill: '45', trend: 'down' }, ], }; // Main component export default function NeubrutalismBento() { return (

{/* Analytics Overview Card */}

{config.analyticsOverview.title}

{config.analyticsOverview.subtitle}

{config.stats.map((stat, index) => (

{stat.title}

{stat.percent}%

{stat.value}

))}

Chart Goes Here

{/* Team Activity */}

{config.teamActivity.title}

{config.teamActivity.subtitle}

{config.teamActivity.activities.map((activity, index) => (

{activity.user}

{activity.action}

{activity.time}

))}

{/* Quick Actions */}

{config.quickActions.title}

{config.quickActions.subtitle}

{config.quickActions.actions.map((action, index) => ( ))}

{/* Recent Updates */}

{config.updates.title}

{config.updates.subtitle}

{config.updates.updates.map((update, index) => (

{update.text}

))}

); }

Analytics Components

Neubrutalism Admin Bento