Fix name

content/posts/build-own-store-with-usesyncexternalstore.mdx

@@ -142,7 +142,7 @@ const Couter = () => {
 };
 ```
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
@@ -242,7 +242,7 @@ const Count = () => {
 };
 ```
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
@@ -373,7 +373,7 @@ export const useTodoStore = (): [Todo, RUADispatch<TodoAction>] => [
 ];
 ```
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Input.tsx': {

content/posts/generic-component-encapsulate-reusable-component.mdx

@@ -22,7 +22,7 @@ tags: [TypeScript, React]
 
 React Hook Forms 对 TypeScript 支持良好，有了 TypeScript 我们就可以在开发时验证表单类型。而表单的数据类型也是后续封装通用组件较为繁琐的一个地方。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/App.tsx':
@@ -207,7 +207,7 @@ const sayIt = <T extends number | string>(p: Person<T>) => {
 
 来看一个简单的小组件，该组件可以以一个常见的对象类型 `Record<string, unknown>` 来根据指定的 key 访问其值，并展示在 DOM 上。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/App.tsx':
@@ -354,4 +354,4 @@ const Input = <T extends Record<string, unknown>>({
 />
 ```
 
-<RuaCodeSandbox url="https://codesandbox.io/s/reusable-input-o7e4jt?file=/src/App.tsx" />
+<RUACodeSandbox url="https://codesandbox.io/s/reusable-input-o7e4jt?file=/src/App.tsx" />

content/posts/hello-world.mdx

@@ -14,7 +14,7 @@ console.log('Hello world');
 
 ## Say hello to world
 
-<RuaSandpack
+<RUASandpack
   template="react"
   files={{
     '/App.js': sandpack['hello-world'].hello,

content/posts/how-to-load-a-background-with-threejs.mdx

@@ -45,7 +45,7 @@ renderer.render(scene, camera);
 
 Now, we can get a black canvas in our document.
 
-<RuaSandpack
+<RUASandpack
   template="react"
   files={{
     '/App.js': sandpack['how-to-load-a-background-with-threejs'].firstScene,
@@ -125,7 +125,7 @@ controls.enablePan = false;
 controls.update();
 ```
 
-<RuaSandpack
+<RUASandpack
   template="react"
   files={{
     '/App.js': sandpack['how-to-load-a-background-with-threejs'].loadBackground,

content/posts/javascript-practice-multiplication-table.mdx

@@ -291,4 +291,4 @@ window.onload = function () {
 };
 ```
 
-<RuaCodepen url="https://codepen.io/Defectink/pen/BaLQZZQ" />
+<RUACodepen url="https://codepen.io/Defectink/pen/BaLQZZQ" />

content/posts/object-around-in-threejs.mdx

@@ -87,4 +87,4 @@ earth.getWorldPosition(position);
 
 ## Demo
 
-<RuaCodeSandbox url="https://codesandbox.io/s/arounding-box-b1g4qq" />
+<RUACodeSandbox url="https://codesandbox.io/s/arounding-box-b1g4qq" />

content/posts/react18-new-hooks.mdx

@@ -26,7 +26,7 @@ tags: [React, TypeScript]
 
 `useTransition` 返回的元组中包含两个值 `[pending, setTransiton]` ，分别是 `setTransiton` 方法和表示正在过渡的状态 `pending` 。如果需要在过渡时展示特定的 UI 就可以使用 `pending` 来控制状态。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Button.tsx': {
@@ -45,7 +45,7 @@ tags: [React, TypeScript]
 
 将原本的状态值 `value` 与 `useDeferredValue` 返回的副本相比较就会发现 `value` 会随着 UI 一起被更新，而被延迟的状态 `deferred` 会等待 UI 更新结束后再做更新。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Button.tsx': {
@@ -65,7 +65,7 @@ tags: [React, TypeScript]
 - 为页面中需要唯一 ID 元素提供 ID，例如 `<label for="ID">` 。
 - SSR 到客户端注入时需要 ID 避免错误。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
@@ -147,7 +147,7 @@ export default store;
 
 其中， `listeners` 用于存放 `subscribe` 的回调，在我们更新状态后需要通知 React 来更新组件。所以在 `setState` 中遍历执行。之所以使用 `Set()` 是因为 `subscribe` 还需要返回一个函数用于注销 `listener` 。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/Input.tsx': {
@@ -171,7 +171,7 @@ CSS-in-JS 库通常需要在运行时插入或修改 `<style>`  标签等。当
 
 解决这个问题的最好办法就是所有东西呈现给浏览器绘制前就进行改变。没错 `useInsertionEffect` 与 `useEffect` 有着同样的签名，但它会同步的在所有 DOM 更改之前触发。比 `useLayoutEffect` 还要早触发，这样就可以用于在重绘之前注入样式。
 
-<RuaSandpack
+<RUASandpack
   template="react-ts"
   files={{
     '/App.tsx': sandpack['react18-new-hooks'].useInsertionEffect,