Update index.tsx

src/components/SelectPaste2/index.tsx

@@ -2,40 +2,42 @@ import React, { useState } from 'react';
 import CodeBlock from "@theme/CodeBlock";
 import Admonition from "@theme/Admonition";
 
+interface SnapshotItem {
+  name: string;
+  text: string;
+}
+
 interface SelectPasteProps {
-  names: string[];
-  customText: string;
+  items: SnapshotItem[];
   tip?: string;
 }
 
-const SelectPaste: React.FC<SelectPasteProps> = ({ names, customText, tip }) => {
-  const [selectedName, setSelectedName] = useState<string>(names[0]);
+const SelectPaste: React.FC<SelectPasteProps> = ({ items, tip }) => {
+  const [selectedItem, setSelectedItem] = useState<SnapshotItem>(items[0]);
 
-  const renderedText = customText.replace("{{name}}", selectedName);
-
   return (
     <div className="max-w-4xl mx-auto p-4">
       {tip && (
-				<Admonition type="tip" icon="📘" title="How to Use">
-					<p>{tip}</p>
-				</Admonition>
-			)}
+        <Admonition type="tip" icon="📘" title="How to Use">
+          <p>{tip}</p>
+        </Admonition>
+      )}
 
       <div className="button-group card">
-        {names.map((name, index) => (
+        {items.map((item, index) => (
           <button
             key={index}
-            onClick={() => setSelectedName(name)}
+            onClick={() => setSelectedItem(item)}
             className="button button--primary"
           >
-            {name}
+            {item.name}
           </button>
         ))}
       </div>
 
       <CodeBlock language="bash" showLineNumbers>
-				{renderedText}
-			</CodeBlock>
+        {selectedItem.text}
+      </CodeBlock>
     </div>
   );
 };