Alert

import { Alert } from '@akitectio/aki-ui'

function BasicAlert() {
  return (
    <div className="space-y-4">
      <Alert>
        This is a basic alert message.
      </Alert>
      <Alert variant="success">
        Operation completed successfully!
      </Alert>
      <Alert variant="danger">
        An error occurred while processing your request.
      </Alert>
      <Alert variant="warning">
        Please review your settings before continuing.
      </Alert>
    </div>
  )
}

<div className="space-y-4">
  <Alert variant="primary">Primary: Important information</Alert>
  <Alert variant="secondary">Secondary: General information</Alert>
  <Alert variant="success">Success: Action completed</Alert>
  <Alert variant="danger">Error: Something went wrong</Alert>
  <Alert variant="warning">Warning: Caution needed</Alert>
  <Alert variant="info">Info: Helpful information</Alert>
  <Alert variant="light">Light: Subtle information</Alert>
  <Alert variant="dark">Dark: High contrast display</Alert>
</div>

<div className="space-y-4">
  <Alert variant="success" showIcon>
    Your account has been created successfully!
  </Alert>
  <Alert variant="danger" showIcon>
    Failed to upload file. Please try again.
  </Alert>
  <Alert variant="warning" showIcon>
    Your session will expire in 5 minutes.
  </Alert>
  <Alert variant="info" showIcon>
    New features are available in the latest update.
  </Alert>
</div>

import { useState } from 'react'
import { Alert } from '@akitectio/aki-ui'

function DismissibleAlert() {
  const [showAlert, setShowAlert] = useState(true)

  return (
    <div>
      {showAlert && (
        <Alert
          variant="info"
          dismissible
          onDismiss={() => setShowAlert(false)}
          showIcon
        >
          This alert can be dismissed by clicking the X button.
        </Alert>
      )}
      {!showAlert && (
        <button onClick={() => setShowAlert(true)}>
          Show Alert Again
        </button>
      )}
    </div>
  )
}

<div className="space-y-4">
  <Alert
    variant="success"
    icon={<span className="text-xl">🎉</span>}
  >
    Congratulations! You've completed all tasks.
  </Alert>
  <Alert
    variant="info"
    icon={<span className="text-xl">💡</span>}
  >
    Pro tip: Use keyboard shortcuts to work faster.
  </Alert>
  <Alert
    variant="warning"
    icon={<span className="text-xl">⚠️</span>}
  >
    Your storage is almost full. Consider upgrading your plan.
  </Alert>
</div>

<div className="space-y-4">
  <Alert variant="primary" borderLeft>
    Alert with left border accent.
  </Alert>
  <Alert variant="success" borderLeft showIcon>
    Success alert with left border and icon.
  </Alert>
  <Alert variant="danger" borderLeft>
    Error alert with left border styling.
  </Alert>
</div>

<Alert variant="success" showIcon dismissible>
  <div>
    <h4 className="font-semibold mb-2">Account Verified Successfully!</h4>
    <p className="mb-3">
      Your email address has been verified. You now have access to all premium features.
    </p>
    <div className="flex gap-2">
      <button className="px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700">
        Get Started
      </button>
      <button className="px-3 py-1 border border-green-600 text-green-600 text-sm rounded hover:bg-green-50">
        Learn More
      </button>
    </div>
  </div>
</Alert>