From a864c76955e028b8afa148e54ea4612468fc5de8 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Mon, 19 Aug 2024 16:43:45 +0200
Subject: [PATCH] feat: add attack surface component

---
 components/charts/StatusChart.tsx           | 3 ++-
 components/charts/index.ts                  | 1 +
 components/overview/AttackSurface.tsx       | 2 +-
 components/services/ServiceCard.tsx         | 4 +---
 components/services/ServiceSkeletonGrid.tsx | 2 +-
 components/ui/action-card/ActionCard.tsx    | 4 +---
 6 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/charts/StatusChart.tsx b/components/charts/StatusChart.tsx
index 316820aa3d..d6b3a0ef7e 100644
--- a/components/charts/StatusChart.tsx
+++ b/components/charts/StatusChart.tsx
@@ -67,7 +67,7 @@ export function StatusChart() {
             dataKey="number"
             nameKey="findings"
             innerRadius={60}
-            strokeWidth={5}
+            strokeWidth={50}
           >
             <Label
               content={({ viewBox }) => {
@@ -76,6 +76,7 @@ export function StatusChart() {
                     <text
                       x={viewBox.cx}
                       y={viewBox.cy}
+                      radius={70}
                       textAnchor="middle"
                       dominantBaseline="middle"
                     >
diff --git a/components/charts/index.ts b/components/charts/index.ts
index 6883b502b9..b4d3debb45 100644
--- a/components/charts/index.ts
+++ b/components/charts/index.ts
@@ -1 +1,2 @@
+export * from "./SeverityChart";
 export * from "./StatusChart";
diff --git a/components/overview/AttackSurface.tsx b/components/overview/AttackSurface.tsx
index 13999abc65..ee14572872 100644
--- a/components/overview/AttackSurface.tsx
+++ b/components/overview/AttackSurface.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import ActionCard from "../ui/action-card/ActionCard";
+import { ActionCard } from "@/components/ui";
 
 const cardData = [
   {
diff --git a/components/services/ServiceCard.tsx b/components/services/ServiceCard.tsx
index ab1cd020dc..1dcc0a73fd 100644
--- a/components/services/ServiceCard.tsx
+++ b/components/services/ServiceCard.tsx
@@ -16,9 +16,7 @@ export const ServiceCard: React.FC<CardServiceProps> = ({
         <div className="flex space-x-4 items-center">
           {getAWSIcon(serviceAlias)}
           <div className="flex flex-col">
-            <h4 className="font-bold text-md 3xl:text-lg leading-5">
-              {serviceAlias}
-            </h4>
+            <h4 className="font-bold text-md leading-5">{serviceAlias}</h4>
             <small className="text-default-500">
               {fidingsFailed > 0
                 ? `${fidingsFailed} Failed Findings`
diff --git a/components/services/ServiceSkeletonGrid.tsx b/components/services/ServiceSkeletonGrid.tsx
index 9ea35c1385..7caeaf11d7 100644
--- a/components/services/ServiceSkeletonGrid.tsx
+++ b/components/services/ServiceSkeletonGrid.tsx
@@ -4,7 +4,7 @@ import React from "react";
 export const ServiceSkeletonGrid = () => {
   return (
     <Card className="w-full h-fit p-4">
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         {[...Array(25)].map((_, index) => (
           <div key={index} className="flex flex-col space-y-4">
             <Skeleton className="h-16 rounded-lg">
diff --git a/components/ui/action-card/ActionCard.tsx b/components/ui/action-card/ActionCard.tsx
index e4c0234ffd..a874c0dee8 100644
--- a/components/ui/action-card/ActionCard.tsx
+++ b/components/ui/action-card/ActionCard.tsx
@@ -14,7 +14,7 @@ export type ActionCardProps = CardProps & {
   description: string;
 };
 
-const ActionCard = React.forwardRef<HTMLDivElement, ActionCardProps>(
+export const ActionCard = React.forwardRef<HTMLDivElement, ActionCardProps>(
   ({ color, title, icon, description, children, className, ...props }, ref) => {
     const colors = React.useMemo(() => {
       switch (color) {
@@ -82,5 +82,3 @@ const ActionCard = React.forwardRef<HTMLDivElement, ActionCardProps>(
 );
 
 ActionCard.displayName = "ActionCard";
-
-export default ActionCard;