@heroicons/react/solid#ExclamationIcon TypeScript Examples
The following examples show how to use
@heroicons/react/solid#ExclamationIcon.
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: Admonition.tsx From eventcatalog with MIT License | 6 votes |
|
getConfigurationByType = (type: string) => {
switch (type) {
case 'alert':
return { color: 'red', icon: ExclamationIcon };
case 'warning':
return { color: 'yellow', icon: ExclamationIcon };
default:
return { color: 'indigo', icon: InformationCircleIcon };
}
}
Example #2
| Source File: JuniorCustom.tsx From platform with MIT License | 4 votes |
|
export default function JuniorCustomEvent() {
const { id } = useParams();
const history = useHistory();
const [isLoading, setIsLoading] = useState(false);
const [startDate, setStartDate] = useState();
const [defaultPrice, setDefaultPrice] = useState();
const [entryCount, setEntryCount] = useState(0);
const [isFull, setIsFull] = useState(false);
const [isLive, setIsLive] = useState(false);
const [isClosed, setIsClosed] = useState(false);
useEffect(() => {
document.title = "The Chess Centre | IGS Junior Event";
const fetchEvent = async () => {
setIsLoading(true);
try {
const response = await API.graphql({
query: getEvent,
variables: { id },
authMode: "AWS_IAM",
})
if (response && response.data) {
const {
data: {
getEvent: {
startDate,
entryCount,
isLive,
complete,
type: { defaultPrice, maxEntries } = {},
} = {},
} = {},
} = response;
setStartDate(startDate);
setDefaultPrice(defaultPrice);
setEntryCount(entryCount);
setIsFull(entryCount >= maxEntries);
setIsClosed(complete);
setIsLive(isLive);
}
setIsLoading(false);
} catch (error) {
console.log("Error", error);
setIsLoading(false);
}
};
fetchEvent();
}, [id, startDate, defaultPrice]);
return (
<div>
<div className="relative pt-6 pb-6 sm:pb-6 md:pb-6 lg:pb-6 xl:pb-6">
<LandingNav />
</div>
<div className="py-10 bg-gray-50 overflow-hidden">
<div className="max-w-7xl mx-auto px-4 space-y-8 sm:px-6 lg:px-8">
<div className="text-base max-w-prose mx-auto lg:max-w-none">
<h2 className="text-base text-teal-600 font-semibold tracking-wide uppercase">
<i className="fad fa-bolt"></i> Let's go!
</h2>
<p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
IGS Junior Event
</p>
<p className="mt-2 text-2xl leading-8 font-extrabold tracking-tight text-gray-500 sm:text-2xl">
{!isLoading && startDate && prettyLongDate(startDate)}
</p>
{!isLoading && isLive && (
<div className="mt-3">
<a
href="/broadcast/live"
className={`inline-flex items-center px-16 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-teal-700 hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-400`}
>
<span className="flex relative h-2 w-2">
<span className="animate-ping absolute inline-flex h-full rounded-full bg-orange-500 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-orange-600"></span>
</span>{" "}
<span className="ml-2">Watch Here</span>
</a>
</div>
)}
</div>
<div className="relative text-base max-w-prose mx-auto lg:max-w-5xl lg:mx-0 lg:pr-72">
<p className="prose prose-teal text-gray-500 mx-auto lg:max-w-none text-justify py-2">
The Chess Centre brings to you our{" "}
<span className="font-semibold">1st Junior Rapidplay</span> held
at the Ilkley Grammar School.
</p>
<p className="prose prose-teal text-gray-500 mx-auto lg:max-w-none text-justify py-2">
This event is open to all juniors under the age of 18 as at 1st
September 2021.
</p>
<div className="prose prose-teal text-teal-600 mx-auto lg:max-w-none text-justify">
<h3>Sections</h3>
<ul>
<li>Open</li>
<li>
Intermediate{" "}
<span className="text-xs text-gray-500">
(1200 ECF and below)
</span>
</li>
<li>
Minor{" "}
<span className="text-xs text-gray-500">
(1000 ECF and below)
</span>
</li>
</ul>
<p className="italic text-gray-500 text-xs">
Players with fewer than 15 competitive games may enter any
section, irrespective of rating.
</p>
</div>
</div>
{!isLoading && Boolean(entryCount) && (
<div className="relative mx-auto lg:max-w-5xl lg:mx-0 lg:pr-72">
<div className="rounded-md bg-green-50 p-4 my-4">
<div className="flex">
<div className="flex-shrink-0">
<CheckCircleIcon
className="h-5 w-5 text-green-400"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-green-800">
There are currently {entryCount}{" "}
{entryCount === 1 ? "entry" : "entries"}.
<br className="block sm:hidden" />
<Link
to={`/app/events?show_info=${id}`}
className="font-medium underline text-green-700 hover:text-green-600 sm:ml-2"
>
Login to see the full list
</Link>
</p>
</div>
</div>
</div>
</div>
)}
<div className="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-start">
<div className="relative">
<div className="prose text-gray-500 mx-auto lg:max-w-none text-justify">
<h3>Event Information</h3>
<p>
<i className="text-teal-600 fas fa-sitemap w-8"></i> 6 Rounds
</p>
<p>
<i className="text-teal-600 fas fa-chess-clock w-8"></i> 25
mins per player on the clock
</p>
<p>
<i className="text-teal-600 fas fa-badge-check w-8"></i> All
games will be ECF rapidplay rated
</p>
<p>
<i className="text-teal-600 fas fa-trophy w-8"></i> Trophies
in all sections for{" "}
<span className="font-semibold">top 3</span> finishers
</p>
<p>
<i className="text-teal-600 fas fa-medal w-8"></i> Age
category medals per section
</p>
<p>
<i className="text-teal-600 fas fa-pound-sign w-8"></i> Entry
fee £{defaultPrice}
</p>
</div>
<div className="rounded-md bg-yellow-50 p-4 my-4">
<div className="flex">
<div className="flex-shrink-0">
<ExclamationIcon
className="h-5 w-5 text-yellow-400"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-yellow-800">
ECF Membership Required
</h3>
<div className="mt-2 text-sm text-yellow-700">
<p>
All entries <span className="underline">must</span> have
an ECF membership. New members can create a FREE Junior
silver membership{" "}
<a
target="_blank"
rel="noreferrer"
href={`https://www.englishchess.org.uk/ecf-membership-rates-and-joining-details/`}
className="font-medium underline text-yellow-700 hover:text-yellow-600"
>click here</a>
</p>
</div>
</div>
</div>
</div>
<div className="prose prose-teal text-gray-500 mx-auto lg:max-w-none text-justify my-4">
<p className="italic text-xs">
Entries will close on the evening of{" "}
<span className="font-semibold">Thursday 19th May</span>
</p>
<h3>Address</h3>
<p>Ilkley Grammar School, Armitage Hall, LS29 8TH</p>
<p className="text-xs italic text-gray-500">
Entrance via Springs Lane
</p>
<div className="max-h-96">
<img
className="object-cover shadow-lg rounded-lg"
src={IlkleyGrammar}
alt="Ilkley Grammar School"
/>
</div>
</div>
<div className="prose prose-teal text-gray-500 mx-auto lg:max-w-none text-justify">
<h4>Parental notes</h4>
<p>
The organisers are only responsible for juniors in the playing
hall. We strongly recommend juniors are supervised when they
are not playing.
</p>
<p>
<i className="fas fa-camera-retro text-2xl text-teal-700"></i>{" "}
It is a condition of entry that photographs may be taken and
used for publicity. If you do not wish photographs of your
child to be used you must tell us on the day. Photos may
appear on our Chess Centre website or associated social media
pages (Facebook, Instagram, etc).
</p>
</div>
<div className="text-sm text-left mt-6 hidden sm:block">
<button
className="text-teal-600 hover:text-teal-500"
onClick={history.goBack}
>
<i className="fad fa-long-arrow-alt-left"></i> back
</button>
</div>
</div>
<div className="mt-12 relative text-base max-w-prose mx-auto lg:mt-0 lg:max-w-none">
<svg
className="hidden sm:block absolute top-0 right-0 -mt-20 -mr-20 lg:top-auto lg:right-auto lg:bottom-1/2 lg:left-1/2 lg:mt-0 lg:mr-0 xl:top-0 xl:right-0 xl:-mt-20 xl:-mr-20"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
aria-hidden="true"
>
<defs>
<pattern
id="bedc54bc-7371-44a2-a2bc-dc68d819ae60"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={384}
fill="url(#bedc54bc-7371-44a2-a2bc-dc68d819ae60)"
/>
</svg>
<RoundTimes
eventId={id}
eventType="junior"
isFull={isFull}
isLive={isLive}
isClosed={isClosed}
showSections={true}
sections={juniorSections}
/>
<div className="text-sm text-center mt-6 sm:hidden">
<button
className="text-teal-600 hover:text-teal-500"
onClick={history.goBack}
>
<i className="fad fa-long-arrow-alt-left"></i> back
</button>
</div>
</div>
</div>
</div>
</div>
<FooterLanding />
</div>
);
}
Example #3
| Source File: Festival.tsx From platform with MIT License | 4 votes |
|
export default function Festival() {
const { id } = useParams();
const event = rounds.find(({ type }) => type === "festival");
const [isLoading, setIsLoading] = useState(false);
const [eventEntries, setEventEntries] = useState({});
const [entriesCount, setEntriesCount] = useState(0);
useEffect(() => {
document.title = "The Chess Centre | Festival";
const fetchEvent = async () => {
setIsLoading(true);
const response = await API.graphql({
query: getEvent,
variables: { id },
authMode: "AWS_IAM",
}).catch((error) => {
console.log("Error fetching event.", id);
console.log(error.response);
});
if (response && response.data) {
const {
data: { getEvent: entries },
} = response;
setEventEntries(entries);
if (entries?.entries?.items) {
setEntriesCount(entries?.entries?.items.length);
}
}
setIsLoading(false);
};
fetchEvent();
}, [id]);
return (
<div className="relative bg-white">
<div className=" bg-gray-50 pt-6 pb-6 sm:pb-6 md:pb-6 lg:pb-6 xl:pb-6">
<LandingNav />
</div>
<div className="mx-auto py-10 px-4 sm:px-6 lg:max-w-7xl lg:px-8">
<div className="lg:grid lg:grid-rows-1 lg:grid-cols-7 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16">
<div className="lg:row-end-1 lg:col-span-4">
<div className="aspect-w-4 aspect-h-3 rounded-lg bg-gray-100 overflow-hidden">
<img
src={FestivalHero}
alt="hero"
className="object-center object-cover"
/>
</div>
</div>
<div className="max-w-2xl text-center sm:text-left mx-auto mt-4 sm:mt-16 lg:max-w-none lg:mt-0 lg:row-end-2 lg:row-span-2 lg:col-span-3">
{/* TITLE */}
<div className="flex flex-col-reverse">
<div className="mt-4">
<h1 className="text-3xl font-extrabold tracking-tight text-teal-brand sm:text-5xl">
<span className="text-orange-brand">Ilkley</span> Chess
Festival
</h1>
<p className="text-md text-blue-brand mt-2">
<time dateTime={festival.datetime}>{festival.date}</time>
</p>
</div>
</div>
{/* PRIZES */}
<div className="border-t border-gray-200 mt-6 pt-6 mb-4">
<h3 className="text-lg font-medium text-gray-900">
Prizes{" "}
<span className="text-sm text-gray-500">for all sections</span>
</h3>
<div className="mt-4 sm:mx-0">
<Prizes />
</div>
</div>
{/* ENTRY FORM */}
<div className="hidden sm:block">
<EntryForm id={id} />
</div>
{/* LOCATION */}
<div className="border-t border-gray-200 mt-10 pt-10">
<div className="grid grid-cols-1 sm:grid-cols-2">
<div className="order-2 sm:order-1">
<h3 className="text-lg font-medium text-gray-900">
Location
</h3>
<p className="mt-4 text-sm text-gray-500">
King's Hall & Winter Garden
</p>
<p className="mt-2 text-sm text-gray-500">Station Road</p>
<p className="mt-2 mb-10 text-sm text-gray-500">
Ilkley, LS29 8HB
</p>
</div>
<div className="order-1 sm:order-2">
<img
className="w-6/7 -mt-6"
alt="festival building"
src={FestivalBuilding}
/>
</div>
</div>
<FestivalMap />
</div>
</div>
{/* MORE DETAILS */}
<div className="w-full max-w-2xl mx-auto sm:mt-16 mt-6 lg:max-w-none lg:mt-0 lg:col-span-4">
<Tab.Group as="div">
<div className="border-b border-gray-200">
<Tab.List className="-mb-px flex space-x-8">
<Tab
className={({ selected }) =>
classNames(
selected
? "border-teal-600 text-teal-600"
: "border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300",
"whitespace-nowrap py-6 border-b-2 font-medium text-sm focus:ring-transparent"
)
}
>
Details
</Tab>
<Tab
className={({ selected }) =>
classNames(
selected
? "border-teal-600 text-teal-600"
: "border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300",
"whitespace-nowrap py-6 border-b-2 font-medium text-sm focus:ring-transparent"
)
}
>
Schedule
</Tab>
<Tab
className={({ selected }) =>
classNames(
selected
? "border-teal-600 text-teal-600"
: "border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300",
"whitespace-nowrap py-6 border-b-2 font-medium text-sm focus:ring-transparent"
)
}
>
Entries
</Tab>
<Tab
className={({ selected }) =>
classNames(
selected
? "border-teal-600 text-teal-600"
: "border-transparent text-gray-700 hover:text-gray-800 hover:border-gray-300",
"whitespace-nowrap py-6 border-b-2 font-medium text-sm focus:ring-transparent"
)
}
>
FAQs
</Tab>
</Tab.List>
</div>
<Tab.Panels as={Fragment}>
<Tab.Panel className="-mb-10 py-5 focus:ring-transparent">
<div className="relative">
<div className="prose prose-blue text-gray-500 mx-auto lg:max-w-none text-justify">
<h2>Sections</h2>
<ul className="font-medium text-teal-brand">
<li>Open</li>
<li>
Major{" "}
<span className="text-xs text-gray-500">
(2000 ECF and below)
</span>
</li>
<li>
Intermediate{" "}
<span className="text-xs text-gray-500">
(1750 ECF and below)
</span>
</li>
<li>
Minor{" "}
<span className="text-xs text-gray-500">
(1500 ECF and below)
</span>
</li>
</ul>
<p className="text-sm">
Unrated players will not be eligible for section
specific grading prizes.
</p>
</div>
<div className="rounded-md bg-yellow-50 p-4 my-4 hidden sm:block">
<div className="flex">
<div className="flex-shrink-0">
<ExclamationIcon
className="h-5 w-5 text-yellow-400"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-yellow-800">
ECF Membership Required
</h3>
<div className="mt-2 text-sm text-yellow-700">
<p>
All entries <span className="italic">should</span>{" "}
have an ECF membership, create yours here:{" "}
<a
target="_blank"
rel="noreferrer"
href={`https://www.englishchess.org.uk/ecf-membership-rates-and-joining-details/`}
className="font-medium underline text-yellow-700 hover:text-yellow-600"
>
ECF Membership
</a>
</p>
</div>
</div>
</div>
</div>
<div className="prose prose-blue text-gray-500 mx-auto lg:max-w-none text-justify mt-4">
<h2>Event Structure</h2>
<ul className="font-medium text-teal-brand">
<li>
Rounds: <span className="text-blue-brand">5</span>{" "}
<span className="text-gray-600 text-sm font-normal">
see schedule
</span>
</li>
<li>
Time Control:{" "}
<span className="text-blue-brand text-md">
90{" "}
<span className="text-sm text-gray-600 font-normal">
mins per player
</span>{" "}
+ 10{" "}
<span className="text-sm text-gray-600 font-normal">
second increment
</span>
</span>
</li>
<li>
Entry fee:{" "}
<span className="text-blue-brand">£30</span>
</li>
</ul>
<p className="text-sm">
Standard ECF rules apply. All games will be submited to
the ECF for offical rating calculation.
</p>
</div>
</div>
</Tab.Panel>
<Tab.Panel
as="dl"
className="text-gray-500 py-5 focus:ring-transparent"
>
<div className="prose prose-blue mb-4">
<h2>Schedule</h2>
</div>
<Schedule event={event} />
</Tab.Panel>
<Tab.Panel
as="dl"
className="text-sm text-gray-500 py-5 focus:ring-transparent"
>
<div className="prose prose-blue text-gray-500 mx-auto lg:max-w-none text-justify">
<h2>
Entries{" "}
<span className="text-gray-500 font-medium text-sm">
( {entriesCount} )
</span>
</h2>
{!isLoading && eventEntries && (
<EntriesTable eventDetails={eventEntries} />
)}
{isLoading && (
<div className="text-gray-300 italic text-center">
<i className="fas fa-spinner-third fa-spin fa-fw text-teal-500"></i>{" "}
fetching entry details ...
</div>
)}
</div>
</Tab.Panel>
<Tab.Panel
as="dl"
className="text-sm text-gray-500 py-5 focus:ring-transparent"
>
<div className="prose prose-teal text-gray-500 mx-auto lg:max-w-none text-justify">
<h2>FAQs</h2>
<ul>
<li>
<span className="font-bold text-teal-600">
Missing my ECF rating
</span>
<p>
We automatically search and check ECF rating data upon
account registration. If we are unable to accurately
determine your ECF rating (if you have one) we will
contact you. Otherwise, leave it with us, your rating
will appear within a few hours of any event entry!
</p>
</li>
<li>
<span className="font-bold text-teal-600">
Withdraw entry
</span>
<p>
If you are unable to make this event, please{" "}
<a
className="text-teal-600 hover:underline"
href="mailto:[email protected]?subject=Withdraw%20Festival%20Entry"
>
contact us
</a>{" "}
as soon as possible so we can process any refund.
Unfortunately, those who withdraw on the day or fail
to attend will not be eligible for refunds as we offer
your place to other players.
</p>
</li>
<li>
<span className="font-bold text-teal-600">
Rating list
</span>
<p>
We will use the latest ECF ratings published on the{" "}
<span className="font-bold">1st September 2022</span>{" "}
for this event, this may mean entries have to switch
sections if their rating jumps beyond the specified
rating cap. We will contact all players where this
occurs but will automatically move players up to the
next eligible section.
</p>
</li>
<li>
<span className="font-bold text-teal-600">
Anti-Cheating{" "}
<span className="text-red-600 font-medium text-sm">
(TBC)
</span>
</span>
<p>
We are working with an official FIDE registered
tournament arbiter to provide clear guidance for
electronic devices.
</p>
<p>
<span className="font-bold">ECF</span>{" "}
<a href="https://www.englishchess.org.uk/wp-content/uploads/2019/12/Anti-Cheating-Document.pdf">
anti-cheating policy
</a>
</p>
<p>
<span className="font-bold">FIDE</span>{" "}
<a href="https://www.fide.com/FIDE/handbook/Anti%20Cheating%20Guidelines.pdf">
anti-cheating guidelines
</a>
</p>
</li>
</ul>
</div>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
{/* ENTRY FORM */}
<div className="block sm:hidden mt-12">
<EntryForm id={id} />
</div>
</div>
</div>
</div>
<FooterLanding />
</div>
);
}
Example #4
| Source File: account.tsx From ultimate-saas-ts with MIT License | 4 votes |
|
Page: NextPage<Props> = ({ subscription }) => {
const handleCreatePortal = async () => {
const res = await fetch('/api/stripe/create-portal', {
method: 'POST',
headers: {
'content-type': 'application/json',
},
});
const data = await res.json();
const url = data.url;
window.location.assign(url);
};
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="max-w-3xl mx-auto">
<h1 className="text-6xl font-extrabold text-gray-800 sm:text-center">
Account
</h1>
<p className="mt-5 text-xl text-gray-500 sm:text-center">
We partnered with Stripe for a simplified billing.
</p>
<div className="mt-12 bg-white shadow sm:rounded-lg">
<div className="px-4 py-5 sm:p-6">
<h3 className="text-lg font-medium leading-6 text-gray-900">
Manage subscription
</h3>
{!!subscription?.cancel_at && (
<div className="p-4 my-6 border-l-4 border-yellow-400 bg-yellow-50">
<div className="flex">
<div className="flex-shrink-0">
<ExclamationIcon
className="w-5 h-5 text-yellow-400"
aria-hidden="true"
/>
</div>
<div className="ml-3">
<p className="text-sm text-yellow-700">
Your subscription will end the{' '}
{subscription.cancel_at.toLocaleDateString()}
</p>
</div>
</div>
</div>
)}
<div className="mt-2 sm:flex sm:items-start sm:justify-between">
<div className="max-w-xl text-sm text-gray-500">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Recusandae voluptatibus corrupti atque repudiandae nam.
</p>
</div>
<div className="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:flex sm:items-center">
{!!subscription ? (
<button
onClick={handleCreatePortal}
type="button"
className="inline-flex items-center px-4 py-2 font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm"
>
Change plan
</button>
) : (
<Link href="/">
<button
type="button"
className="inline-flex items-center px-4 py-2 font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm"
>
Subscribe
</button>
</Link>
)}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
