feat: add integration modal

src/client/components/AlertConfirm.tsx

@@ -40,11 +40,13 @@ export const AlertConfirm: React.FC<AlertConfirmProps> = React.memo((props) => {
 
         <AlertDialogFooter>
           <AlertDialogCancel onClick={props.onCancel}>
-            {t('Cancel')}
+            {props.onConfirm ? t('Cancel') : t('Continue')}
           </AlertDialogCancel>
-          <AlertDialogAction onClick={props.onConfirm}>
-            {t('Confirm')}
-          </AlertDialogAction>
+          {props.onConfirm && (
+            <AlertDialogAction onClick={props.onConfirm}>
+              {t('Confirm')}
+            </AlertDialogAction>
+          )}
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>

src/client/components/feed/FeedIntegration.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { LuGithub } from 'react-icons/lu';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { CodeBlock } from '../CodeBlock';
+import { useTranslation } from '@i18next-toolkit/react';
+
+export const FeedIntegration: React.FC<{
+  feedId: string;
+}> = React.memo((props) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-wrap p-2">
+      <FeedIntegrationItem
+        icon={<LuGithub size={32} />}
+        label="Github"
+        content={
+          <div>
+            <div className="text-lg font-bold">{t('Receive Webhooks')}</div>
+
+            <div>{t('Add github webhook with url')}:</div>
+
+            <CodeBlock
+              code={`${window.location.origin}/open/feed/${props.feedId}/github`}
+            />
+
+            <div>{t('Dont remember send data with application/json')}</div>
+          </div>
+        }
+      />
+    </div>
+  );
+});
+FeedIntegration.displayName = 'FeedIntegration';
+
+const FeedIntegrationItem: React.FC<{
+  icon: React.ReactNode;
+  label: string;
+  content: React.ReactNode;
+}> = React.memo((props) => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <div className="border-muted hover:bg-muted flex h-20 w-20 cursor-pointer flex-col items-center justify-center rounded-lg border p-2 text-center">
+          <div className="mb-1">{props.icon}</div>
+          <div>{props.label}</div>
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-screen sm:w-[640px]">
+        {props.content}
+      </PopoverContent>
+    </Popover>
+  );
+});
+FeedIntegrationItem.displayName = 'FeedIntegrationItem';

src/client/routes/feed/$channelId/index.tsx

@@ -13,12 +13,11 @@ import { useTranslation } from '@i18next-toolkit/react';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useEvent } from '@/hooks/useEvent';
 import { AlertConfirm } from '@/components/AlertConfirm';
-import { LuPencil, LuTrash } from 'react-icons/lu';
+import { LuPencil, LuTrash, LuWebhook } from 'react-icons/lu';
 import { Button } from '@/components/ui/button';
-import { Scrollbar } from '@radix-ui/react-scroll-area';
-import { Empty } from 'antd';
 import { FeedApiGuide } from '@/components/feed/FeedApiGuide';
 import { FeedEventItem } from '@/components/feed/FeedEventItem';
+import { FeedIntegration } from '@/components/feed/FeedIntegration';
 
 export const Route = createFileRoute('/feed/$channelId/')({
   beforeLoad: routeAuthBeforeLoad,
@@ -60,6 +59,15 @@ function PageComponent() {
           title={info?.name ?? ''}
           actions={
             <div className="space-x-2">
+              {info?.id && (
+                <AlertConfirm
+                  title={t('Integration')}
+                  content={<FeedIntegration feedId={info.id} />}
+                >
+                  <Button variant="default" size="icon" Icon={LuWebhook} />
+                </AlertConfirm>
+              )}
+
               <Button
                 variant="outline"
                 size="icon"