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

const BasicTransactionCode = () => {
  const [open, setOpen] = useState(false)
  return (
    <>
    <div className="mt-4">
      <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-dark 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 { Transition } from "@headlessui/react";
import clsx from "clsx";
import  { useState } from "react";


const EnterLeaveTransitionCode = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
    <div className="mt-4">
       <div className="relative">
          <button onClick={() => setOpen((open) => !open)} className="ui-button bg-secondary justify-center">Enter Leave Transition</button>
          <Transition show={open}>
            <div
              className={clsx([
                // Base styles
                "absolute z-50 transition ease-in-out bg-white dark:bg-dark 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  { useContext,  } from "react";
import { DashboardContext } from "src/context/DashboardContext/DashboardContext";


const CoordinationCode = () => {
  const {setIsSidebarOpen} = useContext(DashboardContext);
  return (
    <>
    <div className="mt-4">
      <button
          onClick={() => setIsSidebarOpen(true)}
          className="ui-button bg-success justify-center"
        >
          Coordinating Transition
        </button>
    </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 className="mt-4">
      <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 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 className="mt-4">
      <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 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