diff options
Diffstat (limited to 'packages/cli/src/ui/components')
| -rw-r--r-- | packages/cli/src/ui/components/AsciiArt.ts | 27 | ||||
| -rw-r--r-- | packages/cli/src/ui/components/Header.tsx | 55 |
2 files changed, 59 insertions, 23 deletions
diff --git a/packages/cli/src/ui/components/AsciiArt.ts b/packages/cli/src/ui/components/AsciiArt.ts new file mode 100644 index 00000000..e15704dd --- /dev/null +++ b/packages/cli/src/ui/components/AsciiArt.ts @@ -0,0 +1,27 @@ +/** + * @license + * Copyright 2025 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +export const shortAsciiLogo = ` + █████████ ██████████ ██████ ██████ █████ ██████ █████ █████ + ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███ + ███ ░░░ ░███ █ ░ ░███░█████░███ ░███ ░███░███ ░███ ░███ +░███ ░██████ ░███░░███ ░███ ░███ ░███░░███░███ ░███ +░███ █████ ░███░░█ ░███ ░░░ ░███ ░███ ░███ ░░██████ ░███ +░░███ ░░███ ░███ ░ █ ░███ ░███ ░███ ░███ ░░█████ ░███ + ░░█████████ ██████████ █████ █████ █████ █████ ░░█████ █████ + ░░░░░░░░░ ░░░░░░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ +`; + +export const longAsciiLogo = ` + ███ █████████ ██████████ ██████ ██████ █████ ██████ █████ █████ +░░░███ ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███ + ░░░███ ███ ░░░ ░███ █ ░ ░███░█████░███ ░███ ░███░███ ░███ ░███ + ░░░███ ░███ ░██████ ░███░░███ ░███ ░███ ░███░░███░███ ░███ + ███░ ░███ █████ ░███░░█ ░███ ░░░ ░███ ░███ ░███ ░░██████ ░███ + ███░ ░░███ ░░███ ░███ ░ █ ░███ ░███ ░███ ░███ ░░█████ ░███ + ███░ ░░█████████ ██████████ █████ █████ █████ █████ ░░█████ █████ +░░░ ░░░░░░░░░ ░░░░░░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ +`; 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> + </> + ); +}; |