feat: Added Reports History component to Reports Page (#272)

Added reports history component to reports page.

components/molecules/ReportsHistory/reports-history.tsx

@@ -12,7 +12,7 @@ const ReportsHistory = ({ reportList }: ReportsHistoryProps): JSX.Element => {
   const heading = <Title level={5} className="!text-light-slate-9 uppercase">
     <div className="flex justify-between w-full gap-2">
       <div className="w-2/5 text-xs font-semibold text-slate-400 tracking-wide uppercase">
-        report date
+        report name
       </div>
       <div className="w-1/5 text-xs font-semibold text-slate-400 tracking-wide uppercase">
         issue date

components/organisms/Reports/reports.tsx

@@ -1,11 +1,29 @@
 import Title from "components/atoms/Typography/title";
+import ReportsHistory from "components/molecules/ReportsHistory/reports-history";
 import SelectReportsFilter from "components/molecules/SelectReportsFilter/select-reports-filter";
+import { Report } from "interfaces/report-type";
 
 const Reports = (): JSX.Element => {
+
+  const reportList: Report[] = [
+    {
+      reportName: "Top Ten",
+      reportDate: "Jun 3, 2022",
+      reportFormat: "CSV",
+      isGenerated: true
+    },
+    {
+      reportName: "Top Five",
+      reportDate: "Jun 3, 2022",
+      reportFormat: "CSV",
+      isGenerated: false
+    }
+  ];
+
   return (
     <section className="w-full py-4 px-8 flex justify-center">
       <div className="max-w-4xl">
-        <Title className="!font-medium relative !text-left " level={3}>
+        <Title className="!font-medium relative" level={3}>
           Contributions Insights
         </Title>
         <hr className="border-light-slate-6 my-4" />
@@ -16,11 +34,13 @@ const Reports = (): JSX.Element => {
             }}
           />
         </div>
-        <Title className="!font-medium relative mt-16 !text-left " level={3}>
+        <Title className="!font-medium relative mt-16" level={3}>
           Download History
         </Title>
         <hr className="border-light-slate-6 my-4" />
-        {/* Download History goes here */}
+        <div>
+          <ReportsHistory reportList={reportList}/>
+        </div>
       </div>
     </section>
   );

layouts/filter.tsx

@@ -23,7 +23,7 @@ const FilterLayout = ({children}: {children: React.ReactNode}) => {
           />
         </div>
 
-        <main className="flex w-full flex-1 flex-col items-center text-center px-3 md:px-16 py-8">
+        <main className="flex w-full flex-1 flex-col items-center px-3 md:px-16 py-8">
           {children}
         </main>
       </div>