feat: refactor the modal's content for providers

components/index.ts

@@ -6,6 +6,7 @@ export * from "./providers/ButtonAddProvider";
 export * from "./providers/ButtonCheckConnectionProvider";
 export * from "./providers/ButtonDeleteProvider";
 export * from "./providers/CheckConnectionProvider";
+export * from "./providers/CustomRadioProvider";
 export * from "./providers/DateWithTime";
 export * from "./providers/ProviderInfo";
 export * from "./providers/ScanStatus";

components/providers/AddProviderModal.tsx

@@ -6,6 +6,7 @@ import { useRef, useState } from "react";
 import { addProvider } from "@/actions";
 import {
   ButtonAddProvider,
+  CustomRadioProvider,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -63,32 +64,34 @@ export const AddProviderModal = () => {
           ref={ref}
           action={clientAction}
           onSubmit={() => setOpen(false)}
-          className="flex flex-col gap-x-2"
+          className="grid sm:grid-cols-2 gap-6"
         >
-          <Input
-            type="text"
-            name="provider"
-            labelPlacement="outside"
-            placeholder="provider"
-            className="py-2 px-3 rounded-sm"
-          />
-          <Input
-            type="text"
-            name="id"
-            label="Provider ID"
-            labelPlacement="outside"
-            placeholder="provider ID"
-            className="py-2 px-3 rounded-sm"
-          />
-          <Input
-            type="text"
-            name="alias"
-            label="Alias"
-            labelPlacement="outside"
-            placeholder="alias"
-            className="py-2 px-3 rounded-sm"
-          />
-          <ButtonAddProvider />
+          <div className="col-span-1">
+            <CustomRadioProvider />
+          </div>
+          <div className="col-span-1 flex flex-col gap-y-2 my-auto">
+            <Input
+              type="text"
+              name="id"
+              label="Provider ID"
+              labelPlacement="outside"
+              placeholder="Provider ID"
+              className="w-full rounded-sm"
+              aria-label="Enter Provider ID"
+            />
+            <Input
+              type="text"
+              name="alias"
+              label="Alias"
+              labelPlacement="outside"
+              placeholder="alias"
+              className="w-full rounded-sm"
+              aria-label="Enter Provider alias"
+            />
+          </div>
+          <div className="col-span-2 flex justify-center mt-4">
+            <ButtonAddProvider />
+          </div>
         </form>
       </DialogContent>
     </Dialog>

components/providers/CustomRadioProvider.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { UseRadioProps } from "@nextui-org/radio/dist/use-radio";
+import { cn, RadioGroup, useRadio, VisuallyHidden } from "@nextui-org/react";
+import React from "react";
+
+import { AwsProvider, AzureProvider, GoogleCloudProvider } from "../icons";
+
+interface CustomRadioProps extends UseRadioProps {
+  description?: string;
+  children?: React.ReactNode;
+}
+
+export const CustomRadio: React.FC<CustomRadioProps> = (props) => {
+  const {
+    Component,
+    children,
+    description,
+    getBaseProps,
+    getWrapperProps,
+    getInputProps,
+    getLabelProps,
+    getLabelWrapperProps,
+    getControlProps,
+  } = useRadio(props);
+
+  return (
+    <Component
+      {...getBaseProps()}
+      className={cn(
+        "group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent",
+        "max-w-full cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
+        "data-[selected=true]:border-primary",
+      )}
+    >
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <span {...getWrapperProps()}>
+        <span {...getControlProps()} />
+      </span>
+      <div {...getLabelWrapperProps()}>
+        {children && <span {...getLabelProps()}>{children}</span>}
+        {description && (
+          <span className="text-small text-foreground opacity-70">
+            {description}
+          </span>
+        )}
+      </div>
+    </Component>
+  );
+};
+
+export const CustomRadioProvider = () => {
+  return (
+    <RadioGroup label="Select one provider" name="provider">
+      <CustomRadio description="Amazon Web Services" value="aws">
+        <div className="flex items-center">
+          <AwsProvider size={26} />
+          <span className="ml-2">GCP</span>
+        </div>
+      </CustomRadio>
+      <CustomRadio description="Google Cloud Platform" value="gcp">
+        <div className="flex items-center">
+          <GoogleCloudProvider size={26} />
+          <span className="ml-2">GCP</span>
+        </div>
+      </CustomRadio>
+      <CustomRadio description="Microsoft Azure" value="azure">
+        <div className="flex items-center">
+          <AzureProvider size={26} />
+          <span className="ml-2">Azure</span>
+        </div>
+      </CustomRadio>
+    </RadioGroup>
+  );
+};