A
Anonymous

Menu Toggle Handler - Copy this React, Tailwind Component to your project

<Menu-//-open={openMenu}-//-handler={setOpenMenu}->-<MenuHandler-ref={buttonRef}>-<Button-className='bg-transparent-text-black-text-sm-text-center-inline-flex-items-center-!shadow-none-!p-0'>-<i-className="flex-text-xl-fi-fi-rr-clip"></i>-</Button>-</MenuHandler>-<MenuList-className="-w-52-!p-0-mt-2-rounded-md-shadow-lg-bg-white-ring-1-ring-black-ring-opacity-5-focus:outline-none-z-[9999]">-<div-class="flex-items-center-justify-start-w-full-hover:bg-gray-100-dark:border-gray-600-dark:hover:border-gray-500-dark:hover:bg-gray-600-cursor-pointer-">-<label-for="dropzone-file"-class="flex">-<div-class="flex-items-center-gap-2-!p-2">-<i-className="flex-fi-fi-rr-picture"></i>-<Typography-variant="paragraph"-className="font-medium">Picture/Video</Typography>-</div>-<input-id="dropzone-file"-type="file"-class="hidden"-/>-</label>-</div>-{/*-<label-htmlFor="image-upload-input"-className="w-full-flex-items-center-gap-2-!p-2-cursor-pointer">-<i-className="flex-fi-fi-rr-picture"></i>-<Typography-variant="paragraph"-className="font-medium">Picture/Video</Typography>-</label>-<input-className="opacity-0"-id="media-upload-input"-type="file"-//-onChange={handleMediaInputChange}-multiple-accept="image/png,-image/jpeg-,/image/jpg,-image/gif,video/mp4,video/avi,video/3gp,video/wmv,video/mov,video/mkv,video/webm"-/>-*/}-{/*-<label-htmlFor="image-upload-input"-className="flex-items-center-gap-2-!p-2-cursor-pointer">-<i-className="flex-fi-fi-rr-document-signed"></i>-<Typography-variant="medium"-className="font-medium">Document</Typography>-<input-className="hidden"-id="file-upload-input"-type="file"-onChange={handleMediaInputChange}-multiple-accept="*"-/>-</label>-*/}-</MenuList>-</Menu>

Prompt
Component Preview

About

MenuToggleHandler - Easily toggle menus with a button, allowing file uploads for images, videos, and documents. Built with React and Tai. Start coding now!

Share

Last updated 1 month ago