fix: make Studio logo redirect to AsyncAPI website

apps/studio/src/components/CodeEditor.tsx

@@ -1,9 +1,16 @@
 import React, { useEffect } from 'react';
-import toast, { Toaster } from 'react-hot-toast';
 
-import { Content, Sidebar, Template } from '@/components';
+import toast, { Toaster } from 'react-hot-toast';
 
-import { afterAppInit, useServices } from '@/services';
+import {
+  Content,
+  Sidebar,
+  Template,
+} from '@/components';
+import {
+  afterAppInit,
+  useServices,
+} from '@/services';
 import { appState } from '@/state';
 
 export interface AsyncAPIStudioProps {}

apps/studio/src/components/Content.tsx

@@ -1,15 +1,18 @@
-import SplitPane from './SplitPane';
+import { FunctionComponent } from 'react';
+
+import { debounce } from '@/helpers';
+import {
+  useDocumentsState,
+  usePanelsState,
+} from '@/state';
+
 import { Editor } from './Editor/Editor';
 import { Navigation } from './Navigation';
 import { Navigationv3 } from './Navigationv3';
+import SplitPane from './SplitPane';
 import { Template } from './Template';
 import { VisualiserTemplate } from './Visualiser';
 
-import { debounce } from '@/helpers';
-import { usePanelsState, useDocumentsState } from '@/state';
-
-import { FunctionComponent } from 'react';
-
 interface ContentProps {}
 
 export const Content: FunctionComponent<ContentProps> = () => { // eslint-disable-line sonarjs/cognitive-complexity

apps/studio/src/components/Sidebar.tsx

@@ -1,14 +1,34 @@
-import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile, VscSettingsGear, VscPlayCircle } from 'react-icons/vsc';
+import {
+  type FunctionComponent,
+  type ReactNode,
+  useEffect,
+  useState,
+} from 'react';
+
+import {
+  VscCode,
+  VscGraph,
+  VscListSelection,
+  VscNewFile,
+  VscOpenPreview,
+  VscPlayCircle,
+  VscSettingsGear,
+} from 'react-icons/vsc';
+
+import { driverObj } from '@/helpers/driver';
+import {
+  panelsState,
+  useDocumentsState,
+  usePanelsState,
+} from '@/state';
+import type { PanelsState } from '@/state/panels.state';
 import { show as showModal } from '@ebay/nice-modal-react';
 
 import { Tooltip } from './common';
-import { SettingsModal, ConfirmNewFileModal } from './Modals';
-
-import { usePanelsState, panelsState, useDocumentsState } from '@/state';
-
-import { useEffect, useState, type FunctionComponent, type ReactNode } from 'react';
-import type { PanelsState } from '@/state/panels.state';
-import { driverObj } from '@/helpers/driver';
+import {
+  ConfirmNewFileModal,
+  SettingsModal,
+} from './Modals';
 
 function updateState(panelName: keyof PanelsState['show'], type?: PanelsState['secondaryPanelType']) {
   const settingsState = panelsState.getState();
@@ -180,4 +200,4 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
       </div>
     </div>
   );
-};
+};

apps/studio/src/components/Toolbar.tsx

@@ -1,5 +1,8 @@
-
-import { IoGlobeOutline, IoLogoGithub, IoLogoSlack } from 'react-icons/io5';
+import {
+  IoGlobeOutline,
+  IoLogoGithub,
+  IoLogoSlack,
+} from 'react-icons/io5';
 
 export function Toolbar() {
   return (
@@ -8,12 +11,19 @@ export function Toolbar() {
         <div className="flex items-center justify-between h-16">
           <div className="flex items-center" data-test="logo">
             <div className="flex-shrink-0 ml-1.5">
-              <img
-                className="inline-block h-16"
-                src={`${process.env.PUBLIC_URL || ''}/img/logo-studio.svg`}
-                title="AsyncAPI Logo"
-                alt="AsyncAPI Logo"
-              />
+
+              <a
+                href="https://www.asyncapi.com/en"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Go to AsyncAPI website"
+              >
+                <img
+                  className="inline-block h-16 cursor-pointer"
+                  src={`${process.env.PUBLIC_URL || ''}/img/logo-studio.svg`}
+                  alt="AsyncAPI Logo"
+                />
+              </a>  
               <span className="inline-block text-xs text-teal-500 font-normal ml-1 tracking-wider uppercase" style={{ transform: 'translateY(0.3125rem)' }}>
                 beta
               </span>