fix bug and add functionality to drag component icons

app/assets/aws/compute/appRunnerIcon.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-function AppRunnerIcon() {
+function AppRunnerIcon({ className }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="40"
       height="40"
-      className="w-6 h-6"
+      className={className}
     >
       <defs>
         <linearGradient

app/assets/aws/compute/autoScalingIcon.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-function AutoScalingIcon() {
+function AutoScalingIcon({ className }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="40"
       height="40"
-      className="w-6 h-6"
+      className={className}
     >
       <defs>
         <linearGradient

app/assets/aws/compute/awsBatchIcon.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-const AwsBatchIcon = () => {
+const AwsBatchIcon = ({ className }) => {
   return (
     <svg
-      className="w-6 h-6"
+      className={className}
       height="40"
       width="40"
       xmlns="http://www.w3.org/2000/svg"

app/assets/aws/compute/containersIcon.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-function ContainerIcon() {
+function ContainerIcon({ className }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="48"
       height="48"
-      className="w-6 h-6"
+      className={className}
     >
       <path
         fill="#D45B07"

app/assets/aws/compute/ec2Icon.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-function Ec2Icon() {
+function Ec2Icon({ className }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="40"
       height="40"
-      className="w-6 h-6"
+      className={className}
     >
       <defs>
         <linearGradient

app/assets/aws/compute/elasticBeanStalkIcon.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-function ElasticBeanStalkIcon() {
+function ElasticBeanStalkIcon({ className }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="40"
       height="40"
-      className="w-6 h-6"
+      className={className}
     >
       <defs>
         <linearGradient

app/assets/aws/compute/imageBuilderIcon.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-function ImageBuilder() {
+function ImageBuilder({ className }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="40"
       height="40"
-      className="w-6 h-6"
+      className={className}
     >
       <defs>
         <linearGradient

app/assets/aws/compute/lambdaIcon.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-function Lambda() {
+function Lambda({ className }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="40"
       height="40"
-      className="w-6 h-6"
+      className={className}
     >
       <defs>
         <linearGradient

app/assets/aws/compute/sailIcon.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-function SailIcon() {
+function SailIcon({ className }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="40"
       height="40"
-      className="w-6 h-6"
+      className={className}
     >
       <defs>
         <linearGradient

app/assets/logo/aws.tsx

@@ -0,0 +1,30 @@
+import React, { SVGProps } from 'react';
+
+interface AWSProps extends SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const AWS: React.FC<AWSProps> = ({ className }) => (
+  <svg
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 300.7 179.8"
+    className={className}
+  >
+    <style>{`.st0{fill:#000000}.st1{fill:#f90}`}</style>
+    <path
+      className="st0"
+      d="M84.7 65.3c0 3.7.4 6.7 1.1 8.9.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3l-6.3 4.2c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2-4.9-4.8-7.4-11.2-7.4-19.2 0-8.5 3-15.4 9.1-20.6s14.2-7.8 24.5-7.8c3.4 0 6.9.3 10.6.8s7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3-3.7.9-7.3 2-10.8 3.4-1.6.7-2.8 1.1-3.5 1.3-.7.2-1.2.3-1.6.3-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5s1.4-1.4 2.8-2.1c3.5-1.8 7.7-3.3 12.6-4.5C39.3.8 44.5.2 50 .2c11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6v32.4h.2zM44.1 80.5c3.3 0 6.7-.6 10.3-1.8 3.6-1.2 6.8-3.4 9.5-6.4 1.6-1.9 2.8-4 3.4-6.4s1-5.3 1-8.7V53c-2.9-.7-6-1.3-9.2-1.7s-6.3-.6-9.4-.6c-6.7 0-11.6 1.3-14.9 4-3.3 2.7-4.9 6.5-4.9 11.5 0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9L95 9.1c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9L129 73.7l15.6-66.2c.5-2 1.1-3.3 1.9-3.9.8-.6 2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.8 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6-.1.6-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9s-2.1 1-3.8 1h-8.6c-1.9 0-3.2-.3-4-1s-1.5-2-1.9-4l-15.5-64.5-15.4 64.4c-.5 2-1.1 3.3-1.9 4-.8.7-2.2 1-4 1h-8.6zM252.9 94c-5.2 0-10.4-.6-15.4-1.8-5-1.2-8.9-2.5-11.5-4-1.6-.9-2.7-1.9-3.1-2.8-.4-.9-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3.6.2 1.5.6 2.5 1 3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3 3.4-2.2 5.2-5.4 5.2-9.5 0-2.8-.9-5.1-2.7-7-1.8-1.9-5.2-3.6-10.1-5.2l-14.5-4.5c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1s4.2-6 7.2-8.2c3-2.3 6.4-4 10.4-5.2S251.8 0 256.2 0c2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6 1.8.6 3.2 1.2 4.2 1.8 1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8s-4.7 4.8-4.7 8.9c0 2.8 1 5.2 3 7.1 2 1.9 5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6s4.6 8.8 4.6 14c0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z"
+    />
+    <path
+      className="st1"
+      d="M271.8 142.6c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z"
+    />
+    <path
+      className="st1"
+      d="M285.5 127c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.3 1.1-4.1-1.9 4-9.9 12.9-32.2 8.7-37.5z"
+    />
+  </svg>
+);
+
+export default React.memo<AWSProps>(AWS);

app/assets/logo/gcp.tsx

@@ -0,0 +1,48 @@
+import React, { SVGProps } from 'react';
+
+interface GCPProps extends SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+const GCP: React.FC<GCPProps> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    className={className}
+    viewBox="0 0 48 48"
+  >
+    <path
+      fill="#1976d2"
+      d="M38.193,18.359c-0.771-2.753-2.319-5.177-4.397-7.03l-4.598,4.598	c1.677,1.365,2.808,3.374,3.014,5.648v1.508c0.026,0,0.05-0.008,0.076-0.008c2.322,0,4.212,1.89,4.212,4.212S34.61,31.5,32.288,31.5	c-0.026,0-0.05-0.007-0.076-0.008V31.5h-6.666H24V38h8.212v-0.004c0.026,0,0.05,0.004,0.076,0.004C38.195,38,43,33.194,43,27.288	C43,23.563,41.086,20.279,38.193,18.359z"
+    ></path>
+    <path
+      fill="#ffe082"
+      d="M19.56,25.59l4.72-4.72c-0.004-0.005-0.008-0.009-0.011-0.013l-4.717,4.717	C19.554,25.579,19.557,25.584,19.56,25.59z"
+      opacity=".5"
+    ></path>
+    <path
+      fill="#90caf9"
+      d="M19.56,25.59l4.72-4.72c-0.004-0.005-0.008-0.009-0.011-0.013l-4.717,4.717	C19.554,25.579,19.557,25.584,19.56,25.59z"
+      opacity=".5"
+    ></path>
+    <path
+      fill="#ff3d00"
+      d="M24,7.576c-8.133,0-14.75,6.617-14.75,14.75c0,0.233,0.024,0.46,0.035,0.69h6.5	c-0.019-0.228-0.035-0.457-0.035-0.69c0-4.549,3.701-8.25,8.25-8.25c1.969,0,3.778,0.696,5.198,1.851l4.598-4.598	C31.188,9.003,27.761,7.576,24,7.576z"
+    ></path>
+    <path
+      fill="#90caf9"
+      d="M15.712,31.5L15.712,31.5c-0.001,0-0.001,0-0.002,0c-0.611,0-1.188-0.137-1.712-0.373	l-4.71,4.71C11.081,37.188,13.301,38,15.71,38c0.001,0,0.001,0,0.002,0v0H24v-6.5H15.712z"
+      opacity=".5"
+    ></path>
+    <path
+      fill="#4caf50"
+      d="M15.712,31.5L15.712,31.5c-0.001,0-0.001,0-0.002,0c-0.611,0-1.188-0.137-1.712-0.373l-4.71,4.71	C11.081,37.188,13.301,38,15.71,38c0.001,0,0.001,0,0.002,0v0H24v-6.5H15.712z"
+    ></path>
+    <path
+      fill="#ffc107"
+      d="M11.5,27.29c0-2.32,1.89-4.21,4.21-4.21c1.703,0,3.178,1.023,3.841,2.494l4.717-4.717	c-1.961-2.602-5.065-4.277-8.559-4.277C9.81,16.58,5,21.38,5,27.29c0,3.491,1.691,6.59,4.288,8.547l4.71-4.71	C12.53,30.469,11.5,28.999,11.5,27.29z"
+    ></path>
+  </svg>
+);
+export default React.memo<GCPProps>(GCP);

app/components/drag/index.tsx

@@ -9,7 +9,6 @@ import { MdGridOn } from 'react-icons/md';
 import { RiZoomInLine, RiZoomOutLine } from 'react-icons/ri';
 import { HiOutlineViewfinderCircle } from 'react-icons/hi2';
 import { LuRedo, LuUndo, LuKeyboard } from 'react-icons/lu';
-import {} from 'react-icons/lu';
 import { FiFileText } from 'react-icons/fi';
 import { Tooltip } from '@mantine/core';
 import Draggable from 'react-draggable';