@heroicons/react/solid#CheckIcon TypeScript Examples
The following examples show how to use
@heroicons/react/solid#CheckIcon.
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 interbtc-ui with Apache License 2.0 | 6 votes |
|
SelectCheck = ({
active,
className,
...rest
}: CustomSelectCheckProps & React.ComponentPropsWithRef<'span'>): JSX.Element => (
<span
className={clsx(
active ? 'text-white' : 'text-interlayDenim',
'absolute',
'inset-y-0',
'right-0',
'flex',
'items-center',
'pr-4',
className
)}
{...rest}
>
<CheckIcon className={clsx('h-5', 'w-5')} aria-hidden='true' />
</span>
)
Example #2
| Source File: Notifications.tsx From server with MIT License | 6 votes |
|
Notifications = (_: Props) => {
const dispatch = useAppDispatch()
const unreadNotificationsCount = useAppSelector(state => state.notifications.notifications.filter(n => n.unread).length)
return (
<div
onClick={async (e) => {
e.preventDefault()
await dispatch(markAllNotificationsAsRead())
}}
>
{unreadNotificationsCount !== 0 &&
<div className='mobile-all-read-button'>
<CheckIcon />
</div>
}
<NotificationList />
</div>
)
}
Example #3
| Source File: token-price-select.tsx From arkadiko with GNU General Public License v3.0 | 5 votes |
|
export function TokenPriceSelect({ tokenPrices, selected, setSelected }: Props) {
return (
<Listbox value={selected} onChange={setSelected}>
{({ open }) => (
<>
<Listbox.Label className="block text-sm font-medium text-gray-700 sr-only">Token price</Listbox.Label>
<div className="relative mt-1">
<Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-white border border-gray-300 rounded-md shadow-sm cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block truncate">{selected.name}</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{tokenPrices.map((token:any) => (
<Listbox.Option
key={token.id}
className={({ active }) =>
classNames(
active ? 'text-white bg-indigo-600' : 'text-gray-900',
'cursor-default select-none relative py-2 pl-3 pr-9'
)
}
value={token}
>
{({ selected, active }) => (
<>
<span className={classNames(selected ? 'font-semibold' : 'font-normal', 'block truncate')}>
{token.name}
</span>
{selected ? (
<span
className={classNames(
active ? 'text-white' : 'text-indigo-600',
'absolute inset-y-0 right-0 flex items-center pr-4'
)}
>
<CheckIcon className="w-5 h-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)
}
Example #4
| Source File: FestivalRegister.tsx From platform with MIT License | 5 votes |
|
Steps = ({ stepState }) => {
const steps = stepState;
return (
<nav aria-label="Progress">
<ol className="relative rounded-md mx-auto flex items-center">
{steps.map((step, stepIdx) => (
<li key={step.name} className="relative flex-1 flex">
{step.status === "complete" ? (
<div className="group flex items-center w-full">
<span className="px-1 sm:px-6 py-4 flex items-center text-sm font-medium">
<span className="flex-shrink-0 w-10 h-10 flex items-center justify-center bg-teal-600 rounded-full group-hover:bg-teal-800">
<CheckIcon
className="w-6 h-6 text-white"
aria-hidden="true"
/>
</span>
<span className="ml-2 sm:ml-4 text-xs sm:text-sm font-medium text-teal-600">
{step.name}
</span>
</span>
</div>
) : step.status === "current" ? (
<div className="group flex items-center">
<span
className="px-1 sm:px-6 py-4 flex items-center text-sm font-medium"
aria-current="step"
>
<span className="flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-teal-600 rounded-full">
<span className="text-teal-600">{step.id}</span>
</span>
<span className="ml-2 sm:ml-4 text-xs sm:text-sm font-medium text-teal-600">
{step.name}
</span>
</span>
</div>
) : (
<div className="group flex items-center">
<span className="px-1 sm:px-6 py-4 flex items-center text-sm font-medium">
<span className="flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400">
<span className="text-gray-500 group-hover:text-gray-900">
{step.id}
</span>
</span>
<span className="ml-2 sm:ml-4 text-xs sm:text-sm font-medium text-gray-500 group-hover:text-gray-900">
{step.name}
</span>
</span>
</div>
)}
{stepIdx !== steps.length - 1 && (
<>
{/* Arrow separator for lg screens and up */}
<div
className="hidden md:block absolute top-0 right-0 h-full w-5"
aria-hidden="true"
>
<svg
className="h-full w-full text-teal-brand"
viewBox="0 0 22 80"
fill="none"
preserveAspectRatio="none"
>
<path
d="M0 -2L20 40L0 82"
vectorEffect="non-scaling-stroke"
stroke="currentcolor"
strokeLinejoin="round"
/>
</svg>
</div>
</>
)}
</li>
))}
</ol>
</nav>
);
}
Example #5
| Source File: new-vault-wizard-nav.tsx From arkadiko with GNU General Public License v3.0 | 4 votes |
|
NewVaultWizardNav = ({ currentSection, setStep }) => {
const vaultCreationSections = [
{
id: '01',
name: 'Collateral',
description: 'Choose your type of collateral',
href: '/vaults/new',
status: 'current',
},
{
id: '02',
name: 'Details',
description: 'Collateral amount and USDA minting',
href: '#',
status: 'upcoming',
},
{
id: '03',
name: 'Confirmation',
description: 'Ready to open your vault?',
href: '#',
status: 'upcoming',
},
];
vaultCreationSections.forEach((section, index) => {
if (index < currentSection) {
section.status = 'complete';
} else if (index === currentSection) {
section.status = 'current';
} else {
section.status = 'upcoming';
}
});
return (
<div className="relative overflow-hidden rounded-md lg:border-t lg:border-b lg:border-gray-200 dark:lg:border-zinc-600">
<nav className="bg-white dark:bg-zinc-800" aria-label="New Vault Wizard Navigation">
<ol
role="list"
className="overflow-hidden lg:flex lg:border-l lg:border-r lg:border-gray-200 dark:lg:border-zinc-600"
>
{vaultCreationSections.map((section, sectionIdx) => (
<li key={section.id} className="relative overflow-hidden lg:flex-1">
<div
className={classNames(
sectionIdx === 0 ? 'border-b-0' : '',
sectionIdx === vaultCreationSections.length - 1 ? 'border-t-0' : '',
'border border-gray-200 dark:border-zinc-600 overflow-hidden lg:border-0'
)}
>
{section.status === 'complete' ? (
<button
onClick={() => {
setStep(sectionIdx);
}}
className="group"
>
<span
className="absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto"
aria-hidden="true"
/>
<span
className={classNames(
sectionIdx !== 0 ? 'lg:pl-9' : '',
'px-6 py-5 flex items-start text-sm font-medium'
)}
>
<span className="shrink-0">
<span className="flex items-center justify-center w-10 h-10 bg-indigo-600 rounded-full dark:bg-indigo-400">
<CheckIcon
className="w-6 h-6 text-white dark:text-zinc-700"
aria-hidden="true"
/>
</span>
</span>
<span className="mt-0.5 ml-4 min-w-0 flex flex-col">
<span className="text-base text-left font-headings">{section.name}</span>
<span className="text-sm font-medium text-gray-500 dark:text-zinc-400">
{section.description}
</span>
</span>
</span>
</button>
) : section.status === 'current' ? (
<RouterLink to={section.href} aria-current="step">
<span
className="absolute top-0 left-0 w-1 h-full bg-indigo-600 dark:bg-indigo-400 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto"
aria-hidden="true"
/>
<span
className={classNames(
sectionIdx !== 0 ? 'lg:pl-9' : '',
'px-6 py-5 flex items-start text-sm font-medium'
)}
>
<span className="shrink-0">
<span className="flex items-center justify-center w-10 h-10 border-2 border-indigo-600 rounded-full dark:border-indigo-400">
<span className="font-semibold text-indigo-600 dark:text-indigo-400">
{section.id}
</span>
</span>
</span>
<span className="mt-0.5 ml-4 min-w-0 flex flex-col">
<span className="text-base text-indigo-600 dark:text-indigo-400 font-headings">
{section.name}
</span>
<span className="text-sm font-medium text-gray-500 dark:text-zinc-400">
{section.description}
</span>
</span>
</span>
</RouterLink>
) : (
<RouterLink to={section.href} className="group">
<span
className="absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto"
aria-hidden="true"
/>
<span
className={classNames(
sectionIdx !== 0 ? 'lg:pl-9' : '',
'px-6 py-5 flex items-start text-sm font-medium'
)}
>
<span className="shrink-0">
<span className="flex items-center justify-center w-10 h-10 border-2 border-gray-300 rounded-full">
<span className="text-gray-500 dark:text-zinc-400">{section.id}</span>
</span>
</span>
<span className="mt-0.5 ml-4 min-w-0 flex flex-col">
<span className="text-base text-gray-500 dark:text-zinc-400 font-headings">
{section.name}
</span>
<span className="text-sm font-medium text-gray-500 dark:text-zinc-400">
{section.description}
</span>
</span>
</span>
</RouterLink>
)}
{sectionIdx !== 0 ? (
<>
{/* Separator */}
<div
className="absolute inset-0 top-0 left-0 hidden w-3 lg:block"
aria-hidden="true"
>
<svg
className="w-full h-full text-gray-300 dark:text-zinc-700"
viewBox="0 0 12 82"
fill="none"
preserveAspectRatio="none"
>
<path
d="M0.5 0V31L10.5 41L0.5 51V82"
stroke="currentcolor"
vectorEffect="non-scaling-stroke"
/>
</svg>
</div>
</>
) : null}
</div>
</li>
))}
</ol>
</nav>
</div>
);
}
Example #6
| Source File: index.tsx From ultimate-saas-ts with MIT License | 4 votes |
|
Page: NextPage<Props> = ({ products }) => {
const [subscription, setSubscription] = useState<Subscription>();
const { status } = useSession();
const router = useRouter();
const [billingInterval, setBillingInterval] =
useState<PriceInterval>('month');
useEffect(() => {
(async () => {
if (status === 'authenticated') {
const res = await fetch('/api/user/subscription');
const data = await res.json();
if (data.subscription) {
setSubscription(data.subscription);
}
}
})();
}, [status]);
const handlePricingClick = useCallback(
async (priceId: string) => {
if (status !== 'authenticated') {
return router.push('/api/auth/signin');
}
if (subscription) {
return router.push('/account');
}
const res = await fetch('/api/stripe/create-checkout-session', {
method: 'POST',
headers: {
'content-type': 'application/json',
},
body: JSON.stringify({
price: priceId,
}),
});
const data = await res.json();
const stripe = await getStripe();
stripe?.redirectToCheckout({ sessionId: data.sessionId });
},
[status, router, subscription]
);
return (
<div className="bg-white">
<Navbar />
<div className="px-4 py-24 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="sm:flex sm:flex-col sm:align-center">
<h1 className="text-6xl font-extrabold text-gray-800 sm:text-center">
Pricing Plans
</h1>
<p className="mt-5 text-xl text-gray-500 sm:text-center">
Start building for free, then add a site plan to go live. Account
plans unlock additional features.
</p>
<div className="relative self-center mt-6 bg-gray-100 rounded-lg p-0.5 flex sm:mt-8">
<button
onClick={() => setBillingInterval('month')}
type="button"
className={classNames(
'relative w-1/2 py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8 rounded-lg',
{
'bg-white border-gray-200 shadow-sm rounded-md text-gray-900':
billingInterval === 'month',
'bg-transparent': billingInterval !== 'month',
}
)}
>
Monthly billing
</button>
<button
onClick={() => setBillingInterval('year')}
type="button"
className={classNames(
'relative w-1/2 bg-white py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8 rounded-lg',
{
'bg-white border-gray-200 shadow-sm rounded-md text-gray-900':
billingInterval === 'year',
'bg-transparent': billingInterval !== 'year',
}
)}
>
Yearly billing
</button>
</div>
</div>
<div className="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4">
{products
.sort(
(a, b) =>
a?.prices?.find((one) => one.interval === billingInterval)
?.unitAmount! -
b?.prices?.find((one) => one.interval === billingInterval)
?.unitAmount!
)
.map((product) => {
const price: Price = (product as any)?.prices?.find(
(one: Price) => one.interval === billingInterval
);
if (!price) {
return null;
}
return (
<div
key={product.name}
className={classNames(
'border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200',
{
'ring-indigo-500 ring-2':
subscription?.priceId === price.id,
}
)}
>
<div className="p-6">
<h2 className="text-lg font-medium leading-6 text-gray-900">
{product.name}
</h2>
<p className="mt-4 text-sm text-gray-500">
{product.description}
</p>
<p className="mt-8">
<span className="text-4xl font-extrabold text-gray-900">
${price.unitAmount! / 100}
</span>{' '}
<span className="text-base font-medium text-gray-500">
/mo
</span>
</p>
<a
onClick={() => handlePricingClick(price.id)}
className="block w-full py-2 mt-8 text-sm font-semibold text-center text-white bg-gray-900 border border-black rounded-md hover:bg-gray-700 hover:cursor-pointer"
>
Buy {product.name}
</a>
</div>
<div className="px-6 pt-6 pb-8">
<h3 className="text-xs font-medium tracking-wide text-gray-900 uppercase">
{"What's included"}
</h3>
<ul role="list" className="mt-6 space-y-4">
{[
'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
'Cum repellendus libero non expedita quam eligendi',
'a deserunt beatae debitis culpa asperiores ipsum facilis,',
'excepturi reiciendis accusantium nemo quos id facere!',
].map((feature) => (
<li key={feature} className="flex space-x-3">
<CheckIcon
className="flex-shrink-0 w-5 h-5 text-green-500"
aria-hidden="true"
/>
<span className="text-sm text-gray-500">
{feature}
</span>
</li>
))}
</ul>
</div>
</div>
);
})}
</div>
</div>
<Footer />
</div>
);
}
Example #7
| Source File: Dropdown.tsx From contracts-ui with GNU General Public License v3.0 | 4 votes |
|
function Option<T>({ children, ...props }: OptionProps<DropdownOption<T>, false>) {
return (
<components.Option {...props}>
<span>{children}</span>
{props.isSelected && <CheckIcon className="selected" />}
</components.Option>
);
}
Example #8
| Source File: index.tsx From platform with MIT License | 3 votes |
|
function MemberSearch({ members, setSelectedMemberId }) {
const [query, setQuery] = useState('');
const [selectedMember, setSelectedMember] = useState();
const filteskyMembers =
query === ''
? members
: members.filter((member) => {
return member.name.toLowerCase().includes(query.toLowerCase())
});
const handleSelectedMember = member => {
setSelectedMember(member);
setSelectedMemberId(member.id);
};
return (
<Combobox as="div" value={selectedMember} onChange={handleSelectedMember}>
<Combobox.Label className="block text-sm font-medium text-gray-700">Select Member</Combobox.Label>
<div className="relative mt-1">
<Combobox.Input
className="w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 sm:text-sm"
onChange={(event) => setQuery(event.target.value)}
displayValue={(member) => member.name}
/>
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
<SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</Combobox.Button>
{filteskyMembers.length > 0 && (
<Combobox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{filteskyMembers.map((member) => (
<Combobox.Option
key={member.id}
value={member}
className={({ active }) =>
classNames(
'relative cursor-default select-none py-2 pl-3 pr-9',
active ? 'bg-sky-600 text-white' : 'text-gray-900'
)
}
>
{({ active, selected }) => (
<>
<div className="flex">
<span className={classNames('truncate', selected && 'font-semibold')}>{member.name}</span>
<span
className={classNames(
'ml-2 truncate text-gray-500',
active ? 'text-sky-200' : 'text-gray-500'
)}
>
{member.email}
</span>
</div>
{selected && (
<span
className={classNames(
'absolute inset-y-0 right-0 flex items-center pr-4',
active ? 'text-white' : 'text-sky-600'
)}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
)}
</>
)}
</Combobox.Option>
))}
</Combobox.Options>
)}
</div>
</Combobox>
)
}
