import React from 'react'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Terminal } from 'lucide-react'

const BasicAlertCode = () => {
  return (
    <>
      <div className='flex flex-col gap-3 mt-4'>
        <Alert variant='primary'>
          <Terminal className='h-4 w-4' />
          <AlertTitle className='text-white'>Primary Alert!</AlertTitle>
          <AlertDescription>
            Use our highly customizable component
          </AlertDescription>
        </Alert>
        <Alert variant='secondary'>
          <Terminal className='h-4 w-4' />
          <AlertTitle className='text-white'>Secondary Alert!</AlertTitle>
          <AlertDescription>
            Use our highly customizable component
          </AlertDescription>
        </Alert>
        <Alert variant='success'>
          <Terminal className='h-4 w-4' />
          <AlertTitle className='text-white'>Success Alert!</AlertTitle>
          <AlertDescription>
            Use our highly customizable component
          </AlertDescription>
        </Alert>
        <Alert variant='warning'>
          <Terminal className='h-4 w-4' />
          <AlertTitle className='text-white'>Warning Alert!</AlertTitle>
          <AlertDescription>
            Use our highly customizable component
          </AlertDescription>
        </Alert>
        <Alert variant='error'>
          <Terminal className='h-4 w-4' />
          <AlertTitle className='text-white'>Error Alert!</AlertTitle>
          <AlertDescription>
            Use our highly customizable component
          </AlertDescription>
        </Alert>
        <Alert variant='info'>
          <Terminal className='h-4 w-4' />
          <AlertTitle className='text-white'>Info Alert!</AlertTitle>
          <AlertDescription>
            Use our highly customizable component
          </AlertDescription>
        </Alert>
      </div>
    </>
  )
}

export default BasicAlertCode

import React from 'react'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Terminal } from 'lucide-react'

const BasicAlertCode = () => {
  return (
    <>
      <div className='flex flex-col gap-3 mt-4'>
        <Alert variant='lightprimary'>
          <Terminal className='h-4 w-4' />
          <AlertTitle className='text-primary'>Primary Alert!</AlertTitle>
          <AlertDescription>
            Use our highly customizable component
          </AlertDescription>
        </Alert>
        <Alert variant='lightsecondary'>
          <Terminal className='h-4 w-4' />
          <AlertTitle className='text-secondary'>Secondary Alert!</AlertTitle>
          <AlertDescription>
            Use our highly customizable component
          </AlertDescription>
        </Alert>
        <Alert variant='lightsuccess'>
          <Terminal className='h-4 w-4' />
          <AlertTitle className='text-success'>Success Alert!</AlertTitle>
          <AlertDescription>
            Use our highly customizable component
          </AlertDescription>
        </Alert>
        <Alert variant='lightwarning'>
          <Terminal className='h-4 w-4' />
          <AlertTitle className='text-warning'>Warning Alert!</AlertTitle>
          <AlertDescription>
            Use our highly customizable component
          </AlertDescription>
        </Alert>
        <Alert variant='lighterror'>
          <Terminal className='h-4 w-4' />
          <AlertTitle className='text-error'>Error Alert!</AlertTitle>
          <AlertDescription>
            Use our highly customizable component
          </AlertDescription>
        </Alert>
        <Alert variant='lightinfo'>
          <Terminal className='h-4 w-4' />
          <AlertTitle className='text-info'>Info Alert!</AlertTitle>
          <AlertDescription>
            Use our highly customizable component
          </AlertDescription>
        </Alert>
      </div>
    </>
  )
}

export default BasicAlertCode