From 13625d722a421441c1edc6eb1256b7e20f20544d Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Sun, 26 Nov 2023 02:36:07 -0800
Subject: use SSR for rendering graph + transition demo to PhaseConnect - I
 like Phase Connect

---
 src/components/TitleBar/TitleBar.tsx      | 26 +++++++++++++++-----------
 src/components/TitleBar/TitleBarStyle.css |  1 +
 2 files changed, 16 insertions(+), 11 deletions(-)
 create mode 100644 src/components/TitleBar/TitleBarStyle.css

(limited to 'src/components/TitleBar')

diff --git a/src/components/TitleBar/TitleBar.tsx b/src/components/TitleBar/TitleBar.tsx
index 85fbfbd..05a0e5d 100644
--- a/src/components/TitleBar/TitleBar.tsx
+++ b/src/components/TitleBar/TitleBar.tsx
@@ -1,25 +1,29 @@
 import React from 'react';
+import '../TitleBar/TitleBarStyle.css'
 
 interface TitleBarProps {
     title: string;
     redirectUrl?: string;
     showHomeButton?: boolean;
+    backgroundColor?: string;
 }
 
-const TitleBar: React.FC<TitleBarProps> = ({ title, redirectUrl, showHomeButton }) => {
+const TitleBar: React.FC<TitleBarProps> = ({ title, redirectUrl, showHomeButton, backgroundColor }) => {
     return (
-        <div className="title-bar p-5 shadow-md" style={{ backgroundColor: '#2D4B71' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <a href={redirectUrl}>
-                    <span className="text-white text-4xl font-bold">{title}</span>
-                </a>
-                {showHomeButton && (
-                    <a href="/">
-                        <button className="bg-white text-blue-500 hover:bg-blue-500 hover:text-white font-bold py-2 px-4 rounded-full">Home</button>
+        <>
+            <div className="title-bar p-5 shadow-md" style={{ backgroundColor: backgroundColor || '#2D4B71' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <a href={redirectUrl}>
+                        <span className="text-white text-4xl font-bold" style={{ fontFamily: 'Quantico, sans-serif' }}>{title}</span>
                     </a>
-                )}
+                    {showHomeButton && (
+                        <a href="/">
+                            <button className="bg-white text-black font-bold py-2 px-4 rounded-lg">Home</button>
+                        </a>
+                    )}
+                </div>
             </div>
-        </div>
+        </>
     );
 };
 
diff --git a/src/components/TitleBar/TitleBarStyle.css b/src/components/TitleBar/TitleBarStyle.css
new file mode 100644
index 0000000..703f01d
--- /dev/null
+++ b/src/components/TitleBar/TitleBarStyle.css
@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&amp;display=swap');
-- 
cgit v1.2.3