import React from 'react';
import { Alert, AlertDescription } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <Alert>
      <AlertDescription>This is default Alert.</AlertDescription>
    </Alert>
  );
}

import React from 'react';
import { Alert, AlertDescription } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-col items-center justify-center gap-2'>
      <Alert severity='success'>
        <AlertDescription>This is a success Alert.</AlertDescription>
      </Alert>
      <Alert severity='info'>
        <AlertDescription>This is a info Alert.</AlertDescription>
      </Alert>
      <Alert severity='warning'>
        <AlertDescription>This is a warning Alert.</AlertDescription>
      </Alert>
      <Alert severity='error'>
        <AlertDescription>This is a error Alert.</AlertDescription>
      </Alert>
    </div>
  );
}

import React from 'react';
import { Alert, AlertDescription } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-2">
      <Alert severity='success' variant='filled'>
        <AlertDescription>This is a success Alert.</AlertDescription>
      </Alert>
      <Alert severity='info' variant='filled'>
        <AlertDescription>This is a info Alert.</AlertDescription>
      </Alert>
      <Alert severity='warning' variant='filled'>
        <AlertDescription>This is a warning Alert.</AlertDescription>
      </Alert>
      <Alert severity='error' variant='filled'>
        <AlertDescription>This is a error Alert.</AlertDescription>
      </Alert>
    </div>
  );
}

import React from 'react';
import { Alert, AlertDescription } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-2">
      <Alert severity='success' variant='outlined'>
        <AlertDescription>This is a success Alert.</AlertDescription>
      </Alert>
      <Alert severity='info' variant='outlined'>
        <AlertDescription>This is a info Alert.</AlertDescription>
      </Alert>
      <Alert severity='warning' variant='outlined'>
        <AlertDescription>This is a warning Alert.</AlertDescription>
      </Alert>
      <Alert severity='error' variant='outlined'>
        <AlertDescription>This is a error Alert.</AlertDescription>
      </Alert>
    </div>
  );
}

import React from 'react';
import { Alert, AlertTitle, AlertDescription } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-col items-center justify-center gap-2'>
      <Alert severity='success'>
        <AlertTitle>Success</AlertTitle> 
        <AlertDescription>This is a success Alert with an encouraging title.</AlertDescription>
      </Alert>
      <Alert severity='info'>
        <AlertTitle>Info</AlertTitle>
        <AlertDescription>This is a info Alert with an information title.</AlertDescription>
      </Alert>
      <Alert severity='warning'>
        <AlertTitle>Warning</AlertTitle>
        <AlertDescription>This is a warning Alert with an cautious title.</AlertDescription>
      </Alert>
      <Alert severity='error'>
        <AlertTitle>Error</AlertTitle>
        <AlertDescription>This is a error Alert with an scary title.</AlertDescription>
      </Alert>
    </div>
  );
}

import React from 'react';
import { Alert, AlertTitle, AlertDescription } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-col items-center justify-center gap-2'>
      <Alert severity='success'>
        <AlertTitle variant='h1'>H1 Heading</AlertTitle> 
        <AlertDescription>This Alert uses h1 heading as Alert Title.</AlertDescription>
      </Alert>
      <Alert severity='info'>
        <AlertTitle variant='h2'>H2 Heading</AlertTitle>
        <AlertDescription>This Alert uses h1 heading as Alert Title.</AlertDescription>
      </Alert>
      <Alert severity='warning'>
        <AlertTitle variant='h3'>h3 Heading</AlertTitle>
        <AlertDescription>This Alert uses h1 heading as Alert Title.</AlertDescription>
      </Alert>
      <Alert severity='error'>
        <AlertTitle component='p'>P Component</AlertTitle>
        <AlertDescription>This Alert uses paragraph tag as Alert Title.</AlertDescription>
      </Alert>
    </div>
  );
}

"use client"
 
import React from 'react';
import { Alert, AlertDescription, Button } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-col items-center justify-center gap-2'>
      <Alert severity='warning' onClose={() => {}}>
        <AlertDescription>This Aleet displays the default close icon.</AlertDescription>
      </Alert>
      <Alert severity='success' action={<Button size='sm'>undo</Button>}>
        <AlertDescription>This Alert uses a button component for its action.</AlertDescription>
      </Alert>
    </div>
  );
}

import React from 'react';
import { Alert, AlertDescription } from 'archi-ui'
import { CheckCheck } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-col items-center justify-center gap-2'>
      <Alert icon={<CheckCheck />} severity='success'>
        <AlertDescription>This success Alert has a custom icon.</AlertDescription>
      </Alert>
      <Alert icon={false} severity='success'>
        <AlertDescription>This Alert has no icon</AlertDescription>
      </Alert>
    </div>
  );
}

import React from 'react';
import { Alert } from 'archi-ui'
import { CheckCircle } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-col items-center justify-center gap-2'>
      <Alert
        severity='warning'
        iconMapping={{
          warning: <CheckCircle />,
        }}
      >
        This warning Alert uses `iconMapping` to override the default icon.
      </Alert>
    </div>
  );
}