Merge pull request #1804 from acm-ucr/nidheesh-m-vakharia/AddSubheading

Add Subheadings

src/components/admin/Subtitle.tsx

@@ -0,0 +1,16 @@
+interface props {
+  title: string;
+}
+
+const Subtitle = ({ title }: props) => {
+  return (
+    <div
+      data-cy={`${title}-title`}
+      className="hidden pl-5 text-xl font-bold lg:block"
+    >
+      {title}
+    </div>
+  );
+};
+
+export default Subtitle;

src/components/admin/services/statistics/Statistics.jsx

@@ -1,5 +1,6 @@
 "use client";
 import Title from "@/components/admin/Title";
+import Subtitle from "@/components/admin/Subtitle";
 import { useEffect, useState } from "react";
 import Tabs from "./Tabs";
 import Loading from "@/components/Loading";
@@ -22,8 +23,10 @@ const Statistics = () => {
       {!counts ? (
         <Loading />
       ) : (
-        <div>
+        <div className="mt-4">
+          <Subtitle title="Registrations" />
           <Tabs events={counts.events} />
+          <Subtitle title="Attendance" />
           <Charts counts={counts.users} />
         </div>
       )}

src/components/admin/services/statistics/Tabs.jsx

@@ -3,7 +3,7 @@ import Tab from "./Tab";
 const Tabs = ({ events }) => {
   return (
     <>
-      <div className="mt-3 grid w-full grid-cols-1 gap-4 p-4 md:grid-cols-4">
+      <div className="mb-3 grid w-full grid-cols-1 gap-4 p-4 md:grid-cols-4">
         {Object.entries(events).map(([title, count], index) => (
           <Tab key={index} title={title} value={count} />
         ))}