import {
  Disclosure,
  DisclosureButton,
  DisclosurePanel,
} from "@headlessui/react";
import { Icon } from "@iconify/react";


const BasicDisclosureCode = () => {
  return (
    
    <>
    <div className="mt-4">
        <div className="mx-auto w-full  divide-y divide-border dark:divide-darkborder rounded-xl bg-lightgray dark:bg-dark">
          <Disclosure as="div" className="py-4 px-6" defaultOpen={true}>
            <DisclosureButton className="group flex w-full items-center justify-between">
              <span className="text-sm font-medium text-ld group-data-hover:text-primary">
                What is your refund policy?
              </span>
              <Icon
                icon="solar:alt-arrow-down-outline"
                height={18}
                className="size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"
              />
            </DisclosureButton>
            <DisclosurePanel className="mt-2 text-xs text-bodytext">
              Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete
              text) is dummy text that is not meant to mean anything. It is used
              as a placeholder in magazine
            </DisclosurePanel>
          </Disclosure>
          <Disclosure as="div" className="py-4 px-6">
            <DisclosureButton className="group flex w-full items-center justify-between">
              <span className="text-sm font-medium text-ld group-data-hover:text-primary">
                Can I reserve a magazine?
              </span>
              <Icon
                icon="solar:alt-arrow-down-outline"
                height={18}
                className="size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"
              />
            </DisclosureButton>
            <DisclosurePanel className="mt-2 text-xs text-bodytext">
              Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete
              text) is dummy text that is not meant to mean anything. It is used
              as a placeholder in magazine
            </DisclosurePanel>
          </Disclosure>
          <Disclosure as="div" className="py-4 px-6">
            <DisclosureButton className="group flex w-full items-center justify-between">
              <span className="text-sm font-medium text-ld group-data-hover:text-primary">
                Do I have the right to return an item?
              </span>
              <Icon
                icon="solar:alt-arrow-down-outline"
                height={18}
                className="size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"
              />
            </DisclosureButton>
            <DisclosurePanel className="mt-2 text-xs text-bodytext">
              Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete
              text) is dummy text that is not meant to mean anything. It is used
              as a placeholder in magazine
            </DisclosurePanel>
          </Disclosure>
        </div>
    </div>
    </>
  )
}

export default BasicDisclosureCode

import {
  Disclosure,
  DisclosureButton,
  DisclosurePanel,
} from "@headlessui/react";
import { Icon } from "@iconify/react";


const TransitionCode = () => {
  return (
    <>
    <div className="mt-4">
        <div className="mx-auto w-full divide-y divide-border dark:divide-darkborder rounded-xl bg-lightgray dark:bg-dark">
          <Disclosure as="div" className="py-4 px-6" defaultOpen={true}>
            <DisclosureButton className="group flex w-full items-center justify-between">
              <span className="text-sm font-medium text-ld group-data-hover:text-primary">
                What is your refund policy?
              </span>
              <Icon
                icon="solar:alt-arrow-down-outline"
                height={18}
                className="size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"
              />
            </DisclosureButton>
            <DisclosurePanel
              transition
              className="mt-2 text-xs text-bodytext origin-top transition duration-200 ease-out data-closed:-translate-y-6 data-closed:opacity-0"
            >
             Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete
              text) is dummy text that is not meant to mean anything. It is used
              as a placeholder in magazine
            </DisclosurePanel>
          </Disclosure>
          <Disclosure as="div" className="py-4 px-6">
            <DisclosureButton className="group flex w-full items-center justify-between">
              <span className="text-sm font-medium text-ld group-data-hover:text-primary">
                Can I reserve a magazine?
              </span>
              <Icon
                icon="solar:alt-arrow-down-outline"
                height={18}
                className="size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"
              />
            </DisclosureButton>
            <DisclosurePanel
              transition
              className="mt-2 text-xs text-bodytext origin-top transition duration-200 ease-out data-closed:-translate-y-6 data-closed:opacity-0"
            >
              Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete
              text) is dummy text that is not meant to mean anything. It is used
              as a placeholder in magazine
            </DisclosurePanel>
          </Disclosure>
          <Disclosure as="div" className="py-4 px-6">
            <DisclosureButton className="group flex w-full items-center justify-between">
              <span className="text-sm font-medium text-ld group-data-hover:text-primary">
                Do I have the right to return an item?
              </span>
              <Icon
                icon="solar:alt-arrow-down-outline"
                height={18}
                className="size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"
              />
            </DisclosureButton>
            <DisclosurePanel
              transition
              className="mt-2 text-xs text-bodytext origin-top transition duration-200 ease-out data-closed:-translate-y-6 data-closed:opacity-0"
            >
             Lorem ipsum dolor sit amet, consectetur adipisici elit…’ (complete
              text) is dummy text that is not meant to mean anything. It is used
              as a placeholder in magazine
            </DisclosurePanel>
          </Disclosure>
        </div>
    </div>
    </>
  );
};

export default TransitionCode;

import MyCustomLink from "../MyLink";
import { Icon } from "@iconify/react";
import {
  Disclosure,
  DisclosureButton,
  DisclosurePanel,
  CloseButton,
} from "@headlessui/react";

const ClosingDisclosureCode = () => {
  return (
    <>
    <div className="mt-4">
      <Disclosure>
          <DisclosureButton className="group bg-primary ui-button">
            Open mobile menu
            <Icon
              icon="solar:alt-arrow-down-outline"
              height={18}
              className="size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"
            />
          </DisclosureButton>
          <DisclosurePanel className="px-4 py-1">
            <CloseButton as={MyCustomLink}>Go with your link</CloseButton>
          </DisclosurePanel>
        </Disclosure>
    </div>
    </>
  )
}

export default ClosingDisclosureCode

import {
  Disclosure,
  DisclosureButton,
  DisclosurePanel,
} from "@headlessui/react";
import { Icon } from "@iconify/react";
import { forwardRef } from "react";
let MyCustomButton = forwardRef(function (props: any, ref: any) {
  return <button className="..." ref={ref} {...props} />;
});


const RenderDiclosureCode = () => {
  return (
    <>
    <div className="mt-4">
      <Disclosure as="div">
          <DisclosureButton
            as={MyCustomButton}
            className="group bg-secondary ui-button"
          >
            What languages do you support?
            <Icon
              icon="solar:alt-arrow-down-outline"
              height={18}
              className="size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"
            />
          </DisclosureButton>
          <DisclosurePanel as="ul" className="px-4 py-3">
            <li className="py-1">HTML</li>
            <li className="py-1">CSS</li>
            <li className="py-1">JavaScript</li>
          </DisclosurePanel>
        </Disclosure>
    </div>
    </>
  )
}

export default RenderDiclosureCode

import {
  Disclosure,
  DisclosureButton,
  DisclosurePanel,
} from "@headlessui/react";
import { AnimatePresence, motion } from "framer-motion";
import { Icon } from "@iconify/react";


const FramerMotionCode = () => {
  return (
    <>
    <div className="mt-4">
      <div className="mx-auto w-full  divide-y divide-border dark:divide-darkborder rounded-xl bg-lightgray dark:bg-dark">
          <Disclosure as="div" className="py-4 px-6">
            {({ open }) => (
              <>
                <DisclosureButton className="group flex w-full items-center justify-between">
                  <span className="text-sm font-medium text-ld group-data-hover:text-primary">
                    What is your refund policy?
                  </span>
                  <Icon
                    icon="solar:alt-arrow-down-outline"
                    height={18}
                    className="size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"
                  />
                </DisclosureButton>
                <div className="overflow-hidden">
                  <AnimatePresence>
                    {open && (
                      <DisclosurePanel
                        static
                        as={motion.div}
                        initial={{ opacity: 0, y: -24 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: -24 }}
                        className="origin-top text-xs mt-2 text-bodytext"
                      >
                        Lorem ipsum dolor sit amet, consectetur adipisici elit…’
                        (complete text) is dummy text that is not meant to mean
                        anything. It is used as a placeholder in magazine
                        layouts,Lorem ipsum dolor sit amet, consectetur
                        adipisici elit…’ (complete text) is dummy text that is
                        not meant to mean anything. It is used as a placeholder
                        in magazine layouts,
                      </DisclosurePanel>
                    )}
                  </AnimatePresence>
                </div>
              </>
            )}
          </Disclosure>
          <Disclosure as="div" className="py-4 px-6">
            {({ open }) => (
              <>
                <DisclosureButton className="group flex w-full items-center justify-between">
                  <span className="text-sm font-medium text-ld group-data-hover:text-primary">
                    Can I reserve a magazine?
                  </span>
                  <Icon
                    icon="solar:alt-arrow-down-outline"
                    height={18}
                    className="size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"
                  />
                </DisclosureButton>
                <div className="overflow-hidden">
                  <AnimatePresence>
                    {open && (
                      <DisclosurePanel
                        static
                        as={motion.div}
                        initial={{ opacity: 0, y: -24 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: -24 }}
                        className="origin-top text-xs text-bodytext mt-2"
                      >
                        Lorem ipsum dolor sit amet, consectetur adipisici elit…’
                        (complete text) is dummy text that is not meant to mean
                        anything. It is used as a placeholder in magazine
                        layouts,Lorem ipsum dolor sit amet, consectetur
                        adipisici elit…’ (complete text) is dummy text that is
                        not meant to mean anything. It is used as a placeholder
                        in magazine layouts,
                      </DisclosurePanel>
                    )}
                  </AnimatePresence>
                </div>
              </>
            )}
          </Disclosure>
          <Disclosure as="div" className="py-4 px-6">
            {({ open }) => (
              <>
                <DisclosureButton className="group flex w-full items-center justify-between">
                  <span className="text-sm font-medium text-ld group-data-hover:text-primary">
                    Do I have the right to return an item?
                  </span>
                  <Icon
                    icon="solar:alt-arrow-down-outline"
                    height={18}
                    className="size-5 fill-white/60 group-data-hover:fill-white/50 group-data-open:rotate-180"
                  />
                </DisclosureButton>
                <div className="overflow-hidden">
                  <AnimatePresence>
                    {open && (
                      <DisclosurePanel
                        static
                        as={motion.div}
                        initial={{ opacity: 0, y: -24 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: -24 }}
                        className="origin-top text-xs text-bodytext mt-2"
                      >
                        Lorem ipsum dolor sit amet, consectetur adipisici elit…’
                        (complete text) is dummy text that is not meant to mean
                        anything. It is used as a placeholder in magazine
                        layouts,Lorem ipsum dolor sit amet, consectetur
                        adipisici elit…’ (complete text) is dummy text that is
                        not meant to mean anything. It is used as a placeholder
                        in magazine layouts,
                      </DisclosurePanel>
                    )}
                  </AnimatePresence>
                </div>
              </>
            )}
          </Disclosure>
        </div>
    </div>
    </>
  );
};

export default FramerMotionCode;