feat: Use Before, During, After components in shikiComponent

Author: trillium

packages/test-case-component/src/components/shikiComponent.tsx

@@ -6,27 +6,10 @@ export const ShikiComponent: React.FC<{ data: any }> = ({ data }) => {
       <div className="p-8">
         <h2 className="dark:text-stone-100">{data.command}</h2>
         <div className="m-2 border">
-          {data.before && (
-            <div
-              className="p-4"
-              dangerouslySetInnerHTML={{ __html: data.before }}
-            />
-          )}
-          {(data.during) && (
-            <>
-              <div
-                className="p-4"
-                dangerouslySetInnerHTML={{ __html: data.during || data.before }}
-              />
-            </>
-          )}
+          <Before content={data.before} />
           <div className="command">{data.command}</div>
-          {data.after && (
-            <div
-              className="p-4"
-              dangerouslySetInnerHTML={{ __html: data.after }}
-            />
-          )}
+          <During content={data.during} />
+          <After content={data.after} />
         </div>
       </div>
       <details>