# Status Message

Inline status message with icon and color

## Installation

  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @termcn/status-message
```

<Step>Copy and paste the following code into your project.</Step>

```tsx
import { Box, Text } from "ink";
import type { ReactNode } from "react";

import { useTheme } from "@/components/ui/theme-provider";

import { Spinner } from "./spinner";

export type StatusVariant =
  | "success"
  | "error"
  | "warning"
  | "info"
  | "loading"
  | "pending";

const ICONS: Record<Exclude<StatusVariant, "loading">, string> = {
  error: "✗",
  info: "ℹ",
  pending: "○",
  success: "✓",
  warning: "⚠",
};

export interface StatusMessageProps {
  variant?: StatusVariant;
  children: ReactNode;
  icon?: string;
}

export const StatusMessage = ({
  variant = "info",
  children,
  icon,
}: StatusMessageProps) => {
  const theme = useTheme();

  const variantColor = (() => {
    switch (variant) {
      case "success": {
        return theme.colors.success;
      }
      case "error": {
        return theme.colors.error;
      }
      case "warning": {
        return theme.colors.warning;
      }
      case "loading": {
        return theme.colors.primary;
      }
      case "pending": {
        return theme.colors.muted;
      }
      default: {
        return theme.colors.info;
      }
    }
  })();

  return (
    <Box gap={1} flexDirection="row">
      {variant === "loading" ? (
        <Spinner type="dots" color={variantColor} />
      ) : (
        <Text color={variantColor}>
          {icon ?? ICONS[variant as Exclude<StatusVariant, "loading">]}
        </Text>
      )}
      <Text>{children}</Text>
    </Box>
  );
};
```

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { StatusMessage } from "@/components/ui/status-message";
```

```tsx
<StatusMessage variant="success">All tests passed.</StatusMessage>
```

## Examples

### Variants

```tsx
import { Box } from "ink";

import { StatusMessage } from "@/registry/bases/ink/ui/status-message";

export default function StatusMessageVariants() {
  return (
    <Box flexDirection="column" gap={1}>
      <StatusMessage variant="success">Build passed.</StatusMessage>
      <StatusMessage variant="error">Connection failed.</StatusMessage>
      <StatusMessage variant="warning">Rate limit at 80%.</StatusMessage>
      <StatusMessage variant="loading">Fetching config...</StatusMessage>
    </Box>
  );
}
```

## API Reference

### StatusMessage

| Prop       | Type                                                                    | Default    |
| ---------- | ----------------------------------------------------------------------- | ---------- |
| `variant`  | `"success" \| "error" \| "warning" \| "info" \| "loading" \| "pending"` | `"info"`   |
| `children` | `ReactNode`                                                             | `required` |
| `icon`     | `string`                                                                | -          |