Function Dashboard

client/src/component/Dashboard.jsx:7–179

({ mode })

import PropTypes from "prop-types";

const Dashboard = ({ mode }) => {
  const isDarkMode = mode === 'dark';
  const blogs = [
    { id: 1, title: 'Understanding React', author: 'John Doe', category: 'Web Development' },
    { id: 2, title: 'CSS Tips and Tricks', author: 'Jane Smith', category: 'Design' },
    { id: 3, title: 'JavaScript Basics', author: 'Alice Johnson', category: 'Programming' },
  ];

  const handleDelete = (id) => {
    console.log(`Blog with id ${id} deleted`);
  };

  return (
    <div
      className={`container mt-20 mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4 ${
        isDarkMode ? 'bg-gray-900 text-gray-100' : 'bg-white text-gray-800'
      }`}
    >
      {/* Header */}
      <header className="col-span-full">
        <h1 className="text-[72px] font-bold mb-4">Dashboard</h1>
      </header>

      {/* Insights */}
      <section className="col-span-full grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <div
          className={`shadow-md rounded-lg p-6 transition-shadow duration-300 hover:shadow-lg ${
            isDarkMode ? 'bg-gray-800 text-white' : 'bg-white text-gray-800'
          }`}
        >
          <div className="flex items-center justify-between">
            <span className="material-symbols-sharp text-4xl bg-coral text-white p-2 rounded-full">
              <PiEyesDuotone />
            </span>
            <div className="text-right">
              <h3 className="text-lg font-medium">Total Views</h3>
              <h1 className="text-2xl font-bold">100</h1>
            </div>
          </div>
          <div className="mt-4 relative">
            <div className="progress-circle relative w-16 h-16">
              <svg className="absolute inset-0" viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="30" className="text-gray-200" strokeWidth="5" />
                <circle
                  cx="50"
                  cy="50"
                  r="30"
                  className="text-blue-500"
                  strokeWidth="5"
                  strokeDasharray="150"
                  strokeDashoffset="calc(150 - (150 * 0.8))"
                />
              </svg>
              <div className="absolute inset-0 flex items-center justify-center text-gray-800 text-sm">
                80%
              </div>
            </div>
          </div>