import { useState } from 'react'
import { Transition } from '@headlessui/react'

const BasicTransactionCode = () => {
  const [open, setOpen] = useState(false)

  return (
    <div>
      <button
        onClick={() => setOpen((open) => !open)}
        className='ui-button bg-primary justify-center'>
        Toggle Transition
      </button>
      <Transition show={open}>
        <div className='transition duration-300 ease-in data-[closed]:opacity-0 bg-lightgray dark:bg-darkbody rounded-sm shadow-md dark:shadow-dark-md p-4 w-72 '>
          I will fade in and out
        </div>
      </Transition>
    </div>
  )
}

export default BasicTransactionCode

import React, { useState } from 'react'
import { Transition } from '@headlessui/react'
import clsx from 'clsx'

const EnterLeaveTransitionCode = () => {
  const [open, setOpen] = useState(false)

  return (
    <div>
      <div className='relative'>
        <button
          onClick={() => setOpen((open) => !open)}
          className='ui-button bg-secondary justify-center text-white'>
          Enter Leave Transition
        </button>
        <Transition show={open}>
          <div
            className={clsx([
              // Base styles
              'absolute transition ease-in-out bg-white dark:bg-dark-header rounded-sm shadow-md dark:shadow-dark-md p-4 w-72 mt-1',
              // Shared closed styles
              'data-[closed]:opacity-0 ',
              // Entering styles
              'data-[enter]:duration-100 data-[enter]:data-[closed]:-translate-x-full',
              // Leaving styles
              'data-[leave]:duration-300 data-[leave]:data-[closed]:translate-x-full',
            ])}>
            I will enter from the left and leave to the right
          </div>
        </Transition>
      </div>
    </div>
  )
}

export default EnterLeaveTransitionCode

import { useState } from 'react'
import { Transition, TransitionChild } from '@headlessui/react'

const CoordinationCode = () => {
  const [open, setOpen] = useState(false)

  return (
    <div>
      <button
        onClick={() => setOpen(true)}
        className='ui-button bg-success justify-center'>
        Coordinating Transition
      </button>
      <Transition show={open}>
        {/* Backdrop */}
        <TransitionChild>
          <div
            className='fixed inset-0 bg-black/30 transition duration-300 data-[closed]:opacity-0'
            onClick={() => setOpen(false)}
          />
        </TransitionChild>

        {/* Slide-in sidebar */}
        <TransitionChild>
          <div className='fixed inset-y-0 z-[50] left-0 w-80 bg-white dark:bg-dark-header transition duration-300 data-[closed]:-translate-x-full p-4'>
            <h3 className='text-lg mb-2'>This Is Sidebar</h3>
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into
              electronic typesetting, remaining essentially unchanged.
            </p>
          </div>
        </TransitionChild>
      </Transition>
    </div>
  )
}

export default CoordinationCode

import { useState } from 'react'
import { Button, Transition } from '@headlessui/react'
import { Icon } from '@iconify/react'
import clsx from 'clsx'

const ClickTransitionCode = () => {
  let [isShowing, setIsShowing] = useState(true)

  return (
    <div>
      <div className='flex flex-col items-center'>
        <div className='size-[6.25rem]'>
          <Transition show={isShowing}>
            <div
              className={clsx(
                'size-full rounded-xl bg-primary shadow-lg transition duration-400',
                'data-[closed]:scale-50 data-[closed]:rotate-[-120deg] data-[closed]:opacity-0',
                'data-[leave]:duration-200 data-[leave]:ease-in-out',
                'data-[leave]:data-[closed]:scale-95 data-[leave]:data-[closed]:rotate-[0deg]'
              )}
            />
          </Transition>
        </div>

        <Button
          onClick={() => {
            setIsShowing(false)
            setTimeout(() => setIsShowing(true), 500)
          }}
          className=' transition data-[hover]:scale-105 ui-button justify-center bg-secondary text-black gap-3 mt-4'>
          <Icon icon='solar:refresh-bold' height={20} />
          <span>Click to transition</span>
        </Button>
      </div>
    </div>
  )
}

export default ClickTransitionCode

import { useState } from 'react'
import { Transition, Button } from '@headlessui/react'

const IntialTransitionCode = () => {
  const [open, setOpen] = useState(true)

  return (
    <div>
      <div className='flex flex-col items-center'>
        <Transition show={open} appear={true}>
          <div className='transition duration-300 ease-in data-[closed]:opacity-0 bg-lightgray dark:bg-dark-header rounded-sm shadow-md dark:shadow-dark-md p-4 w-72'>
            I will fade in on initial render Lorem Ipsum is simply dummy text of
            the printing and typesetting industry.
          </div>
        </Transition>
        <Button
          onClick={() => setOpen((open) => !open)}
          className='transition data-[hover]:scale-105 ui-button justify-center bg-info gap-3 mt-5  '>
          On Intial Transition
        </Button>
      </div>
    </div>
  )
}

export default IntialTransitionCode