From 58d3c8e211511591abf2176f57f6f09ef679f359 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 19 Jan 2024 09:29:18 +0100
Subject: [PATCH] Add website URL info

---
 .../components/Common/Link.tsx                 | 18 ++++++++++++++++++
 .../components/Common/LinkButton.tsx           | 10 +---------
 .../components/Header/Header.tsx               | 18 ++++++++++++++++--
 3 files changed, 35 insertions(+), 11 deletions(-)
 create mode 100644 src/dashboardWebView/components/Common/Link.tsx

diff --git a/src/dashboardWebView/components/Common/Link.tsx b/src/dashboardWebView/components/Common/Link.tsx
new file mode 100644
index 00000000..a140da36
--- /dev/null
+++ b/src/dashboardWebView/components/Common/Link.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export interface ILinkProps {
+  title: string;
+  href: string;
+  className?: string;
+}
+
+export const Link: React.FunctionComponent<ILinkProps> = ({ children, title, href, className }: React.PropsWithChildren<ILinkProps>) => {
+  return (
+    <a
+      className={`text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)] ${className || ""}`}
+      title={title}
+      href={href}>
+      {children}
+    </a>
+  );
+};
\ No newline at end of file
diff --git a/src/dashboardWebView/components/Common/LinkButton.tsx b/src/dashboardWebView/components/Common/LinkButton.tsx
index 4d63fc28..310ed817 100644
--- a/src/dashboardWebView/components/Common/LinkButton.tsx
+++ b/src/dashboardWebView/components/Common/LinkButton.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface ILinkButtonProps {
   title: string;
@@ -7,17 +6,10 @@ export interface ILinkButtonProps {
 }
 
 export const LinkButton: React.FunctionComponent<ILinkButtonProps> = ({ children, title, onClick }: React.PropsWithChildren<ILinkButtonProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <button
       type="button"
-      className={
-        getColors(
-          `text-gray-500 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600`,
-          `text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`
-        )
-      }
+      className={`text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`}
       title={title}
       onClick={onClick}>
       {children}
diff --git a/src/dashboardWebView/components/Header/Header.tsx b/src/dashboardWebView/components/Header/Header.tsx
index 2834f82c..bd606d42 100644
--- a/src/dashboardWebView/components/Header/Header.tsx
+++ b/src/dashboardWebView/components/Header/Header.tsx
@@ -16,7 +16,7 @@ import { ChoiceButton } from '../Common/ChoiceButton';
 import { MediaHeaderBottom } from '../Media/MediaHeaderBottom';
 import { Tabs } from './Tabs';
 import { CustomScript } from '../../../models';
-import { BoltIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { ArrowTopRightOnSquareIcon, BoltIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { routePaths } from '../..';
 import { useEffect, useMemo } from 'react';
@@ -30,6 +30,7 @@ import { ProjectSwitcher } from './ProjectSwitcher';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { SettingsLink } from '../SettingsView/SettingsLink';
+import { Link } from '../Common/Link';
 
 export interface IHeaderProps {
   header?: React.ReactNode;
@@ -146,9 +147,22 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
       <div className={`mb-0 border-b flex justify-between bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}>
         <Tabs onNavigate={updateView} />
 
-        <div className='flex'>
+        <div className='flex items-center'>
           <ProjectSwitcher />
 
+          {
+            settings?.websiteUrl && (
+              <Link
+                className='inline-flex items-center mr-2'
+                href={settings?.websiteUrl}
+                title={settings?.websiteUrl}>
+                <span>{settings?.websiteUrl}</span>
+
+                <ArrowTopRightOnSquareIcon className='w-4 h-4 ml-1' aria-hidden="true" />
+              </Link>
+            )
+          }
+
           <SettingsLink onNavigate={updateView} />
         </div>
       </div>