Replace logo with custom ASCII (#958)

1 files changed, 32 insertions, 23 deletions

diff --git a/packages/cli/src/ui/components/Header.tsx b/packages/cli/src/ui/components/Header.tsx
index 207673ff..4a632142 100644
--- a/packages/cli/src/ui/components/Header.tsx
+++ b/packages/cli/src/ui/components/Header.tsx
@@ -8,30 +8,39 @@ import React from 'react';
 import { Box, Text } from 'ink';
 import Gradient from 'ink-gradient';
 import { Colors } from '../colors.js';
-
-const asciiArtLogo = `
- ██████╗ ███████╗███╗   ███╗██╗███╗   ██╗██╗
-██╔════╝ ██╔════╝████╗ ████║██║████╗  ██║██║
-██║  ███╗█████╗  ██╔████╔██║██║██╔██╗ ██║██║
-██║   ██║██╔══╝  ██║╚██╔╝██║██║██║╚██╗██║██║
-╚██████╔╝███████╗██║ ╚═╝ ██║██║██║ ╚████║██║
- ╚═════╝ ╚══════╝╚═╝     ╚═╝╚═╝╚═╝  ╚═══╝╚═╝
-`;
+import { shortAsciiLogo, longAsciiLogo } from './AsciiArt.js';
+import { getAsciiArtWidth } from '../utils/textUtils.js';
 
 interface HeaderProps {
-  title?: string;
+  customAsciiArt?: string; // For user-defined ASCII art
+  terminalWidth: number; // For responsive logo
 }
 
-export const Header: React.FC<HeaderProps> = ({ title = asciiArtLogo }) => (
-  <>
-    <Box marginBottom={1} alignItems="flex-start">
-      {Colors.GradientColors ? (
-        <Gradient colors={Colors.GradientColors}>
-          <Text>{title}</Text>
-        </Gradient>
-      ) : (
-        <Text>{title}</Text>
-      )}
-    </Box>
-  </>
-);
+export const Header: React.FC<HeaderProps> = ({
+  customAsciiArt,
+  terminalWidth,
+}) => {
+  let displayTitle;
+  const widthOfLongLogo = getAsciiArtWidth(longAsciiLogo);
+
+  if (customAsciiArt) {
+    displayTitle = customAsciiArt;
+  } else {
+    displayTitle =
+      terminalWidth >= widthOfLongLogo ? longAsciiLogo : shortAsciiLogo;
+  }
+
+  return (
+    <>
+      <Box marginBottom={1} alignItems="flex-start">
+        {Colors.GradientColors ? (
+          <Gradient colors={Colors.GradientColors}>
+            <Text>{displayTitle}</Text>
+          </Gradient>
+        ) : (
+          <Text>{displayTitle}</Text>
+        )}
+      </Box>
+    </>
+  );
+};