@heroicons/react/solid#PlusIcon TypeScript Examples
The following examples show how to use
@heroicons/react/solid#PlusIcon.
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: Circles.tsx From server with MIT License | 6 votes |
|
renderCreateCircleComponents = (isOpen: boolean, onCreate: (name: string) => void, onClose: () => void, onOpen: () => void) => {
return (
<>
<PillModal
isOpen={isOpen}
onClose={onClose}
title='Create new circle'
>
<CreateNewCircle
onCreate={(name) => {
onClose()
onCreate(name)
}}
onCancel={onClose}
/>
</PillModal>
<div
className='circles-create-circle-button'
onClick={onOpen}
>
<PlusIcon />
</div>
</>
)
}
Example #2
| Source File: BetaSlideOut.tsx From platform with MIT License | 4 votes |
|
export default function BetaSlideOut(props) {
const { slideState, setIsSlideOutOpen } = props;
const { open } = slideState;
const mailToSupport = () => {
const userAgent = window.navigator.userAgent
return `mailto:[email protected]?subject=Support%20Issue&Body=%0D%0A// ---- DO NOT DELETE ----//%0D%0A Device: ${userAgent} %0D%0A// ---- THANK YOU ----//%0D%0A%0D%0A`
}
return (
<Transition.Root show={open} as={Fragment}>
<Dialog
as="div"
static
className="fixed inset-10 top-10 z-50"
open={open}
onClose={() =>
setIsSlideOutOpen((state) => ({ ...state, open: false }))
}
>
<div className="absolute inset-0 overflow-hidden">
<Dialog.Overlay className="absolute inset-0" />
<div className="fixed inset-y-0 right-0 pl-2 max-w-full flex sm:pl-2">
<Transition.Child
as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transform transition ease-in-out duration-500 sm:duration-700"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="w-screen max-w-md">
<div className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll mr-2 sm:mr-0">
<div className="px-4 py-6 sm:px-6">
<div className="flex items-start justify-between">
<h2
id="slide-over-heading"
className="text-2xl m-auto tracking-tight leading-10 font-extrabold text-blue-500 sm:text-3xl sm:leading-none"
>
<span className="text-gray-400 text-sm font-normal">It can only get </span>Beta ...
</h2>
<div className="ml-3 h-7 flex items-center">
<button
className="bg-white z-100 rounded-md text-gray-400 hover:text-gray-500 focus:ring-2 focus:ring-teal-500"
onClick={() =>
setIsSlideOutOpen((state) => ({
...state,
open: false,
}))
}
>
<span className="sr-only">Close panel</span>
<XIcon
className="h-6 w-6 border-none"
aria-hidden="true"
/>
</button>
</div>
</div>
</div>
<div>
<div className="text-center">
<h3 className="mt-2 text-sm font-medium text-gray-900 mb-4">
We prioritise our efforts on most popular devices.
</h3>
<p className="mt-1 text-sm text-gray-500 px-6 mb-4">
Unfortunately this means not everyone's experience is optimal. ?
</p>
<img src={Devices} alt="device stats" className="h-128 m-auto" />
<h3 className="mt-2 text-sm font-medium text-gray-900">
Spotted an issue?
</h3>
<p className="mt-1 text-sm text-gray-500">
Send us a quick screenshot and we'll get right on it!
</p>
<div className="mt-6">
<a href={mailToSupport()}
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
>
<PlusIcon
className="-ml-1 mr-2 h-5 w-5"
aria-hidden="true"
/>
Raise Issue
</a>
</div>
</div>
<div className="px-4 sm:flex sm:items-end sm:px-6 mb-2">
<div className="sm:flex-1">
<div className="mt-5 flex flex-wrap space-y-3 sm:space-y-0 sm:space-x-3">
<button
onClick={() =>
setIsSlideOutOpen((state) => ({
...state,
open: false,
}))
}
type="button"
className="w-full text-center items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
}
Example #3
| Source File: index.tsx From platform with MIT License | 4 votes |
|
export default function Admin() {
const { id } = useParams();
const { user } = useAuthState();
const [isLoading, setIsLoading] = useState(false);
const [isUpdatingECF, setIsUpdatingECF] = useState(false);
const [members, setMembers] = useState([]);
const [selectedMemberId, setSelectedMemberId] = useState(null);
const [ecfId, setECFId] = useState(null);
useEffect(() => {
document.title = "The Chess Centre | Admin";
async function fetchStatus() {
setIsLoading(true);
const {
data: {
listMembers: { items: playersList },
},
} = await API.graphql({
query: listMembers,
variables: { limit: 500 },
authMode: "AWS_IAM",
});
if (playersList) {
setMembers(playersList.filter(m => !m.ecfId));
}
setIsLoading(false);
}
fetchStatus();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [user]);
const updateECFIdForMember = async () => {
setIsUpdatingECF(true);
if (selectedMemberId && ecfId) {
const response = await API.put("admin", "/addECFId", {
body: {
ecfId,
memberId: selectedMemberId,
adminId: id
}
}).catch(error => {
console.log("Error", error);
setIsUpdatingECF(false);
});
console.log("GET", response);
setIsUpdatingECF(false);
}
}
const handleECFIdUpdate = id => {
setECFId(id);
}
return (
<>
<h1 className="relative mt-6 mb-2 text-2xl font-semibold text-gray-700 dark:text-gray-200">
<i className="fad fa-tools text-sky-600"></i> Admin
<div className="inline-flex align-top top-2 ml-2">
</div>
{isLoading && (
<div className="absolute text-sky-500 mt-2 align-middle ml-2 text-sm inline-flex">
<i className="fal fa-spinner-third fa-spin fa-fw"></i>
</div>
)}
</h1>
<div className="pb-5 border-b border-gray-200 dark:border-gray-700">
<div className="-ml-2 -mt-2 flex flex-wrap items-baseline">
<p className="ml-2 mt-1 text-sm text-left text-gray-500 dark:text-gray-400">
Utility functions to help maintain our site!
</p>
</div>
</div>
<div>
<div className="rounded-md bg-sky-100 p-4 mb-2 mt-2 border">
<div className="flex">
<div className="ml-3">
<h3 className="text-sm font-medium text-sky-600">Remember, with great power comes great responsibility</h3>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-1">
<div className="shadow rounded-lg border bg-white grid gap-2 xl:gap-4 mb-8 md:grid-cols-2 mt-2 px-4 py-6">
<div>
{members.length > 0 && <MemberSearch members={members} setSelectedMemberId={setSelectedMemberId} />}
<div className="text-left">
{isUpdatingECF && <div className="text-gray-300 italic text-sm mt-2">
<i className="fas fa-spinner-third fa-spin fa-fw text-sky-500"></i>{" "}
Update member ...
</div>}
</div>
</div>
<div className="space-y-1 mt-4 sm:mt-0">
<label htmlFor="add-ecf-id" className="block text-sm font-medium text-gray-700">
Add ECF ID
</label>
<p id="add-ecf-id" className="sr-only">
ECF Rating ID
</p>
<div className="flex">
<div className="flex-grow">
<input
onChange={e => handleECFIdUpdate(e.target.value)}
type="text"
name="add-ecf-id"
id="add-ecf-id"
className="block w-full shadow-sm focus:ring-sky-500 focus:border-sky-500 sm:text-sm border-gray-300 rounded-md"
placeholder="ECF Rating ID"
aria-describedby="add-ecf-id"
/>
</div>
<span className="ml-3">
<button
onClick={() => updateECFIdForMember()}
type="button"
className="bg-white inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500"
>
<PlusIcon className="-ml-2 mr-1 h-5 w-5 text-gray-400" aria-hidden="true" />
<span>Add</span>
</button>
</span>
</div>
</div>
</div>
</div>
</>
);
}
Example #4
| 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>
);
}
