feat: Create Before, During, After components for shikiComponent

Author: trillium

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

@@ -33,3 +33,27 @@ export const ShikiComponent: React.FC<{ data: any }> = ({ data }) => {
     </div>
   );
 };
+
+const Before = ({ content }: { content: string }) => {
+  return <div className="p-4" dangerouslySetInnerHTML={{ __html: content }} />;
+};
+
+const During = ({ content }: { content: string }) => {
+  if (content) {
+    console.log("🧄", content);
+
+    return (
+      <div className="p-4" dangerouslySetInnerHTML={{ __html: content }} />
+    );
+  }
+  return <></>;
+};
+
+const After = ({ content }: { content: string }) => {
+  return (
+    <div
+      className="flex flex-col gap-y-4 p-4"
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  );
+};