import { Toast, ToastToggle } from 'flowbite-react'
import { HiFire } from 'react-icons/hi'

const DefaultToastCode = () => {
  return (
    <>
      <div>
        <Toast>
          <div className='inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-100 text-cyan-500 dark:bg-cyan-800 dark:text-cyan-200'>
            <HiFire className='h-5 w-5' />
          </div>
          <div className='ml-3 text-sm font-normal'>Set yourself free.</div>
          <ToastToggle />
        </Toast>
      </div>
    </>
  )
}

export default DefaultToastCode

import { Toast, ToastToggle } from 'flowbite-react'

const TostWithIButtonCode = () => {
  return (
    <>
      <div>
        <Toast>
          <div className='text-sm font-normal'>Conversation archived.</div>
          <div className='ml-auto flex items-center space-x-2'>
            <a
              href='#'
              className='rounded-lg p-1.5 text-sm font-medium text-primary hover:bg-cyan-100 dark:text-primary dark:hover:bg-gray-700'>
              Undo
            </a>
            <ToastToggle />
          </div>
        </Toast>
      </div>
    </>
  )
}

export default TostWithIButtonCode

import { Toast, Button, ToastToggle } from 'flowbite-react'
import { MdLoop } from 'react-icons/md'

const InteractiveToastCode = () => {
  return (
    <>
      <Toast>
        <div className='flex items-start'>
          <div className='inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-100 text-cyan-500 dark:bg-cyan-900 dark:text-cyan-300'>
            <MdLoop className='h-5 w-5' />
          </div>
          <div className='ml-3 text-sm font-normal'>
            <span className='mb-1 text-sm font-semibold text-gray-900 dark:text-white'>
              Update available
            </span>
            <div className='mb-2 text-sm font-normal'>
              A new software version is available for download.A new software
              version is available for download.A new software version is
              available for download.A new software version is available for
            </div>
            <div className='flex gap-2'>
              <div className='w-auto'>
                <Button size='xs' color='primary'>
                  Update
                </Button>
              </div>
              <div className='w-auto'>
                <Button color='light' size='xs'>
                  Not now
                </Button>
              </div>
            </div>
          </div>
          <ToastToggle />
        </div>
      </Toast>
    </>
  )
}

export default InteractiveToastCode

import { Toast, ToastToggle } from 'flowbite-react'
import { HiCheck, HiExclamation, HiX } from 'react-icons/hi'

const ToastColorsCode = () => {
  return (
    <>
      <div className='flex flex-col gap-4'>
        <Toast>
          <div className='inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200'>
            <HiCheck className='h-5 w-5' />
          </div>
          <div className='ml-3 text-sm font-normal'>
            Item moved successfully.
          </div>
          <ToastToggle />
        </Toast>
        <Toast>
          <div className='inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200'>
            <HiX className='h-5 w-5' />
          </div>
          <div className='ml-3 text-sm font-normal'>Item has been deleted.</div>
          <ToastToggle />
        </Toast>
        <Toast>
          <div className='inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200'>
            <HiExclamation className='h-5 w-5' />
          </div>
          <div className='ml-3 text-sm font-normal'>
            Improve password difficulty.
          </div>
          <ToastToggle />
        </Toast>
      </div>
    </>
  )
}

export default ToastColorsCode

'use client'

import { Toast } from 'flowbite-react'
import { FaTelegramPlane } from 'react-icons/fa'

const FeedbackToastCode = () => {
  return (
    <>
      <Toast>
        <FaTelegramPlane className='h-5 w-5 text-primary dark:text-primary' />
        <div className='pl-4 text-sm font-normal'>
          Message sent successfully.
        </div>
      </Toast>
    </>
  )
}

export default FeedbackToastCode

'use client'

import { Button, Toast, ToastToggle } from 'flowbite-react'
import React, { useState } from 'react'
import { HiFire } from 'react-icons/hi'

const DismissalToastCode = () => {
  const [showToast, setShowToast] = useState(false)
  return (
    <>
      <div className='space-y-4'>
        <Button onClick={() => setShowToast((state) => !state)} color='primary'>
          Toggle toast
        </Button>
        {showToast && (
          <Toast>
            <div className='inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-100 text-cyan-500 dark:bg-cyan-800 dark:text-cyan-200'>
              <HiFire className='h-5 w-5' />
            </div>
            <div className='ml-3 text-sm font-normal'>Set yourself free.</div>
            <ToastToggle onDismiss={() => setShowToast(false)} />
          </Toast>
        )}
      </div>
    </>
  )
}

export default DismissalToastCode