diff --git a/components/icons/Icons.tsx b/components/icons/Icons.tsx index 0f0cd7c60d..9b79a7c35d 100644 --- a/components/icons/Icons.tsx +++ b/components/icons/Icons.tsx @@ -201,3 +201,72 @@ export const VerticalDotsIcon: React.FC = ({ ); +export const WifiIcon: React.FC = ({ + size = 24, + width, + height, + ...props +}) => ( + +); + +export const WifiOffIcon: React.FC = ({ + size = 24, + width, + height, + ...props +}) => ( + +); diff --git a/components/icons/index.ts b/components/icons/index.ts index e733eda3ef..3929e06cd5 100644 --- a/components/icons/index.ts +++ b/components/icons/index.ts @@ -1,2 +1,5 @@ export * from "./Icons"; +export * from "./providers/AwsProvider"; +export * from "./providers/AzureProvider"; +export * from "./providers/GoogleCloudProvider"; export * from "./prowler/ProwlerIcons"; diff --git a/components/icons/providers/AwsProvider.tsx b/components/icons/providers/AwsProvider.tsx new file mode 100644 index 0000000000..48cdfe377d --- /dev/null +++ b/components/icons/providers/AwsProvider.tsx @@ -0,0 +1,42 @@ +import * as React from "react"; + +import { IconSvgProps } from "@/types"; + +export const AwsProvider: React.FC = ({ + size, + width, + height, + ...props +}) => ( + +); diff --git a/components/icons/providers/AzureProvider.tsx b/components/icons/providers/AzureProvider.tsx new file mode 100644 index 0000000000..1f20189bbf --- /dev/null +++ b/components/icons/providers/AzureProvider.tsx @@ -0,0 +1,80 @@ +import * as React from "react"; + +import { IconSvgProps } from "@/types"; + +export const AzureProvider: React.FC = ({ + size, + width, + height, + ...props +}) => ( + +); diff --git a/components/icons/providers/GoogleCloudProvider.tsx b/components/icons/providers/GoogleCloudProvider.tsx new file mode 100644 index 0000000000..0fa5bde7ae --- /dev/null +++ b/components/icons/providers/GoogleCloudProvider.tsx @@ -0,0 +1,42 @@ +import * as React from "react"; + +import { IconSvgProps } from "@/types"; + +export const GoogleCloudProvider: React.FC = ({ + size, + width, + height, + ...props +}) => ( + +); diff --git a/components/index.ts b/components/index.ts index e0bd724528..781f3a8b73 100644 --- a/components/index.ts +++ b/components/index.ts @@ -1,3 +1,4 @@ +export * from "./providers/AccountInfo"; export * from "./ui/header/Header"; export * from "./ui/sidebar"; export * from "./ui/table/CustomTable"; diff --git a/components/providers/AccountInfo.tsx b/components/providers/AccountInfo.tsx new file mode 100644 index 0000000000..99ad95a3b9 --- /dev/null +++ b/components/providers/AccountInfo.tsx @@ -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 = ({ + connected, + provider, + accountName, + accountId, +}) => { + const getIcon = () => { + return connected ? : ; + }; + + const getProviderLogo = () => { + switch (provider) { + case "aws": + return ; + case "azure": + return ; + + case "gcp": + return ; + default: + return null; + } + }; + + return ( +
+
+
{getIcon()}
+
{getProviderLogo()}
+
+ {accountName} + {accountId} +
+
+
+ ); +}; diff --git a/types/components.ts b/types/components.ts new file mode 100644 index 0000000000..c9b078e314 --- /dev/null +++ b/types/components.ts @@ -0,0 +1,10 @@ +import { SVGProps } from "react"; + +export type IconSvgProps = SVGProps & { + size?: number; +}; + +export type IconProps = { + icon: React.FC; + style?: React.CSSProperties; +}; diff --git a/types/index.ts b/types/index.ts index cece4a4775..40b494c5f8 100644 --- a/types/index.ts +++ b/types/index.ts @@ -1,5 +1 @@ -import { SVGProps } from "react"; - -export type IconSvgProps = SVGProps & { - size?: number; -}; +export * from "./components";