@heroicons/react/solid#DuplicateIcon TypeScript Examples
The following examples show how to use
@heroicons/react/solid#DuplicateIcon.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ForkButton.tsx From ide with Mozilla Public License 2.0 | 6 votes |
|
ForkButton = (): JSX.Element => {
const fileId = useAtomValue(fileIdAtom);
return (
<a
className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium text-gray-400 hover:text-gray-200 focus:outline-none"
href={`/${fileId?.id?.substring(1)}/copy`}
target="_blank"
rel="noreferrer"
>
<DuplicateIcon
className="-ml-1 mr-2 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
Clone File
</a>
);
}
Example #2
| Source File: ShareInfo.tsx From ide with Mozilla Public License 2.0 | 6 votes |
|
ShareInfo = ({
displayUrl,
}: {
displayUrl: string;
}): JSX.Element => {
const [showCopied, setShowCopied] = useState(false);
const handleCopy = () => {
navigator.clipboard.writeText(window.location.href).then(
() => {
setShowCopied(true);
setTimeout(() => {
setShowCopied(false);
}, 3000);
},
() => {
alert("Couldn't copy to clipboard");
}
);
};
return (
<div
className="px-4 py-1 text-sm group text-gray-300 focus:outline-none max-w-max cursor-pointer flex items-center"
onClick={() => handleCopy()}
>
<span className="font-medium mr-4 group-hover:text-gray-100">
{showCopied ? 'Copied!' : 'Share'}
</span>
<span className="font-mono pl-3 pr-10 py-2 bg-gray-900 group-hover:text-gray-100 rounded inline-flex items-center flex-1 min-w-0 relative">
<span className="truncate">{displayUrl}</span>
<DuplicateIcon className="h-5 w-5 mr-3 mt-2 text-gray-400 group-hover:text-gray-200 absolute right-0 top-0 bottom-0 " />
</span>
</div>
);
}
Example #3
| Source File: FileMenu.tsx From ide with Mozilla Public License 2.0 | 4 votes |
|
FileMenu = (props: FileMenuProps): JSX.Element => {
const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(
null
);
const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: 'bottom-start',
});
const [permission] = useAtom(actualUserPermissionAtom);
const canWrite = permission === 'OWNER' || permission === 'READ_WRITE';
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
return (
<Menu as="div" className="relative inline-block text-left">
{({ open }) => (
<>
<div>
<Menu.Button
className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium text-gray-200 hover:bg-gray-800 focus:bg-gray-800 focus:outline-none"
ref={setReferenceElement}
>
File
<ChevronDownIcon
className="-mr-1 ml-2 h-5 w-5"
aria-hidden="true"
/>
</Menu.Button>
</div>
<Transition show={open}>
{mounted
? ReactDOM.createPortal(
<Menu.Items static as="div">
<div
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
className="relative"
>
<Transition.Child
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<div className="origin-top-left absolute z-10 left-0 w-56 shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
<Menu.Item>
{({ active }) => (
<a
href="/"
target="_blank"
className={classNames(
active
? 'bg-gray-700 text-gray-100'
: 'text-gray-200',
'group flex items-center px-4 py-2 text-sm'
)}
>
<PlusIcon
className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-300"
aria-hidden="true"
/>
New File
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<button
type="button"
className={classNames(
active
? 'bg-gray-700 text-gray-100'
: 'text-gray-200',
'group flex items-center px-4 py-2 text-sm w-full focus:outline-none'
)}
onClick={() => props.onDownloadFile()}
>
<DownloadIcon
className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-300"
aria-hidden="true"
/>
Download File
</button>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
href={props.forkButtonUrl}
target="_blank"
rel="noreferrer"
className={classNames(
active
? 'bg-gray-700 text-gray-100'
: 'text-gray-200',
'group flex items-center px-4 py-2 text-sm w-full focus:outline-none'
)}
>
<DuplicateIcon
className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-300"
aria-hidden="true"
/>
Clone File
</a>
)}
</Menu.Item>
{canWrite && (
<Menu.Item>
{({ active }) => (
<button
type="button"
className={classNames(
active
? 'bg-gray-700 text-gray-100'
: 'text-gray-200',
'group flex items-center px-4 py-2 text-sm w-full focus:outline-none'
)}
onClick={() => props.onInsertFileTemplate()}
>
<TemplateIcon
className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-300"
aria-hidden="true"
/>
Reset File to Template
</button>
)}
</Menu.Item>
)}
<Menu.Item>
{({ active }) => (
<button
type="button"
className={classNames(
active
? 'bg-gray-700 text-gray-100'
: 'text-gray-200',
'group flex items-center px-4 py-2 text-sm w-full focus:outline-none'
)}
onClick={() => props.onOpenSettings()}
>
<CogIcon
className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-300"
aria-hidden="true"
/>
Settings
</button>
)}
</Menu.Item>
</div>
</div>
</Transition.Child>
</div>
</Menu.Items>,
document.body
)
: null}
</Transition>
</>
)}
</Menu>
);
}
