import { useState } from 'react'
import { Button, Drawer, DrawerHeader, DrawerItems } from 'flowbite-react'

const DefaultDrawerCode = () => {
  const [isOpen, setIsOpen] = useState(false)
  const handleClose = () => setIsOpen(false)

  return (
    <div>
      <Button color={'primary'} onClick={() => setIsOpen(true)}>
        Show Drawer
      </Button>
      <Drawer open={isOpen} onClose={handleClose} className='p-4'>
        <DrawerHeader title='Drawer' />
        <DrawerItems>
          <p className='mb-6 text-sm'>
            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. It was popularised in the 1960s
            with the release of Letraset sheets
          </p>

          <Button color={'primary'}>Learn More</Button>
        </DrawerItems>
      </Drawer>
    </div>
  )
}

export default DefaultDrawerCode

import { useState } from 'react'
import {
  IconLayoutDashboard,
  IconShoppingBag,
  IconListDetails,
  IconLogin2,
  IconUserPlus,
  IconFiles,
  IconComponents,
  IconInfoSquareRounded,
} from '@tabler/icons-react'
import { HiSearch } from 'react-icons/hi'
import {
  Button,
  Drawer,
  DrawerHeader,
  DrawerItems,
  Sidebar,
  SidebarItem,
  SidebarItemGroup,
  SidebarItems,
  TextInput,
} from 'flowbite-react'

const NavigationDrawerCode = () => {
  const [isNavigation, setIsNavigation] = useState(false)
  const navigationClose = () => setIsNavigation(false)

  return (
    <div>
      <Button color={'secondary'} onClick={() => setIsNavigation(true)}>
        Show Navigation
      </Button>

      <Drawer open={isNavigation} onClose={navigationClose} className='p-4'>
        <DrawerHeader title='MENU' titleIcon={() => <></>} />
        <DrawerItems>
          <Sidebar
            aria-label='Sidebar with multi-level dropdown example'
            className='[&>div]:bg-transparent [&>div]:p-0'>
            <div className='flex h-full flex-col justify-between py-2'>
              <div>
                <form className='pb-3 md:hidden'>
                  <TextInput
                    icon={HiSearch}
                    type='search'
                    placeholder='Search'
                    required
                    size={32}
                  />
                </form>
                <SidebarItems>
                  <SidebarItemGroup>
                    <SidebarItem
                      href='/'
                      icon={() => <IconLayoutDashboard size={20} />}>
                      Dashboard
                    </SidebarItem>
                    <SidebarItem
                      href='/e-commerce/products'
                      icon={() => <IconShoppingBag size={20} />}>
                      Products
                    </SidebarItem>
                    <SidebarItem
                      href='/users/list'
                      icon={() => <IconListDetails size={20} />}>
                      Users list
                    </SidebarItem>
                    <SidebarItem
                      href='/authentication/sign-in'
                      icon={() => <IconLogin2 size={20} />}>
                      Sign in
                    </SidebarItem>
                    <SidebarItem
                      href='/authentication/sign-up'
                      icon={() => <IconUserPlus size={20} />}>
                      Sign up
                    </SidebarItem>
                  </SidebarItemGroup>
                  <SidebarItemGroup>
                    <SidebarItem
                      href='https://github.com/themesberg/flowbite-react/'
                      icon={() => <IconFiles size={20} />}>
                      Docs
                    </SidebarItem>
                    <SidebarItem
                      href='https://flowbite-react.com/'
                      icon={() => <IconComponents size={20} />}>
                      Components
                    </SidebarItem>
                    <SidebarItem
                      href='https://github.com/themesberg/flowbite-react/issues'
                      icon={() => <IconInfoSquareRounded size={20} />}>
                      Help
                    </SidebarItem>
                  </SidebarItemGroup>
                </SidebarItems>
              </div>
            </div>
          </Sidebar>
        </DrawerItems>
      </Drawer>
    </div>
  )
}

export default NavigationDrawerCode

import { useState } from 'react'
import { HiEnvelope } from 'react-icons/hi2'
import {
  Button,
  Drawer,
  DrawerHeader,
  DrawerItems,
  Label,
  Textarea,
  TextInput,
} from 'flowbite-react'

const ContactDrawerCode = () => {
  const [isContact, setIsContact] = useState(false)
  const contactClose = () => setIsContact(false)

  return (
    <div>
      <Button color={'success'} onClick={() => setIsContact(true)}>
        Show Contact Form
      </Button>
      <Drawer open={isContact} onClose={contactClose} className='p-4'>
        <DrawerHeader title='CONTACT US' titleIcon={HiEnvelope} />
        <DrawerItems>
          <form action='#'>
            <div className='mb-6 mt-3'>
              <Label htmlFor='email' className='mb-2 block'>
                Your email
              </Label>
              <TextInput
                id='email'
                name='email'
                placeholder='name@company.com'
                type='email'
                className='form-control'
              />
            </div>
            <div className='mb-6'>
              <Label htmlFor='subject' className='mb-2 block'>
                Subject
              </Label>
              <TextInput
                id='subject'
                name='subject'
                placeholder='Let us know how we can help you'
                className='form-control'
              />
            </div>
            <div className='mb-6'>
              <Label htmlFor='message' className='mb-2 block'>
                Your message
              </Label>
              <Textarea
                id='message'
                name='message'
                className='form-control-textarea'
                placeholder='Your message...'
                rows={4}
              />
            </div>
            <div className='mb-6'>
              <Button type='submit' className='w-full ' color='primary'>
                Send message
              </Button>
            </div>
            <p className='mb-2 text-sm text-gray-500 dark:text-gray-400'>
              <a href='mailto:info@company.com' className='hover:underline'>
                info@company.com
              </a>
            </p>
            <p className='text-sm text-gray-500 dark:text-gray-400'>
              <a href='tel:2124567890' className='hover:underline'>
                212-456-7890
              </a>
            </p>
          </form>
        </DrawerItems>
      </Drawer>
    </div>
  )
}

export default ContactDrawerCode

import { useState } from 'react'
import {
  Button,
  Drawer,
  Label,
  TextInput,
  Textarea,
  Datepicker,
  theme,
  Avatar,
  DrawerHeader,
  DrawerItems,
  AvatarGroup,
} from 'flowbite-react'
import { HiCalendar, HiUserAdd } from 'react-icons/hi'
import { twMerge } from 'tailwind-merge'

const FormDrawerCode = () => {
  const [isElement, setIsOpen] = useState(false)
  const elementClose = () => setIsOpen(false)

  return (
    <div>
      <Button color={'error'} onClick={() => setIsOpen(true)}>
        Show Drawer
      </Button>
      <Drawer open={isElement} onClose={elementClose} className='p-4'>
        <DrawerHeader title='NEW EVENT' titleIcon={HiCalendar} />
        <DrawerItems>
          <form action='#'>
            <div className='mb-6 mt-3'>
              <Label htmlFor='title' className='mb-2 block'>
                Title
              </Label>
              <TextInput
                id='title'
                name='title'
                placeholder='Apple Keynote'
                className='form-control'
              />
            </div>
            <div className='mb-6'>
              <Label htmlFor='description' className='mb-2 block'>
                Description
              </Label>
              <Textarea
                id='description'
                name='description'
                placeholder='Write event description...'
                rows={4}
                className='form-control'
              />
            </div>
            <div className='mb-6'>
              <Datepicker className='form-control' />
            </div>
            <div className='mb-6'>
              <TextInput
                id='guests'
                name='guests'
                placeholder='Add guest email'
                type='search'
                className='form-control'
                rightIcon={() => (
                  <Button
                    size='sm'
                    className='[&>span]:items-center [&>span]:px-2 [&>span]:py-0'
                    color='primary'>
                    <HiUserAdd className='mr-2' />
                    Add
                  </Button>
                )}
                theme={{
                  field: {
                    rightIcon: {
                      base: twMerge(
                        theme.textInput.field.rightIcon.base,
                        'pointer-events-auto'
                      ),
                    },
                  },
                }}
              />
            </div>
            <AvatarGroup className='mb-6'>
              <Avatar
                alt=''
                img='/images/profile/user-2.jpg'
                rounded
                size='sm'
                stacked
              />
              <Avatar
                alt=''
                img='/images/profile/user-3.jpg'
                rounded
                size='sm'
                stacked
              />
              <Avatar
                alt=''
                img='/images/profile/user-4.jpg'
                rounded
                size='sm'
                stacked
              />
              <Avatar
                alt=''
                img='/images/profile/user-5.jpg'
                rounded
                size='sm'
                stacked
              />
            </AvatarGroup>
            <Button className='w-full' color='primary'>
              <HiCalendar className='mr-2' />
              Create event
            </Button>
          </form>
        </DrawerItems>
      </Drawer>
    </div>
  )
}

export default FormDrawerCode

import { useState } from 'react'
import {
  IconLayoutDashboard,
  IconShoppingBag,
  IconListDetails,
  IconLogin2,
  IconUserPlus,
  IconFiles,
  IconComponents,
  IconInfoSquareRounded,
} from '@tabler/icons-react'
import { HiSearch } from 'react-icons/hi'
import {
  Button,
  Drawer,
  DrawerHeader,
  DrawerItems,
  Sidebar,
  SidebarItem,
  SidebarItemGroup,
  SidebarItems,
  TextInput,
} from 'flowbite-react'

const DisableBackDropCode = () => {
  const [isOpen, setIsOpen] = useState(false)
  const handleClose = () => setIsOpen(false)

  return (
    <div>
      <Button color={'warning'} onClick={() => setIsOpen(true)}>
        Show Drawer
      </Button>

      <Drawer
        open={isOpen}
        onClose={handleClose}
        className='p-4'
        backdrop={false}>
        <DrawerHeader title='MENU' titleIcon={() => <></>} />
        <DrawerItems>
          <Sidebar
            aria-label='Sidebar with multi-level dropdown example'
            className='[&>div]:bg-transparent [&>div]:p-0'>
            <div className='flex h-full flex-col justify-between py-2'>
              <div>
                <form className='pb-3 md:hidden'>
                  <TextInput
                    icon={HiSearch}
                    type='search'
                    placeholder='Search'
                    required
                    size={32}
                  />
                </form>
                <SidebarItems>
                  <SidebarItemGroup>
                    <SidebarItem
                      href='/'
                      icon={() => <IconLayoutDashboard size={20} />}>
                      Dashboard
                    </SidebarItem>
                    <SidebarItem
                      href='/e-commerce/products'
                      icon={() => <IconShoppingBag size={20} />}>
                      Products
                    </SidebarItem>
                    <SidebarItem
                      href='/users/list'
                      icon={() => <IconListDetails size={20} />}>
                      Users list
                    </SidebarItem>
                    <SidebarItem
                      href='/authentication/sign-in'
                      icon={() => <IconLogin2 size={20} />}>
                      Sign in
                    </SidebarItem>
                    <SidebarItem
                      href='/authentication/sign-up'
                      icon={() => <IconUserPlus size={20} />}>
                      Sign up
                    </SidebarItem>
                  </SidebarItemGroup>
                  <SidebarItemGroup>
                    <SidebarItem
                      href='https://github.com/themesberg/flowbite-react/'
                      icon={() => <IconFiles size={20} />}>
                      Docs
                    </SidebarItem>
                    <SidebarItem
                      href='https://flowbite-react.com/'
                      icon={() => <IconComponents size={20} />}>
                      Components
                    </SidebarItem>
                    <SidebarItem
                      href='https://github.com/themesberg/flowbite-react/issues'
                      icon={() => <IconInfoSquareRounded size={20} />}>
                      Help
                    </SidebarItem>
                  </SidebarItemGroup>
                </SidebarItems>
              </div>
            </div>
          </Sidebar>
        </DrawerItems>
      </Drawer>
    </div>
  )
}

export default DisableBackDropCode

import { useState } from 'react'
import { Button, Drawer, DrawerHeader, DrawerItems } from 'flowbite-react'
import { HiBars2, HiSquaresPlus } from 'react-icons/hi2'

const SwipeableCode = () => {
  const [isSwipeable, setIsSwipeable] = useState(false)
  const swipeableClose = () => setIsSwipeable(false)

  return (
    <div>
      <Button onClick={() => setIsSwipeable(true)} color='info'>
        Swipeable Drawer
      </Button>
      <Drawer
        edge
        open={isSwipeable}
        onClose={swipeableClose}
        position='bottom'
        className='p-0'>
        <DrawerHeader
          closeIcon={HiBars2}
          title='Add widget'
          titleIcon={HiSquaresPlus}
          onClick={() => setIsSwipeable(!isSwipeable)}
          className='cursor-pointer px-4 pt-4 hover:bg-gray-50 dark:hover:bg-gray-700'
        />
        <DrawerItems className='p-4'>
          <div className='grid grid-cols-3 gap-4 p-4 lg:grid-cols-4'>
            <div className='cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'>
              <div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
                <svg
                  className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
                  aria-hidden='true'
                  xmlns='http://www.w3.org/2000/svg'
                  fill='currentColor'
                  viewBox='0 0 22 21'>
                  <path d='M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z' />
                  <path d='M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z' />
                </svg>
              </div>
              <div className='text-center font-medium text-gray-500 dark:text-gray-400'>
                Chart
              </div>
            </div>
            <div className='cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'>
              <div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
                <svg
                  className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
                  aria-hidden='true'
                  xmlns='http://www.w3.org/2000/svg'
                  fill='currentColor'
                  viewBox='0 0 20 14'>
                  <path d='M18 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM9 6v2H2V6h7Zm2 0h7v2h-7V6Zm-9 4h7v2H2v-2Zm9 2v-2h7v2h-7Z' />
                </svg>
              </div>
              <div className='text-center font-medium text-gray-500 dark:text-gray-400'>
                Table
              </div>
            </div>
            <div className='hidden cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 lg:block dark:bg-gray-700 dark:hover:bg-gray-600'>
              <div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
                <svg
                  className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
                  aria-hidden='true'
                  xmlns='http://www.w3.org/2000/svg'
                  fill='currentColor'
                  viewBox='0 0 14 20'>
                  <path d='M13.383.076a1 1 0 0 0-1.09.217L11 1.586 9.707.293a1 1 0 0 0-1.414 0L7 1.586 5.707.293a1 1 0 0 0-1.414 0L3 1.586 1.707.293A1 1 0 0 0 0 1v18a1 1 0 0 0 1.707.707L3 18.414l1.293 1.293a1 1 0 0 0 1.414 0L7 18.414l1.293 1.293a1 1 0 0 0 1.414 0L11 18.414l1.293 1.293A1 1 0 0 0 14 19V1a1 1 0 0 0-.617-.924ZM10 15H4a1 1 0 1 1 0-2h6a1 1 0 0 1 0 2Zm0-4H4a1 1 0 1 1 0-2h6a1 1 0 1 1 0 2Zm0-4H4a1 1 0 0 1 0-2h6a1 1 0 1 1 0 2Z' />
                </svg>
              </div>
              <div className='hidden text-center font-medium text-gray-500 dark:text-gray-400'>
                Ticket
              </div>
            </div>
            <div className='cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'>
              <div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
                <svg
                  className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
                  aria-hidden='true'
                  xmlns='http://www.w3.org/2000/svg'
                  fill='currentColor'
                  viewBox='0 0 18 20'>
                  <path d='M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z' />
                </svg>
              </div>
              <div className='text-center font-medium text-gray-500 dark:text-gray-400'>
                List
              </div>
            </div>
            <div className='cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'>
              <div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
                <svg
                  className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
                  aria-hidden='true'
                  xmlns='http://www.w3.org/2000/svg'
                  fill='none'
                  viewBox='0 0 20 16'>
                  <path
                    stroke='currentColor'
                    strokeLinecap='round'
                    strokeLinejoin='round'
                    strokeWidth='2'
                    d='M5 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1M2 5h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm8 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z'
                  />
                </svg>
              </div>
              <div className='text-center font-medium text-gray-500 dark:text-gray-400'>
                Price
              </div>
            </div>
            <div className='cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'>
              <div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
                <svg
                  className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
                  aria-hidden='true'
                  xmlns='http://www.w3.org/2000/svg'
                  fill='currentColor'
                  viewBox='0 0 20 18'>
                  <path d='M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z' />
                </svg>
              </div>
              <div className='text-center font-medium text-gray-500 dark:text-gray-400'>
                Users
              </div>
            </div>
            <div className='hidden cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 lg:block dark:bg-gray-700 dark:hover:bg-gray-600'>
              <div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
                <svg
                  className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
                  aria-hidden='true'
                  xmlns='http://www.w3.org/2000/svg'
                  fill='currentColor'
                  viewBox='0 0 20 18'>
                  <path d='M6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm-1.391 7.361.707-3.535a3 3 0 0 1 .82-1.533L7.929 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h4.259a2.975 2.975 0 0 1-.15-1.639ZM8.05 17.95a1 1 0 0 1-.981-1.2l.708-3.536a1 1 0 0 1 .274-.511l6.363-6.364a3.007 3.007 0 0 1 4.243 0 3.007 3.007 0 0 1 0 4.243l-6.365 6.363a1 1 0 0 1-.511.274l-3.536.708a1.07 1.07 0 0 1-.195.023Z' />
                </svg>
              </div>
              <div className='text-center font-medium text-gray-500 dark:text-gray-400'>
                Task
              </div>
            </div>
            <div className='cursor-pointer rounded-lg bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600'>
              <div className='mx-auto mb-2 flex h-[48px] max-h-[48px] w-[48px] max-w-[48px] items-center justify-center rounded-full bg-gray-200 p-2 dark:bg-gray-600'>
                <svg
                  className='inline h-5 w-5 text-gray-500 dark:text-gray-400'
                  aria-hidden='true'
                  xmlns='http://www.w3.org/2000/svg'
                  fill='none'
                  viewBox='0 0 20 20'>
                  <path
                    stroke='currentColor'
                    strokeLinecap='round'
                    strokeLinejoin='round'
                    strokeWidth='2'
                    d='M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2'
                  />
                </svg>
              </div>
              <div className='text-center font-medium text-gray-500 dark:text-gray-400'>
                Custom
              </div>
            </div>
          </div>
        </DrawerItems>
      </Drawer>
    </div>
  )
}

export default SwipeableCode

import { useState } from 'react'
import { Button, Drawer, DrawerHeader, DrawerItems } from 'flowbite-react'

const DefaultDrawerCode = () => {
  const [isOpen, setIsOpen] = useState(false)
  const handleClose = () => setIsOpen(false)

  return (
    <div>
      <Button color={'primary'} onClick={() => setIsOpen(true)}>
        Show Drawer
      </Button>
      <Drawer open={isOpen} onClose={handleClose} className='p-4'>
        <DrawerHeader title='Drawer' />
        <DrawerItems>
          <p className='mb-6 text-sm'>
            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. It was popularised in the 1960s
            with the release of Letraset sheets
          </p>

          <Button color={'primary'}>Learn More</Button>
        </DrawerItems>
      </Drawer>
    </div>
  )
}

export default DefaultDrawerCode

import { useState } from 'react'
import { Button, Drawer, DrawerHeader, DrawerItems } from 'flowbite-react'

const RightDrawerCode = () => {
  const [isOpen, setIsOpen] = useState(false)
  const handleClose = () => setIsOpen(false)

  return (
    <div>
      <Button color={'secondary'} onClick={() => setIsOpen(true)}>
        Show Drawer
      </Button>
      <Drawer
        open={isOpen}
        onClose={handleClose}
        className='p-4'
        position='right'>
        <DrawerHeader title='Drawer' />
        <DrawerItems>
          <p className='mb-6 text-sm'>
            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. It was popularised in the 1960s
            with the release of Letraset sheets
          </p>

          <Button color={'primary'}>Learn More</Button>
        </DrawerItems>
      </Drawer>
    </div>
  )
}

export default RightDrawerCode

import { useState } from 'react'
import { Button, Drawer, DrawerHeader, DrawerItems } from 'flowbite-react'

const TopDrawerCode = () => {
  const [isOpen, setIsOpen] = useState(false)
  const handleClose = () => setIsOpen(false)

  return (
    <div>
      <Button color={'error'} onClick={() => setIsOpen(true)}>
        Open Drawer
      </Button>
      <Drawer
        open={isOpen}
        onClose={handleClose}
        className='p-4'
        position='top'>
        <DrawerHeader title='Drawer' />
        <DrawerItems>
          <p className='mb-6 text-sm'>
            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. It was popularised in the 1960s
            with the release of Letraset sheets
          </p>

          <Button color={'primary'}>Learn More</Button>
        </DrawerItems>
      </Drawer>
    </div>
  )
}

export default TopDrawerCode

import { useState } from 'react'
import { Button, Drawer, DrawerHeader, DrawerItems } from 'flowbite-react'

const BottomDrawerCode = () => {
  const [isOpen, setIsOpen] = useState(false)
  const handleClose = () => setIsOpen(false)

  return (
    <div>
      <Button color={'success'} onClick={() => setIsOpen(true)}>
        Open Drawer
      </Button>
      <Drawer
        open={isOpen}
        onClose={handleClose}
        className='p-4'
        position='bottom'>
        <DrawerHeader title='Drawer' />
        <DrawerItems>
          <p className='mb-6 text-sm'>
            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. It was popularised in the 1960s
            with the release of Letraset sheets
          </p>

          <Button color={'primary'}>Learn More</Button>
        </DrawerItems>
      </Drawer>
    </div>
  )
}

export default BottomDrawerCode