From 47ad1966a06d7d181f052611e5f273333b8349ef Mon Sep 17 00:00:00 2001
From: Logan Zartman <logan.zartman@utexas.edu>
Date: Wed, 8 Nov 2023 18:54:26 -0500
Subject: [PATCH] updates

---
 src/app/blog/posts/diy-suspense-in-react.mdx | 8 ++++++--
 src/lib/components/Admonition.tsx            | 5 ++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app/blog/posts/diy-suspense-in-react.mdx b/src/app/blog/posts/diy-suspense-in-react.mdx
index 5e56c84..4cc7a2d 100644
--- a/src/app/blog/posts/diy-suspense-in-react.mdx
+++ b/src/app/blog/posts/diy-suspense-in-react.mdx
@@ -186,7 +186,7 @@ Eventually we want the component to _un_-suspend. When React catches the Promise
 
 After a component throws, React doesn't have any magic way to jump back to where the render left off. Instead, it simply re-renders the entire component from scratch. Since suspending can interrupt rendering before all hooks have run, React can't maintain any of the state from the incomplete render. So, when a component is un-suspended, it's like it's remounted.
 
-If the suspending code is implemented correctly, it will not throw the Promise once it's resolved. This allows the rendering to complete, and the component to un-suspend.
+If the suspending code is implemented correctly, it will not throw the Promise once the promise has resolved. This allows the rendering to complete, and the component to un-suspend.
 
 ## TL;DR
 
@@ -194,7 +194,11 @@ To suspend, we throw a Promise. React catches the Promise at the nearest `<Suspe
 
 ## Just use `use()`
 
-**Note:** `use()` is currently only available in the canary release of React (18.3).
+<Admonition type="note">
+
+`use()` is currently only available in the canary release of React (18.3).
+
+</Admonition>
 
 I think Suspense feels a bit like `await`. It makes a Promise look synchronous by interrupting rendering and restarting once the Promise resolves. I also mentioned how the React team is a bit hesitant about people writing their own code that suspends.
 
diff --git a/src/lib/components/Admonition.tsx b/src/lib/components/Admonition.tsx
index 4452c0b..2128d67 100644
--- a/src/lib/components/Admonition.tsx
+++ b/src/lib/components/Admonition.tsx
@@ -1,18 +1,21 @@
-export type Type = 'note' | 'warning';
+export type Type = 'note' | 'warning' | 'tip';
 
 const icons: Record<Type, React.ReactNode> = {
   note: <div>🛈</div>,
   warning: <div>⚠</div>,
+  tip: <div>💡</div>,
 };
 
 const messages: Record<Type, React.ReactNode> = {
   note: <div>Note</div>,
   warning: <div>Warning!</div>,
+  tip: <div>Tip</div>,
 };
 
 const classNames: Record<Type, string> = {
   note: 'text-indigo-100 bg-indigo-500/10 ring-indigo-500',
   warning: 'text-amber-100 bg-amber-500/10 ring-amber-500',
+  tip: 'text-violet-100 bg-violet-500/10 ring-violet-500',
 };
 
 export default function Admonition({