feat(#67): add summary component

dashboard/src/components/Cards/BaseCard.tsx

@@ -12,9 +12,11 @@ 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={classNames(containerClassName, className)}>
+      <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,84 @@
+import { useMemo } from 'react';
+
+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 => {
+  const summaryHeadersRow = useMemo(
+    () => summaryHeaders.map(header => <span key={header}>{header}</span>),
+    [summaryHeaders],
+  );
+
+  const summaryBodyRows = useMemo(
+    () =>
+      summaryBody.map(row => (
+        <SummaryItem
+          key={row.arch.text}
+          arch={row.arch}
+          compilers={row.compilers}
+        />
+      )),
+    [summaryBody],
+  );
+
+  return (
+    <BaseCard
+      title={title}
+      className="w-fit bg-mediumGray"
+      content={
+        <BaseTable
+          className="!rounded-[0rem] bg-mediumGray"
+          headers={summaryHeadersRow}
+          body={<TableBody>{summaryBodyRows}</TableBody>}
+        />
+      }
+    />
+  );
+};
+
+const SummaryItem = ({ arch, compilers }: ISummaryItem): JSX.Element => {
+  const compilersElement = useMemo(
+    () =>
+      compilers.map(compiler => (
+        <span key={compiler} className="line-clamp-1">
+          {compiler}
+        </span>
+      )),
+    [compilers],
+  );
+  return (
+    <TableRow>
+      <TableCell>
+        <ListingComponentItem
+          errors={arch.errors}
+          warnings={arch.warnings}
+          text={arch.text}
+        />
+      </TableCell>
+      <TableCell>
+        <div className="flex flex-col gap-1">{compilersElement}</div>
+      </TableCell>
+    </TableRow>
+  );
+};
+
+export default Summary;