feat(#67): add summary component

dashboard/src/components/Cards/BaseCard.tsx

@@ -13,8 +13,10 @@ const containerClassName =
 const BaseCard = ({ title, content, className }: IBaseCard): JSX.Element => {
   return (
     <div className={classNames(className, containerClassName)}>
-      <div className="flex flex-col w-full h-full p-4 gap-2">
-        <span className="font-bold border-b border-darkGray pb-2">{title}</span>
+      <div className="flex flex-col w-full h-full pt-4 gap-2">
+        <span className="font-bold border-b border-darkGray pb-2 pl-3">
+          {title}
+        </span>
         {content}
       </div>
     </div>

dashboard/src/components/Summary/Summary.tsx

@@ -0,0 +1,74 @@
+import BaseCard from '../Cards/BaseCard';
+import BaseTable from '../Table/BaseTable';
+import { TableBody, TableCell, TableRow } from '../ui/table';
+import ListingComponentItem, {
+  IListingComponentItem,
+} from '../ListingComponentItem/ListingComponentItem';
+
+export interface ISummary {
+  title: string;
+  summaryHeaders: string[];
+  summaryBody: ISummaryItem[];
+}
+
+export interface ISummaryItem {
+  arch: IListingComponentItem;
+  compilers: string[];
+}
+
+const Summary = ({
+  title,
+  summaryHeaders,
+  summaryBody,
+}: ISummary): JSX.Element => {
+  return (
+    <BaseCard
+      title={title}
+      className="w-fit bg-mediumGray"
+      content={
+        <BaseTable
+          className="!rounded-[0rem] bg-mediumGray"
+          headers={summaryHeaders.map(header => (
+            <span key={header}>{header}</span>
+          ))}
+          body={
+            <TableBody>
+              {summaryBody.map(row => (
+                <SummaryItem
+                  key={row.arch.text}
+                  arch={row.arch}
+                  compilers={row.compilers}
+                />
+              ))}
+            </TableBody>
+          }
+        />
+      }
+    />
+  );
+};
+
+const SummaryItem = ({ arch, compilers }: ISummaryItem): JSX.Element => {
+  return (
+    <TableRow>
+      <TableCell>
+        <ListingComponentItem
+          errors={arch.errors}
+          warnings={arch.warnings}
+          text={arch.text}
+        />
+      </TableCell>
+      <TableCell>
+        <div className="flex flex-col gap-1">
+          {compilers.map(compiler => (
+            <span key={compiler} className="line-clamp-1">
+              {compiler}
+            </span>
+          ))}
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+};
+
+export default Summary;