feat: add attack surface component

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"
                     >

components/charts/index.ts

@@ -1 +1,2 @@
+export * from "./SeverityChart";
 export * from "./StatusChart";

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 = [
   {

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`

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">

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;