[ui] add code clip tabs in page

moon/package.json

@@ -11,19 +11,20 @@
   "dependencies": {
     "@ant-design/icons": "^5.4.0",
     "@ant-design/nextjs-registry": "^1.0.1",
-    "@headlessui/react": "^2.1.3",
+    "@headlessui/react": "^2.1.6",
     "@headlessui/tailwindcss": "^0.2.1",
     "@heroicons/react": "^2.1.5",
-    "@lexical/react": "^0.17.0",
-    "@tailwindcss/forms": "^0.5.7",
+    "@lexical/react": "^0.17.1",
+    "@tailwindcss/forms": "^0.5.9",
     "clsx": "^2.1.1",
+    "copy-to-clipboard": "^3.3.3",
     "date-fns": "^3.6.0",
-    "framer-motion": "^11.3.19",
+    "framer-motion": "^11.5.3",
     "github-markdown-css": "^5.6.1",
     "highlight.js": "^11.10.0",
-    "lexical": "^0.17.0",
-    "next": "^14.2.6",
-    "prism-react-renderer": "^2.3.1",
+    "lexical": "^0.17.1",
+    "next": "^14.2.9",
+    "prism-react-renderer": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1"

moon/src/app/(dashboard)/tree/[...path]/page.tsx

@@ -3,6 +3,7 @@
 import CodeTable from '@/components/CodeTable'
 import Bread from '@/components/BreadCrumb'
 import RepoTree from '@/components/RepoTree'
+import CloneTabs from '@/components/CloneTabs'
 import { useEffect, useState } from 'react'
 import { Flex, Layout } from "antd/lib";
 
@@ -51,6 +52,9 @@ export default function Page({ params }: { params: { path: string[] } }) {
         <Flex gap="middle" wrap>
             <Layout style={breadStyle}>
                 <Bread path={params.path} />
+                <Flex justify={'flex-end'} >
+                    <CloneTabs/>
+                </Flex>
             </Layout>
             <Layout style={treeStyle}>
                 <RepoTree directory={directory} />

moon/src/components/CloneTabs.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { Tabs, TabsProps, Button, Space, Popover, Input } from 'antd';
+import {
+    CodeBracketIcon,
+} from '@heroicons/react/16/solid'
+import copy from 'copy-to-clipboard';
+import { CopyOutlined, CheckOutlined, DownloadOutlined } from '@ant-design/icons';
+import { usePathname } from 'next/navigation';
+
+
+const CloneTabs: React.FC = () => {
+    const pathname = usePathname();
+    const [text, setText] = useState<string>(pathname);
+    const [copied, setCopied] = useState<boolean>(false);
+    const [active_tab, setActiveTab] = useState<string>('1')
+
+    const onChange = (key: string) => {
+        setActiveTab(key)
+    };
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const domain = window.location.origin;
+            if (active_tab === '1') {
+                setText(`${domain}${pathname.replace('/tree', '')}.git`);
+            } else {
+                setText(`ssh://git@${window.location.hostname}:${pathname.replace('/tree', '')}.git`);
+            }
+        }
+    }, [pathname, active_tab]);
+
+
+
+    const handleCopy = () => {
+        copy(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
+    };
+
+    const tab_items: TabsProps['items'] = [
+        {
+            key: '1',
+            label: 'HTTP',
+            children:
+                <Space style={{ width: '100%' }}>
+                    <Input value={text} />
+                    <Button onClick={handleCopy} icon={copied ? <CheckOutlined /> : <CopyOutlined />} size={'small'} />
+                </Space>
+        },
+        {
+            key: '2',
+            label: 'SSH',
+            children: <Space style={{ width: '100%' }}>
+                <Input value={text} />
+                <Button onClick={handleCopy} icon={copied ? <CheckOutlined /> : <CopyOutlined />} size={'small'} />
+            </Space>
+        }
+    ];
+
+    return (
+        <Popover placement="bottomRight"
+            content={<Tabs defaultActiveKey="1" items={tab_items} onChange={onChange} />}
+            trigger="click">
+            <Button icon={<DownloadOutlined />}>Code</Button>
+        </Popover>
+    )
+
+}
+
+export default CloneTabs;