Alert

import { Alert } from "@prisma/eclipse";

export function BasicAlert() {
  return (
    <Alert>
      This is a basic alert message with regular content.
    </Alert>
  );
}

import { Alert } from "@prisma/eclipse";

export function AlertVariants() {
  return (
    <>
      <Alert variant="ppg">
        PPG variant - for general information and tips.
      </Alert>

      <Alert variant="success">
        Success variant - for positive confirmations.
      </Alert>

      <Alert variant="warning">
        Warning variant - for important notices.
      </Alert>

      <Alert variant="error">
        Error variant - for errors and critical information.
      </Alert>
    </>
  );
}

import { Alert } from "@prisma/eclipse";

export function CustomIconAlerts() {
  return (
    <>
      <Alert variant="ppg" icon={<i className="fa-regular fa-terminal h-4 w-4 mt-0.5" />}>
        Alert with a custom terminal icon.
      </Alert>

      <Alert variant="error" icon={<i className="fa-regular fa-circle-exclamation h-4 w-4 mt-0.5" />}>
        Alert with a custom error icon.
      </Alert>

      <Alert variant="success" icon={<i className="fa-regular fa-check h-4 w-4 mt-0.5" />}>
        Alert with a custom success icon.
      </Alert>

      <Alert variant="warning" icon={<i className="fa-regular fa-triangle-exclamation h-4 w-4 mt-0.5" />}>
        Alert with a custom warning icon.
      </Alert>

      <Alert variant="ppg" icon={null}>
        Alert without an icon.
      </Alert>
    </>
  );
}

<Alert variant="error" icon={<i className="fa-regular fa-circle-exclamation h-4 w-4 mt-0.5" />}>
  Alert with a custom error icon.
</Alert>

<Alert variant="success" icon={<i className="fa-regular fa-check h-4 w-4 mt-0.5" />}>
  Alert with a custom success icon.
</Alert>

<Alert variant="warning" icon={<i className="fa-regular fa-triangle-exclamation h-4 w-4 mt-0.5" />}>
  Alert with a custom warning icon.
</Alert>

<Alert variant="ppg" icon={null}>
  Alert without an icon.
</Alert>

import { Alert } from "@prisma/eclipse";

export function RichContentAlert() {
  return (
    <Alert variant="ppg">
      **Getting Started**

      Follow these steps to get started:

      1. Install the package: `npm install @prisma/client`
      2. Initialize Prisma: `npx prisma init`
      3. Define your schema and run migrations

      For more information, visit the [documentation](https://prisma.io/docs).
    </Alert>
  );
}

import { Alert } from "@prisma/eclipse";

export function ComplexAlerts() {
  return (
    <>
      <Alert variant="warning">
        ### Important Update

        This feature will be deprecated in version 6.0. Please migrate to the new API:

        - Old: `prisma.user.findMany()`
        - New: `prisma.user.findMany({ where: {} })`
      </Alert>

      <Alert variant="error">
        **Connection Error**

        Unable to connect to the database. Please check:

        - Database credentials in `.env`
        - Database server is running
        - Network connectivity
      </Alert>

      <Alert variant="success">
        Your migration was successful! The following changes were applied:

        - Created table `User`
        - Added index on `email` column
        - Updated foreign key constraints
      </Alert>
    </>
  );
}

:::ppg
This is a PPG alert using MDX alert syntax.

## You can use any MDX content

Including lists, code, and more!
:::

:::error
This is an error alert.
:::

:::success
This is a success alert.
:::

:::warning
This is a warning alert.
:::

:::info
Maps to PPG variant.
:::

:::note
Maps to PPG variant.
:::

:::tip
Maps to success variant.
:::

:::danger
Maps to error variant.
:::