@heroicons/react/solid#XIcon TypeScript Examples
The following examples show how to use
@heroicons/react/solid#XIcon.
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: index.tsx From nouns-monorepo with GNU General Public License v3.0 | 5 votes |
|
BidHistoryModalOverlay: React.FC<{
auction: Auction;
onDismiss: () => void;
}> = props => {
const { onDismiss, auction } = props;
const bids = useAuctionBids(auction.nounId);
return (
<>
<div className={classes.closeBtnWrapper}>
<button onClick={onDismiss} className={classes.closeBtn}>
<XIcon className={classes.icon} />
</button>
</div>
<div className={classes.modal}>
<div className={classes.content}>
<div className={classes.header}>
<div className={classes.nounWrapper}>
<StandaloneNounRoundedCorners nounId={auction && auction.nounId} />
</div>
<div className={classes.title}>
<h2>
<Trans>Bids for</Trans>
</h2>
<h1>Noun {auction && auction.nounId.toString()}</h1>
</div>
</div>
<div className={classes.bidWrapper}>
{bids && bids.length > 0 ? (
<ul>
{bids?.map((bid: Bid, i: number) => {
return <BidHistoryModalRow index={i} bid={bid} />;
})}
</ul>
) : (
<div className={classes.nullStateText}>
<Trans>Bids will appear here</Trans>
</div>
)}
</div>
</div>
</div>
</>
);
}
Example #2
| Source File: ModalBase.tsx From contracts-ui with GNU General Public License v3.0 | 5 votes |
|
ModalBase = ({ isOpen, setIsOpen, title, children }: ModalProps) => {
function closeModal() {
setIsOpen(false);
}
return (
<>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="fixed inset-0 z-99 overflow-y-auto " onClose={closeModal}>
<div className="min-h-screen px-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-black dark:opacity-70 opacity-10" />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span className="inline-block h-screen align-middle" aria-hidden="true">
​
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div className="inline-block w-full max-w-lg my-8 overflow-hidden text-left align-middle transition-all transform opacity-100 dark:bg-gray-900 bg-white shadow-xl rounded-xl">
<div className="flex justify-between border-b dark:border-gray-800 border-gray-200">
<Dialog.Title
as="h3"
className="text-lg font-bold leading-6 p-6 dark:text-gray-300 text-gray-600"
>
{title}
</Dialog.Title>
<XIcon
className="w-4 h-4 mx-6 mt-7 text-gray-500 cursor-pointer"
aria-hidden="true"
onClick={closeModal}
/>
</div>
<div className="px-6">{children}</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition>
</>
);
}
Example #3
| Source File: Navbar.tsx From ultimate-saas-ts with MIT License | 4 votes |
|
Component = () => {
const { data: session, status } = useSession();
const router = useRouter();
return (
<Disclosure as="nav" className="bg-white">
{({ open }) => (
<>
<div className="px-2 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="relative flex justify-between h-16">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
<Disclosure.Button className="inline-flex items-center justify-center p-2 text-gray-400 rounded-md hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Open main menu</span>
{open ? (
<XIcon className="block w-6 h-6" aria-hidden="true" />
) : (
<MenuIcon className="block w-6 h-6" aria-hidden="true" />
)}
</Disclosure.Button>
</div>
<div className="flex items-center justify-center flex-1 sm:items-stretch sm:justify-start">
<div className="flex items-center flex-shrink-0">
<img
className="block w-auto h-8 lg:hidden"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
alt="Workflow"
/>
<img
className="hidden w-auto h-8 lg:block"
src="https://tailwindui.com/img/logos/workflow-logo-indigo-600-mark-gray-800-text.svg"
alt="Workflow"
/>
</div>
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
<Link href="/">
<a
className={classNames(
'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
{
'border-indigo-500 text-gray-900':
router.pathname === '/',
'': router.pathname !== '/',
}
)}
>
Pricings
</a>
</Link>
<Link href="/account">
<a
className={classNames(
'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
{
'border-indigo-500 text-gray-900':
router.pathname === '/account',
'': router.pathname !== '/account',
}
)}
>
Account
</a>
</Link>
</div>
</div>
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
{/* Profile dropdown */}
{status === 'authenticated' ? (
<Menu as="div" className="relative ml-3">
<div>
<Menu.Button className="flex text-sm bg-white rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span className="sr-only">Open user menu</span>
<img
className="w-8 h-8 rounded-full"
src={
session?.user?.image ||
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
}
alt=""
/>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
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"
>
<Menu.Items className="absolute right-0 w-48 py-1 mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Item>
{({ active }) => (
<Link href="/account">
<a
className={classNames(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-700'
)}
>
Account
</a>
</Link>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
onClick={() => signOut()}
className={classNames(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-700'
)}
>
Sign out
</a>
)}
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
) : (
<Link href="/api/auth/signin">
<a>Sign in</a>
</Link>
)}
</div>
</div>
</div>
<Disclosure.Panel className="sm:hidden">
<div className="pt-2 pb-4 space-y-1">
{/* Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" */}
<Link href="/">
<a className="block py-2 pl-3 pr-4 text-base font-medium text-indigo-700 border-l-4 border-indigo-500 bg-indigo-50">
Pricings
</a>
</Link>
<Link href="/account">
<a className="block py-2 pl-3 pr-4 text-base font-medium text-gray-500 border-l-4 border-transparent hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700">
Account
</a>
</Link>
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
);
}
Example #4
| Source File: InputFile.tsx From contracts-ui with GNU General Public License v3.0 | 4 votes |
|
export function InputFile({
className = '',
errorMessage,
value: propsFile,
isError,
onChange,
placeholder,
onRemove,
}: Props) {
const ref = createRef<DropzoneRef>();
const [file, setFile] = useState<OrFalsy<FileState>>(propsFile);
const onDrop = useCallback(
(files: File[]): void => {
files.forEach((file): void => {
const reader = new FileReader();
reader.onabort = NOOP;
reader.onerror = NOOP;
reader.onload = ({ target }: ProgressEvent<FileReader>): void => {
if (target && target.result) {
const name = file.name;
const data = convertResult(target.result as ArrayBuffer);
const size = data.length;
onChange && onChange({ data, name, size });
ref &&
!propsFile &&
setFile({
data,
name,
size: data.length,
});
}
};
reader.readAsArrayBuffer(file);
});
},
[ref, onChange, propsFile]
);
const removeHandler = useCallback((): void => {
onRemove && onRemove();
!propsFile && setFile(undefined);
}, [onRemove, propsFile]);
useEffect((): void => {
if (file !== propsFile) {
setFile(propsFile);
}
}, [file, propsFile]);
return file ? (
<div className={`${className} flex`}>
<div className="p-6 border dark:bg-elevation-1 dark:border-gray-700 border-gray-300 inline-flex items-center rounded shadow">
<DocumentTextIcon
className="w-7 h-7 mr-2 text-gray-500 justify-self-start"
aria-hidden="true"
/>
<span className="dark:text-gray-300 text-gray-500 text-xs min-w-600 justify-self-start mr-20">
{file.name} ({(file.size / 1000).toFixed(2)}kb)
</span>
{errorMessage && isError && (
<span className="dark:text-gray-300 text-gray-500 text-xs min-w-600 justify-self-start mr-20">
{errorMessage}
</span>
)}
<XIcon
className="w-5 h-5 mr-2 text-gray-500 justify-self-end cursor-pointer"
aria-hidden="true"
onClick={removeHandler}
/>
</div>
</div>
) : (
<Dropzone multiple={false} onDrop={onDrop} ref={ref}>
{({ getInputProps, getRootProps }) => {
return (
<div className={className} {...getRootProps()}>
<label
className="dark:text-gray-700 text-gray-400 font-normal py-2 px-4 border dark:border-gray-700 border-gray-200 rounded flex flex-col h-36 items-center cursor-pointer justify-center"
htmlFor="file"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-8 mb-2 dark:text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
/>
</svg>
<span className="text-sm dark:text-gray-500 text-gray-400">{placeholder}</span>
</label>
<input {...getInputProps()} data-cy="file-input" />
</div>
);
}}
</Dropzone>
);
}
