feat: add banner component support

Author: pyadav

src/components/banner.tsx

@@ -0,0 +1,47 @@
+import { Box, Text } from "ink";
+import BigText from "ink-big-text";
+
+interface BannerProps {
+  text?: string;
+  font?:
+    | "block"
+    | "simple"
+    | "simpleBlock"
+    | "3d"
+    | "simple3d"
+    | "chrome"
+    | "huge";
+  colors?: string[];
+  align?: "left" | "center" | "right";
+  showSubtitle?: boolean;
+}
+
+export const Banner = ({
+  text = "Mstudio",
+  font = "block",
+  colors = ["white"],
+  align = "left",
+  showSubtitle = true,
+}: BannerProps) => {
+  return (
+    <Box
+      flexDirection="column"
+      alignItems={
+        align === "center"
+          ? "center"
+          : align === "right"
+            ? "flex-end"
+            : "flex-start"
+      }
+    >
+      <BigText text={text} font={font} colors={colors} />
+      {showSubtitle && (
+        <Box marginTop={1}>
+          <Text color="gray" dimColor>
+            Welcome to Missing Studio CLI
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+};

src/ui/app.tsx

@@ -50,6 +50,7 @@ export default function App({ provider, model }: AppProps) {
       model: selectedModel,
       enabled: Boolean(selectedProvider && selectedModel && readyForApi),
     });
+
   const [currentInput, setCurrentInput] = useState<string>("");
   const [showHelp, setShowHelp] = useState(false);
   const { exit } = useApp();

src/ui/layout.tsx

@@ -1,5 +1,5 @@
-import { Box, Text } from "ink";
-import { AsciiLogo } from "../components/ascii-logo.js";
+import { Box } from "ink";
+import { Banner } from "../components/banner.js";
 
 type AppLayoutProps = {
   children: React.ReactNode;
@@ -9,7 +9,7 @@ export default function AppLayout({ children }: AppLayoutProps) {
   return (
     <Box flexDirection="column" minHeight={24} padding={1}>
       <Box justifyContent="flex-start" marginBottom={1}>
-        <AsciiLogo />
+        <Banner />
       </Box>
       <Box flexGrow={1} flexDirection="column">
         {children}