Alert

import {Alert, AlertDescription, AlertTitle} from 'alinea/components'
import {IcRoundTranslate} from 'alinea/dashboard/icons'

export function AlertExample() {
  return (
    <Alert icon={IcRoundTranslate} style={{width: 300}}>
      <AlertTitle>Not translated yet</AlertTitle>
      <AlertDescription>
        This product page has no French version.
      </AlertDescription>
    </Alert>
  )
}

import {Alert, AlertDescription, AlertTitle} from 'alinea/components'
import {
  IcBaselineErrorOutline,
  IcRoundInfo,
  IcRoundWarning
} from 'alinea/dashboard/icons'

export function AlertVariantsExample() {
  return (
    <div style={{display: 'grid', gap: 12, width: 420}}>
      <Alert icon={IcRoundInfo}>
        <AlertTitle>Scheduled for Monday</AlertTitle>
        <AlertDescription>
          The autumn collection goes live at 9:00.
        </AlertDescription>
      </Alert>
      <Alert variant="warning" icon={IcRoundWarning}>
        <AlertTitle>Unpublished changes</AlertTitle>
        <AlertDescription>Tom Verbeke is editing this page.</AlertDescription>
      </Alert>
      <Alert variant="destructive" icon={IcBaselineErrorOutline}>
        <AlertTitle>Could not publish</AlertTitle>
        <AlertDescription>
          The path /linen-shirt is already in use.
        </AlertDescription>
      </Alert>
    </div>
  )
}

import {
  Alert,
  AlertActions,
  AlertDescription,
  AlertTitle,
  Button
} from 'alinea/components'
import {IcRoundHistory} from 'alinea/dashboard/icons'

export function AlertActionsExample() {
  return (
    <Alert icon={IcRoundHistory} style={{width: 420}}>
      <AlertTitle>A newer draft exists</AlertTitle>
      <AlertDescription>
        Maya Janssens saved a draft of “Oak dining chair” 5 minutes ago.
      </AlertDescription>
      <AlertActions>
        <Button size="sm" variant="outline">
          Discard
        </Button>
        <Button size="sm" color="primary">
          Open draft
        </Button>
      </AlertActions>
    </Alert>
  )
}