# Alert

Renders an alert with various styles and states to display important messages to users.

### **Import**
```tsx
import { Alert } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { Alert } from '../Alert';

export const DefaultDemo = () => {
  return (
    <Alert
      title="Heads up!"
      description="You can add components to your app using the cli."
    />
  );
};
```

### **icon**
Custom icon to display in the alert, overriding the default icon for the chosen variant.

- **Type:** `React.ReactNode`

```tsx
import React from 'react';
import { EditIcon } from '../../Icon/Icon';
import { Alert } from '../Alert';

export const IconDemo = () => {
  return (
    <Alert
      title="Heads up!"
      description="You can add components to your app using the cli."
      icon={<EditIcon widthHeight={24} color="black" />}
    />
  );
};
```

### **variant**
Defines the visual style and semantic meaning of the alert, affecting colors and default icon.

- **Type:** `string`
- **Default:** `default`

```tsx
import React from 'react';
import { Horizontal } from 'app-studio';
import { Alert } from '../Alert';
import { Variant } from '../Alert/Alert.type';

export const VariantDemo = () => (
  <Horizontal gap={10}>
    {['default', 'info', 'warning', 'success', 'error'].map((color, index) => (
      <Alert
        key={index}
        variant={color as Variant}
        title={'Heads Up!'}
        description={'You can add components to your app using the cli.'}
      />
    ))}
  </Horizontal>
);
```

### **DarkMode**

```tsx
import React from 'react';
import { Alert } from '../Alert';
import { Vertical } from 'app-studio';
import { Text } from 'app-studio';

export const DarkModeDemo = () => {
  return (
    <Vertical gap={24}>
      <Text fontSize={20} fontWeight="bold">
        Light Mode Alerts
      </Text>
      <Vertical gap={16}>
        <Alert
          themeMode="light"
          variant="default"
          title="Default Alert (Light)"
          description="This is a default alert in light mode."
        />
        <Alert
          themeMode="light"
          variant="info"
          title="Info Alert (Light)"
          description="This is an info alert in light mode."
        />
        <Alert
          themeMode="light"
          variant="success"
          title="Success Alert (Light)"
          description="This is a success alert in light mode."
        />
        <Alert
          themeMode="light"
          variant="warning"
          title="Warning Alert (Light)"
          description="This is a warning alert in light mode."
        />
        <Alert
          themeMode="light"
          variant="error"
          title="Error Alert (Light)"
          description="This is an error alert in light mode."
        />
      </Vertical>

      <Text fontSize={20} fontWeight="bold" marginTop={40}>
        Dark Mode Alerts
      </Text>
      <Vertical gap={16}>
        <Alert
          themeMode="dark"
          variant="default"
          title="Default Alert (Dark)"
          description="This is a default alert in dark mode."
        />
        <Alert
          themeMode="dark"
          variant="info"
          title="Info Alert (Dark)"
          description="This is an info alert in dark mode."
        />
        <Alert
          themeMode="dark"
          variant="success"
          title="Success Alert (Dark)"
          description="This is a success alert in dark mode."
        />
        <Alert
          themeMode="dark"
          variant="warning"
          title="Warning Alert (Dark)"
          description="This is a warning alert in dark mode."
        />
        <Alert
          themeMode="dark"
          variant="error"
          title="Error Alert (Dark)"
          description="This is an error alert in dark mode."
        />
      </Vertical>
    </Vertical>
  );
};
```

### **DesignSystem**

```tsx
import React from 'react';
import { Alert } from '../Alert';
import { Vertical, Text, View, useTheme } from 'app-studio';
import { EditIcon } from '../../Icon/Icon';

export const DesignSystemAlerts = () => {
  const { themeMode } = useTheme();

  return (
    <Vertical gap={24}>
      {/* Variant Examples */}
      <View>
        <Text marginBottom={8} fontWeight="600" color="theme-primary">
          Alert Variants
        </Text>
        <Vertical gap={16}>
          <Alert
            variant="default"
            title="Default Alert"
            description="This is a default alert with neutral styling."
          />

          <Alert
            variant="info"
            title="Information"
            description="This alert provides helpful information to the user."
          />

          <Alert
            variant="success"
            title="Success"
            description="The operation was completed successfully."
          />

          <Alert
            variant="warning"
            title="Warning"
            description="This action might have some consequences."
          />

          <Alert
            variant="error"
            title="Error"
            description="Something went wrong. Please try again."
          />
        </Vertical>
      </View>

      {/* Custom Icon Example */}
      <View>
        <Text marginBottom={8} fontWeight="600" color="theme-primary">
          Custom Icon
        </Text>
        <Alert
          variant="info"
          title="Custom Icon Alert"
          description="This alert uses a custom icon instead of the default one."
          icon={<EditIcon size={20} color="color-blue-500" />}
        />
      </View>

      {/* Custom Styling Example */}
      <View>
        <Text marginBottom={8} fontWeight="600" color="theme-primary">
          Custom Styling
        </Text>
        <Alert
          title="Custom Styled Alert"
          description="This alert has custom styling applied to it."
          views={{
            container: {
              backgroundColor:
                themeMode === 'light' ? 'color-purple-50' : 'color-gray-800',
              borderColor:
                themeMode === 'light' ? 'color-purple-200' : 'color-purple-500',
              boxShadow:
                themeMode === 'light'
                  ? '0 2px 8px rgba(124, 58, 237, 0.1)'
                  : 'none',
              borderRadius: '12px',
              borderLeftWidth: '4px',
              borderRightWidth: '1px',
              borderTopWidth: '1px',
              borderBottomWidth: '1px',
            },
            title: {
              color: 'theme-primary',
              fontSize: '18px',
              fontWeight: '600',
            },
            description: {
              color:
                themeMode === 'light' ? 'color-gray-700' : 'color-gray-300',
            },
            icon: {
              color: 'color-purple-500',
            },
          }}
        />
      </View>

      {/* Rich Content Example */}
      <View>
        <Text marginBottom={8} fontWeight="600" color="theme-primary">
          Rich Content
        </Text>
        <Alert
          variant="info"
          title="Alert with Rich Content"
          description={
            <Vertical gap={8}>
              <Text
                color={
                  themeMode === 'light' ? 'color-gray-700' : 'color-gray-300'
                }
              >
                This alert contains rich content with multiple paragraphs:
              </Text>
              <Text
                color={
                  themeMode === 'light' ? 'color-gray-700' : 'color-gray-300'
                }
              >
                • First item in the list
              </Text>
              <Text
                color={
                  themeMode === 'light' ? 'color-gray-700' : 'color-gray-300'
                }
              >
                • Second item in the list
              </Text>
              <Text
                color={
                  themeMode === 'light' ? 'color-gray-700' : 'color-gray-300'
                }
              >
                • Third item with{' '}
                <Text as="span" fontWeight="600" color="theme-primary">
                  emphasized
                </Text>{' '}
                text
              </Text>
            </Vertical>
          }
        />
      </View>
    </Vertical>
  );
};
```

### **Index**

```tsx
export * from './default';
export * from './designSystem';
export * from './icon';
export * from './styles';
export * from './variant';
export * from './darkMode';
```

### **Index**

```tsx
export * from './default';
export * from './icon';
export * from './styles';
export * from './variant';
```

### **Styles**

```tsx
import React from 'react';
import { Alert } from '../Alert';

export const StylesDemo = () => (
  <Alert
    title={'Heads Up!'}
    description={'You can add components to your app using the cli.'}
    views={{
      container: { backgroundColor: 'black' },
      title: { color: 'white' },
      description: { color: 'white' },
      icon: { color: 'white' },
    }}
  />
);
```