feat(#77): add cards tree details page ui

dashboard/src/components/Cards/BaseCard.tsx

@@ -8,7 +8,7 @@ interface IBaseCard {
 }
 
 const containerClassName =
-  'flex flex-col rounded-xl bg-white w-1/2 h-fit border border-darkGray text-black';
+  'flex flex-col rounded-xl bg-white w-full h-fit border border-darkGray text-black';
 
 const BaseCard = ({ title, content, className }: IBaseCard): JSX.Element => {
   return (

dashboard/src/components/Cards/ListingComponentCard/ListingComponentCard.tsx

@@ -4,42 +4,29 @@ import ListingComponentItem, {
   IListingComponentItem,
 } from '@/components/ListingComponentItem/ListingComponentItem';
 
-import BaseCard from '../BaseCard';
-
 export interface IListingComponent {
   items: IListingComponentItem[];
   title: string;
+  type: 'listing';
 }
 
 interface IListedComponent {
   items: IListingComponentItem[];
 }
 
-const ListedContent = ({ items }: IListedComponent): JSX.Element => {
+const ListingComponentContent = ({ items }: IListedComponent): JSX.Element => {
   const content = useMemo(() => {
     return items.map(item => (
       <ListingComponentItem
         key={item.text}
         warnings={item.warnings}
         errors={item.errors}
+        success={item.success}
         text={item.text}
       />
     ));
   }, [items]);
-  return <div className="flex flex-col gap-2 pt-2">{content}</div>;
-};
-
-const ListingComponentCard = ({
-  title,
-  items,
-}: IListingComponent): JSX.Element => {
-  return (
-    <BaseCard
-      className="!w-[400px]"
-      title={title}
-      content={<ListedContent items={items} />}
-    />
-  );
+  return <div className="flex flex-col gap-2 p-4">{content}</div>;
 };
 
-export default ListingComponentCard;
+export default ListingComponentContent;

dashboard/src/components/GroupCards/GroupListingComponentCard.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+
+import ListingComponentContent, {
+  IListingComponent,
+} from '../Cards/ListingComponentCard/ListingComponentCard';
+import Summary, { ISummary } from '../Summary/Summary';
+import BaseCard from '../Cards/BaseCard';
+
+interface IListingComponentCardsGroup {
+  cards: (IListingComponent | ISummary)[];
+}
+
+interface ICardContent {
+  card: IListingComponent | ISummary;
+}
+
+const ListingComponentCardsGroup = ({
+  cards,
+}: IListingComponentCardsGroup): JSX.Element => {
+  const cardsList = useMemo(() => {
+    return cards.map(card => (
+      <BaseCard
+        key={card.title}
+        title={card.title}
+        content={<CardContent card={card} />}
+      />
+    ));
+  }, [cards]);
+  return <div className="grid grid-cols-2 gap-8">{cardsList}</div>;
+};
+
+const CardContent = ({ card }: ICardContent): JSX.Element => {
+  if (card.type === 'listing' && card.items) {
+    return <ListingComponentContent key={card.title} items={card.items} />;
+  } else if (card.type === 'summary' && card.summaryBody) {
+    return (
+      <Summary
+        key=""
+        summaryHeaders={card?.summaryHeaders}
+        summaryBody={card?.summaryBody}
+      />
+    );
+  } else {
+    return <></>;
+  }
+};
+
+export default ListingComponentCardsGroup;

dashboard/src/components/ListingComponentItem/ListingComponentItem.tsx

@@ -5,6 +5,7 @@ import ColoredCircle from '../ColoredCircle/ColoredCircle';
 export interface IListingComponentItem {
   warnings?: number;
   errors?: number;
+  success?: number;
   text?: string;
   hasBottomBorder?: boolean;
 }
@@ -19,6 +20,7 @@ const ListingComponentItem = ({
   warnings,
   errors,
   text,
+  success,
   hasBottomBorder,
 }: IListingComponentItem): JSX.Element => {
   const hasBorder = hasBottomBorder ? 'border-b' : '';
@@ -36,10 +38,18 @@ const ListingComponentItem = ({
       <></>
     );
 
+  const itemSuccess =
+    success && success > 0 ? (
+      <ColoredCircle quantity={success} type={ComponentType.Success} />
+    ) : (
+      <></>
+    );
+
   return (
     <div className={classNames('flex flex-row gap-2 pb-1', hasBorder)}>
       {itemError}
       {itemWarning}
+      {itemSuccess}
       <span className="text-black text-sm">{text}</span>
     </div>
   );

dashboard/src/components/Summary/Summary.tsx

@@ -1,14 +1,17 @@
 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 {
+export interface ISummary extends ISummaryTable {
   title: string;
+  type: 'summary';
+}
+
+export interface ISummaryTable {
   summaryHeaders: string[];
   summaryBody: ISummaryItem[];
 }
@@ -19,10 +22,9 @@ export interface ISummaryItem {
 }
 
 const Summary = ({
-  title,
   summaryHeaders,
   summaryBody,
-}: ISummary): JSX.Element => {
+}: ISummaryTable): JSX.Element => {
   const summaryHeadersRow = useMemo(
     () => summaryHeaders.map(header => <span key={header}>{header}</span>),
     [summaryHeaders],
@@ -41,16 +43,10 @@ const Summary = ({
   );
 
   return (
-    <BaseCard
-      title={title}
-      className="w-fit bg-mediumGray"
-      content={
-        <BaseTable
-          className="!rounded-[0rem] bg-mediumGray"
-          headers={summaryHeadersRow}
-          body={<TableBody>{summaryBodyRows}</TableBody>}
-        />
-      }
+    <BaseTable
+      className="!rounded-[0rem] bg-mediumGray"
+      headers={summaryHeadersRow}
+      body={<TableBody>{summaryBodyRows}</TableBody>}
     />
   );
 };
@@ -72,6 +68,7 @@ const SummaryItem = ({ arch, compilers }: ISummaryItem): JSX.Element => {
           errors={arch.errors}
           warnings={arch.warnings}
           text={arch.text}
+          success={arch.success}
         />
       </TableCell>
       <TableCell>