From 29f184c15d36e42af750261f81ad67b49fe58c0b Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 9 Oct 2024 23:55:01 +0800
Subject: [PATCH] refactor: add CodeExample component

---
 src/client/components/CodeExample.tsx       | 37 +++++++++++++++++++++
 src/client/components/feed/FeedApiGuide.tsx | 29 ++++++++--------
 2 files changed, 51 insertions(+), 15 deletions(-)
 create mode 100644 src/client/components/CodeExample.tsx

diff --git a/src/client/components/CodeExample.tsx b/src/client/components/CodeExample.tsx
new file mode 100644
index 0000000..f7dfd1b
--- /dev/null
+++ b/src/client/components/CodeExample.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { CodeBlock } from './CodeBlock';
+
+interface CodeExampleItem {
+  label: string;
+  code?: string;
+  element?: React.ReactNode;
+}
+interface CodeExampleProps {
+  className?: string;
+  example: Record<string, CodeExampleItem>;
+}
+export const CodeExample: React.FC<CodeExampleProps> = React.memo((props) => {
+  const keys = Object.keys(props.example);
+
+  return (
+    <Tabs className={props.className} defaultValue={keys[0]}>
+      <TabsList>
+        {keys.map((key) => (
+          <TabsTrigger key={key} value={key}>
+            {props.example[key].label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+
+      {keys.map((key) => (
+        <TabsContent key={key} value={key}>
+          {props.example[key].element ?? (
+            <CodeBlock code={props.example[key].code ?? ''} />
+          )}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+});
+CodeExample.displayName = 'CodeExample';
diff --git a/src/client/components/feed/FeedApiGuide.tsx b/src/client/components/feed/FeedApiGuide.tsx
index f918654..a60b465 100644
--- a/src/client/components/feed/FeedApiGuide.tsx
+++ b/src/client/components/feed/FeedApiGuide.tsx
@@ -1,8 +1,7 @@
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import React from 'react';
-import { CodeBlock } from '../CodeBlock';
 import { useTranslation } from '@i18next-toolkit/react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+import { CodeExample } from '../CodeExample';
 
 export const FeedApiGuide: React.FC<{ channelId: string }> = React.memo(
   (props) => {
@@ -11,21 +10,21 @@ export const FeedApiGuide: React.FC<{ channelId: string }> = React.memo(
     return (
       <Card className="w-full overflow-hidden">
         <CardHeader>
-          <div>{t('You can send any message into this channel with:')}</div>
+          <div>{t('You can send a message to this channel with:')}</div>
         </CardHeader>
         <CardContent className="flex w-full flex-col gap-5 overflow-hidden">
-          <Tabs defaultValue="curl">
-            <TabsList>
-              <TabsTrigger value="curl">curl</TabsTrigger>
-              <TabsTrigger value="fetch">fetch</TabsTrigger>
-            </TabsList>
-            <TabsContent value="curl">
-              <CodeBlock code={generateCurlCode(props.channelId)} />
-            </TabsContent>
-            <TabsContent value="fetch">
-              <CodeBlock code={generateFetchCode(props.channelId)} />
-            </TabsContent>
-          </Tabs>
+          <CodeExample
+            example={{
+              curl: {
+                label: 'curl',
+                code: generateCurlCode(props.channelId),
+              },
+              fetch: {
+                label: 'fetch',
+                code: generateFetchCode(props.channelId),
+              },
+            }}
+          />
 
           <div className="pl-2 font-bold">{t('OR')}</div>