bs-p2/app/components/DirectoryDashboard.tsx

import React from "react";
import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd';

const App: React.FC = () => {
  return (
    <>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">

        <div className="bg-card p-4 rounded-lg shadow">
          <div className="h-48 bg-muted my-2 rounded relative bg-slate-300">

          </div>
          <h2 className="text-lg font-semibold">Life History of Dr. Maria Montessori</h2>
          <p>Chapter 1 • Graduate Program</p>

        </div>
        <div className="bg-card p-4 rounded-lg shadow">
          <div className="h-48 bg-muted my-2 rounded relative bg-slate-300" >

          </div>
          <h2 className="text-lg font-semibold">Introduction to Montessori Methods</h2>
          <p>Chapter 2 • Graduate Program</p>

        </div>
        <div className="bg-card p-4 rounded-lg shadow">
          <div className="h-48 bg-muted my-2 rounded relative bg-slate-300">

          </div>
          <h2 className="text-lg font-semibold">Exercises on Practical Life</h2>
          <p>Chapter 3 • Graduate Program</p>

        </div>
      </div>


      {/* <div className="p-4 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-card p-4 h-48 bg-gray-200	rounded-lg shadow-md border border-zinc-300 dark:bg-card-foreground">
          <div className="flex justify-between items-center border-b-2 border-zinc-300  pb-3 mb-4">
            <h2 className="text-lg font-semibold text-foreground dark:text-card-foreground">Attendance</h2>
            <button className="text-primary dark:text-primary-foreground hover:text-primary/80">
              <span>&gt;</span>
            </button>
          </div>
          <div className="mt-4 text-center">
            <p className="text-muted-foreground dark:text-muted-foreground">Graph</p>
          </div>
        </div> */}


      {/* <div className="bg-card p-4 h-48 bg-gray-200 rounded-lg shadow-md border border-zinc-300 dark:bg-card-foreground">

          <div className="flex justify-between items-center border-b-2 border-zinc-300  pb-3">
            <h2 className="text-lg font-semibold text-foreground dark:text-card-foreground">Upcoming Classes</h2>
            <button className="text-primary dark:text-primary-foreground hover:text-primary/80">
              <span>&gt;</span>
            </button>
          </div>
          <div className=" ">
            <div className="border-b-2 border-zinc-300 pb-12">
            </div>
            <div className="border-b-2 border-zinc-300 pb-12">
            </div>
          </div>
        </div>
       
        <div className="bg-card p-4 rounded-lg shadow col-span-2">
          <h2 className="text-lg font-semibold">Accomplishments/Qualifications</h2>
          <div className="grid grid-cols-3 gap-4 mt-2">
            <div className="h-24 w-24 bg-muted rounded-lg bg-slate-300"></div>
            <div className="h-24 w-24 bg-muted rounded-lg bg-slate-300"></div>
            <div className="h-24 w-24 bg-muted rounded-lg bg-slate-300"></div>
            <div className="h-24 w-24 bg-muted rounded-lg bg-slate-300"></div>
            <div className="h-24 w-24 bg-muted rounded-lg bg-slate-300"></div>
          </div>
        </div>



      </div> */}

      <div className="grid grid-cols-3 gap-4">
        <div className="bg-card p-4 h-52  bg-gray-200	rounded-lg shadow-md border border-zinc-300 dark:bg-card-foreground">
          <div className="flex justify-between items-center border-b-2 border-zinc-300  pb-3 mb-4">
            <h2 className="text-lg font-semibold text-foreground dark:text-card-foreground">Attendance</h2>
            <button className="text-primary dark:text-primary-foreground hover:text-primary/80">
              <span>&gt;</span>
            </button>
          </div>
          <div className="mt-4 text-center">
            <p className="text-muted-foreground dark:text-muted-foreground">Graph</p>
          </div>
        </div>
        <div className="bg-card p-4 h-52 bg-gray-200 rounded-lg shadow-md border border-zinc-300 dark:bg-card-foreground">

          <div className="flex justify-between items-center border-b-2 border-zinc-300  pb-3">
            <h2 className="text-lg font-semibold text-foreground dark:text-card-foreground">Upcoming Classes</h2>
            <button className="text-primary dark:text-primary-foreground hover:text-primary/80">
              <span>&gt;</span>
            </button>
          </div>
          <div className=" ">
            <div className="border-b-2 border-zinc-300 pb-12">
            </div>
            <div className="border-b-2 border-zinc-300 pb-12">
            </div>
          </div>
        </div>
        {/* <div className=" row-span-3 bg-card p-4 h-96 bg-gray-200 rounded-lg shadow-md border border-zinc-300 dark:bg-card-foreground">

          <div className="flex justify-between items-center border-b-2 border-zinc-300  pb-3">
            <h2 className="text-lg font-semibold text-foreground dark:text-card-foreground">Upcoming Classes</h2>
            <button className="text-primary dark:text-primary-foreground hover:text-primary/80">
              <span>&gt;</span>
            </button>
          </div>
          <div className=" ">
            <div className="border-b-2 border-zinc-300 pb-12">
            </div>
            <div className="border-b-2 border-zinc-300 pb-12">
            </div>
          </div>
        </div> */}
        <div className="max-w-md bg-card p-4 rounded-lg shadow-md row-span-3 bg-gray-200">
          <h2 className="text-lg font-semibold text-foreground">Upcoming Tests</h2>
          <div className="grid grid-rows-5 gap-4 mt-4">
            <div className="bg-muted h-24 rounded-lg bg-slate-300"></div>
            <div className="bg-muted h-24 rounded-lg bg-slate-300"></div>
            <div className="bg-muted h-24 rounded-lg bg-slate-300"></div>
            <div className="bg-muted h-24 rounded-lg bg-slate-300"></div>
            <div className="bg-muted h-24 rounded-lg bg-slate-300"></div>
          </div>
        </div>


        <div className="p-4 bg-card rounded-lg shadow-md col-span-2 border-b-2 border-zinc-300">
          <h2 className="text-lg font-semibold text-foreground">Accomplishments/Qualifications</h2>
          <div className="grid grid-cols-5 gap-4 mt-4">
            <div className="bg-muted h-16 rounded-lg bg-slate-300"></div>
            <div className="bg-muted h-16 rounded-lg bg-slate-300"></div>
            <div className="bg-muted h-16 rounded-lg bg-slate-300"></div>
            <div className="bg-muted h-16 rounded-lg bg-slate-300"></div>
            <div className="bg-muted h-16 rounded-lg bg-slate-300"></div>
          </div>
        </div>
      </div>
    </>
  )
}
export default App;