Project 30: Admin Dashboard

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { Component, Suspense, lazy, memo } from "react";

function Sidebar() {
  return (
    <nav>
      <a href="/admin">Dashboard</a>
      <a href="/admin/users">Users</a>
    </nav>
  );
}

const MetricCard = memo(function MetricCard({ label, value }) {
  return (
    <div className="metric-card">
      <h3>{label}</h3>
      <p>{value}</p>
    </div>
  );
});

class DashboardErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) return <p>Something went wrong.</p>;
    return this.props.children;
  }
}

const RecentOrders = lazy(() => import("./RecentOrders"));

export default function AdminDashboard() {
  return (
    <div className="admin-shell">
      <Sidebar />
      <main>
        <div className="metrics-grid">
          <MetricCard label="Total Users" value="4,210" />
          <MetricCard label="Revenue" value="$52,600" />
        </div>
        <DashboardErrorBoundary>
          <Suspense fallback={<p>Loading orders...</p>}>
            <RecentOrders />
          </Suspense>
        </DashboardErrorBoundary>
      </main>
    </div>
  );
}