feat: account component is ready to use it (#16)

2026-07-23 12:31:54 +00:00 · 2024-07-24 16:08:15 +02:00
parent b2d3f492ec
commit dd2c92d805
9 changed files with 302 additions and 5 deletions
@@ -201,3 +201,72 @@ export const VerticalDotsIcon: React.FC<IconSvgProps> = ({
    </g>
  </svg>
 );
+export const WifiIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 48 48"
+    width={size || width}
+    {...props}
+  >
+    <g fill="none">
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="4"
+        d="M4 18.965a29.355 29.355 0 0 1 1.817-1.586C17.037 8.374 33.382 8.903 44 18.965"
+      />
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="4"
+        d="M38 25.799c-7.732-7.732-20.268-7.732-28 0m22 6.515c-4.418-4.419-11.582-4.419-16 0"
+      />
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M24 40a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5"
+        clipRule="evenodd"
+      />
+    </g>
+  </svg>
+);
+
+export const WifiOffIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    {...props}
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M17.85 11.544a8 8 0 0 0-2.88-1.972m5.806-.756a12 12 0 0 0-9.488-3.795m-2.945 9.57a5 5 0 0 1 4.902-1.434m-7.096-1.613A8 8 0 0 1 9.623 9.36m-6.4-.545a12 12 0 0 1 3.11-2.393M4.413 4l14.142 14.142M12 19a1 1 0 1 1 0-2a1 1 0 0 1 0 2"
+    />
+  </svg>
+);
@@ -1,2 +1,5 @@
 export * from "./Icons";
+export * from "./providers/AwsProvider";
+export * from "./providers/AzureProvider";
+export * from "./providers/GoogleCloudProvider";
 export * from "./prowler/ProwlerIcons";
@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import { IconSvgProps } from "@/types";
+
+export const AwsProvider: React.FC<IconSvgProps> = ({
+  size,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 256 256"
+    width={size || width}
+    {...props}
+  >
+    <g fill="none">
+      <rect width="256" height="256" fill="#f4f2ed" rx="60" />
+      <path
+        fill="#252f3e"
+        d="M84.745 111.961c0 2.434.263 4.407.723 5.855a35 35 0 0 0 2.106 4.737c.329.526.46 1.052.46 1.513c0 .658-.395 1.316-1.25 1.973l-4.145 2.764c-.592.394-1.184.592-1.71.592c-.658 0-1.316-.329-1.974-.921a20.4 20.4 0 0 1-2.368-3.092a51 51 0 0 1-2.04-3.882q-7.697 9.08-19.342 9.079c-5.526 0-9.934-1.579-13.158-4.737c-3.223-3.158-4.868-7.368-4.868-12.631c0-5.593 1.974-10.132 5.987-13.553s9.342-5.132 16.118-5.132c2.237 0 4.54.198 6.974.527s4.934.855 7.566 1.447v-4.803c0-5-1.053-8.487-3.092-10.526c-2.106-2.04-5.658-3.026-10.724-3.026c-2.303 0-4.671.263-7.105.855s-4.803 1.316-7.106 2.237a19 19 0 0 1-2.302.855c-.46.132-.79.198-1.053.198c-.92 0-1.382-.658-1.382-2.04v-3.224c0-1.052.132-1.842.461-2.302s.921-.921 1.842-1.382q3.454-1.776 8.29-2.96c3.223-.856 6.644-1.25 10.263-1.25c7.829 0 13.552 1.776 17.237 5.328c3.618 3.553 5.46 8.948 5.46 16.185v21.316zm-26.71 10c2.17 0 4.407-.395 6.776-1.185c2.368-.789 4.473-2.237 6.25-4.21c1.052-1.25 1.842-2.632 2.236-4.211s.658-3.487.658-5.723v-2.764a55 55 0 0 0-6.052-1.118a50 50 0 0 0-6.185-.395c-4.408 0-7.631.856-9.802 2.632s-3.224 4.276-3.224 7.566c0 3.092.79 5.394 2.434 6.973c1.58 1.645 3.882 2.435 6.908 2.435m52.828 7.105c-1.184 0-1.974-.198-2.5-.658c-.526-.395-.987-1.316-1.381-2.566l-15.46-50.855c-.396-1.316-.593-2.171-.593-2.632c0-1.052.526-1.645 1.579-1.645h6.447c1.25 0 2.106.198 2.566.658c.526.395.921 1.316 1.316 2.566l11.052 43.553l10.264-43.553c.329-1.316.723-2.17 1.25-2.566c.526-.394 1.447-.657 2.631-.657h5.263c1.25 0 2.106.197 2.632.657c.526.395.987 1.316 1.25 2.566l10.395 44.079l11.381-44.079c.395-1.316.856-2.17 1.316-2.566c.526-.394 1.382-.657 2.566-.657h6.118c1.053 0 1.645.526 1.645 1.644c0 .33-.066.658-.132 1.053c-.065.395-.197.92-.46 1.645l-15.855 50.855q-.593 1.974-1.382 2.566c-.526.394-1.382.658-2.5.658h-5.658c-1.25 0-2.105-.198-2.631-.658c-.527-.461-.987-1.316-1.25-2.632l-10.198-42.434l-10.131 42.368c-.329 1.316-.724 2.171-1.25 2.632c-.527.46-1.448.658-2.632.658zm84.54 1.776c-3.421 0-6.842-.395-10.132-1.184c-3.289-.79-5.855-1.645-7.566-2.632c-1.052-.592-1.776-1.25-2.039-1.842a4.65 4.65 0 0 1-.395-1.842v-3.355c0-1.382.526-2.04 1.513-2.04q.593 0 1.184.198c.395.131.987.394 1.645.658a35.8 35.8 0 0 0 7.237 2.302a39.5 39.5 0 0 0 7.829.79c4.145 0 7.368-.724 9.605-2.171c2.237-1.448 3.421-3.553 3.421-6.25c0-1.842-.592-3.356-1.776-4.606s-3.421-2.368-6.645-3.421l-9.539-2.96c-4.803-1.513-8.356-3.75-10.527-6.71c-2.171-2.895-3.289-6.12-3.289-9.54q0-4.144 1.776-7.303c1.184-2.105 2.763-3.947 4.737-5.394c1.974-1.514 4.211-2.632 6.842-3.422c2.632-.79 5.395-1.118 8.29-1.118c1.447 0 2.96.066 4.408.263c1.513.197 2.894.46 4.276.724c1.316.329 2.566.658 3.75 1.053q1.776.591 2.763 1.184c.921.526 1.579 1.052 1.974 1.644q.592.79.592 2.172v3.092c0 1.381-.526 2.105-1.513 2.105c-.527 0-1.382-.263-2.5-.79q-5.625-2.565-12.632-2.565c-3.75 0-6.71.592-8.75 1.842s-3.092 3.158-3.092 5.855c0 1.842.658 3.421 1.974 4.671s3.75 2.5 7.237 3.618l9.342 2.96c4.736 1.514 8.158 3.619 10.197 6.317s3.026 5.789 3.026 9.21c0 2.829-.592 5.395-1.71 7.632c-1.184 2.237-2.763 4.21-4.803 5.789c-2.039 1.645-4.474 2.829-7.302 3.685c-2.961.921-6.053 1.381-9.408 1.381"
+      />
+      <path
+        fill="#f90"
+        fillRule="evenodd"
+        d="M207.837 162.816c-21.645 15.987-53.092 24.474-80.132 24.474c-37.894 0-72.04-14.014-97.829-37.303c-2.04-1.842-.197-4.342 2.237-2.895c27.895 16.184 62.303 25.987 97.895 25.987c24.013 0 50.395-5 74.671-15.263c3.618-1.645 6.71 2.368 3.158 5"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#f90"
+        fillRule="evenodd"
+        d="M216.85 152.553c-2.763-3.553-18.289-1.711-25.329-.856c-2.105.264-2.434-1.579-.526-2.96c12.368-8.684 32.697-6.184 35.066-3.29c2.368 2.961-.658 23.29-12.237 33.027c-1.777 1.513-3.487.723-2.698-1.25c2.632-6.513 8.487-21.185 5.724-24.671"
+        clipRule="evenodd"
+      />
+    </g>
+  </svg>
+);
@@ -0,0 +1,80 @@
+import * as React from "react";
+
+import { IconSvgProps } from "@/types";
+
+export const AzureProvider: React.FC<IconSvgProps> = ({
+  size,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 256 256"
+    width={size || width}
+    {...props}
+  >
+    <g fill="none">
+      <rect width="256" height="256" fill="#f4f2ed" rx="60" />
+      <path
+        fill="url(#skillIconsAzureLight0)"
+        d="M94.674 34.002h59.182L92.42 216.032a9.44 9.44 0 0 1-8.94 6.419H37.422a9.42 9.42 0 0 1-9.318-8.026a9.4 9.4 0 0 1 .39-4.407L85.733 40.421A9.44 9.44 0 0 1 94.674 34z"
+      />
+      <path
+        fill="#0078d4"
+        d="M180.674 156.095H86.826a4.34 4.34 0 0 0-4.045 2.75a4.34 4.34 0 0 0 1.079 4.771l60.305 56.287a9.48 9.48 0 0 0 6.468 2.548h53.141z"
+      />
+      <path
+        fill="url(#skillIconsAzureLight1)"
+        d="M94.675 34.002a9.36 9.36 0 0 0-8.962 6.544L28.565 209.863a9.412 9.412 0 0 0 8.882 12.588h47.247a10.1 10.1 0 0 0 7.75-6.592l11.397-33.586l40.708 37.968a9.63 9.63 0 0 0 6.059 2.21h52.943l-23.22-66.355l-67.689.016l41.428-122.11z"
+      />
+      <path
+        fill="url(#skillIconsAzureLight2)"
+        d="M170.264 40.412a9.42 9.42 0 0 0-8.928-6.41H95.379a9.42 9.42 0 0 1 8.928 6.41l57.241 169.604a9.43 9.43 0 0 1-1.273 8.509a9.43 9.43 0 0 1-7.655 3.928h65.959a9.43 9.43 0 0 0 7.654-3.929a9.42 9.42 0 0 0 1.272-8.508z"
+      />
+      <defs>
+        <linearGradient
+          id="skillIconsAzureLight0"
+          x1="116.244"
+          x2="54.783"
+          y1="47.967"
+          y2="229.54"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#114a8b" />
+          <stop offset="1" stopColor="#0669bc" />
+        </linearGradient>
+        <linearGradient
+          id="skillIconsAzureLight1"
+          x1="135.444"
+          x2="121.227"
+          y1="132.585"
+          y2="137.392"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopOpacity="0.3" />
+          <stop offset="0.071" stopOpacity="0.2" />
+          <stop offset="0.321" stopOpacity="0.1" />
+          <stop offset="0.623" stopOpacity="0.05" />
+          <stop offset="1" stopOpacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="skillIconsAzureLight2"
+          x1="127.625"
+          x2="195.091"
+          y1="42.671"
+          y2="222.414"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#3ccbf4" />
+          <stop offset="1" stopColor="#2892df" />
+        </linearGradient>
+      </defs>
+    </g>
+  </svg>
+);
@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import { IconSvgProps } from "@/types";
+
+export const GoogleCloudProvider: React.FC<IconSvgProps> = ({
+  size,
+  width,
+  height,
+  ...props
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 256 256"
+    width={size || width}
+    {...props}
+  >
+    <g fill="none">
+      <rect width="256" height="256" fill="#f4f2ed" rx="60" />
+      <path
+        fill="#ea4335"
+        d="m161.009 92.39l17.385-17.386l1.159-7.32c-31.68-28.807-82.04-25.54-110.6 6.816c-7.932 8.986-13.817 20.19-16.955 31.76l6.226-.878l34.77-5.733l2.684-2.745c15.466-16.986 41.617-19.272 59.475-4.82z"
+      />
+      <path
+        fill="#4285f4"
+        d="M203.16 105.749a78.3 78.3 0 0 0-23.607-38.064l-24.4 24.4a43.37 43.37 0 0 1 15.921 34.404v4.331c11.993 0 21.716 9.722 21.716 21.715s-9.723 21.473-21.716 21.473h-43.493l-4.27 4.636v26.047l4.27 4.087h43.493c31.195.243 56.681-24.605 56.924-55.8a56.48 56.48 0 0 0-24.838-47.229"
+      />
+      <path
+        fill="#34a853"
+        d="M84.149 208.778h43.432v-34.77H84.149a21.3 21.3 0 0 1-8.906-1.952l-6.161 1.891l-17.507 17.385l-1.525 5.917c9.818 7.413 21.796 11.582 34.099 11.529"
+      />
+      <path
+        fill="#fbbc05"
+        d="M84.149 95.989C52.953 96.175 27.815 121.615 28 152.81a56.49 56.49 0 0 0 22.049 44.438l25.193-25.193c-10.93-4.938-15.787-17.802-10.849-28.731s17.802-15.787 28.73-10.85a21.72 21.72 0 0 1 10.85 10.85l25.193-25.193a56.42 56.42 0 0 0-45.018-22.143"
+      />
+    </g>
+  </svg>
+);
@@ -1,3 +1,4 @@
+export * from "./providers/AccountInfo";
 export * from "./ui/header/Header";
 export * from "./ui/sidebar";
 export * from "./ui/table/CustomTable";
@@ -0,0 +1,54 @@
+import React from "react";
+
+import {
+  AwsProvider,
+  AzureProvider,
+  GoogleCloudProvider,
+  WifiIcon,
+  WifiOffIcon,
+} from "../icons";
+
+interface AccountInfoProps {
+  connected: boolean;
+  provider: "aws" | "azure" | "gcp";
+  accountName: string;
+  accountId: string;
+}
+
+export const AccountInfo: React.FC<AccountInfoProps> = ({
+  connected,
+  provider,
+  accountName,
+  accountId,
+}) => {
+  const getIcon = () => {
+    return connected ? <WifiIcon size={22} /> : <WifiOffIcon size={22} />;
+  };
+
+  const getProviderLogo = () => {
+    switch (provider) {
+      case "aws":
+        return <AwsProvider width={35} height={35} />;
+      case "azure":
+        return <AzureProvider width={35} height={35} />;
+
+      case "gcp":
+        return <GoogleCloudProvider width={35} height={35} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="border-none max-w-fit">
+      <div className="flex items-center space-x-4">
+        <div className="flex-shrink-0">{getIcon()}</div>
+        <div className="flex-shrink-0 mx-2">{getProviderLogo()}</div>
+        <div className="flex flex-col">
+          <span className="text-md font-semibold">{accountName}</span>
+          <span className="text-sm text-gray-500">{accountId}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,10 @@
+import { SVGProps } from "react";
+
+export type IconSvgProps = SVGProps<SVGSVGElement> & {
+  size?: number;
+};
+
+export type IconProps = {
+  icon: React.FC<IconSvgProps>;
+  style?: React.CSSProperties;
+};
@@ -1,5 +1 @@
-import { SVGProps } from "react";
-
-export type IconSvgProps = SVGProps<SVGSVGElement> & {
-  size?: number;
-};
+export * from "./components";