feat: Migrate the blob module code and refactor the breadcrumb and tree component module code.

moon/apps/web/components/CodeView/TreeView/BreadCrumb.tsx

@@ -1,29 +1,47 @@
+import React from 'react';
 import 'github-markdown-css/github-markdown-light.css'
-import { Breadcrumb } from 'antd'
 import { useRouter } from 'next/router';
+import { BreadcrumbLabel } from '@/components/Titlebar/BreadcrumbTitlebar'
+import { Link } from '@gitmono/ui'
+import { UrlObject } from 'url';
 
 const Bread = ({ path }:any) => {
   const router = useRouter();
   const scope = router.query.org as string
 
-  const breadCrumbItems = path?.map((sub_path: any, index: number) => {
-      if (index == path?.length - 1) {
-          return {
-              title: sub_path,
-          };
-      } else {
-          const href = `/${scope}/code/tree/${path?.slice(0, index + 1).join('/')}`;
+  const breadCrumbItems = path?.map((subPath: any, index: number) => {
+    const href = `/${scope}/code/tree/${path.slice(0, index + 1).join('/')}`;
 
-          return {
-              title: sub_path,
-              href: href,
-          };
-      }
-    });
+    return {
+      title: subPath,
+      href: href,
+      isLast: index === path.length - 1,
+    };
+  });
 
     return (
-      <div className='m-4'>
-        <Breadcrumb items={breadCrumbItems}/>
+      <div className='m-4 flex items-center overflow-x-auto pb-2 no-scrollbar'>
+
+        {breadCrumbItems?.map((item: { isLast: any; title: string; href: string | UrlObject; }, index: number) => (
+        <React.Fragment key={item.title}>
+          {/* displayed after the home item and before non-last items */}
+          {index > 0 && (
+            <span className="text-gray-400 mx-1">/</span>
+          )}
+          {/* Current breadcrumb item */}
+          {item.isLast ? (
+            // last item
+            <BreadcrumbLabel>
+              {item?.title}
+            </BreadcrumbLabel>
+          ) : (
+            // middle item
+            <Link href={item?.href} >
+              <BreadcrumbLabel className="ml-1">{item?.title}</BreadcrumbLabel>
+            </Link>
+          )}
+        </React.Fragment>
+))}
       </div>
     );
 };

moon/apps/web/components/CodeView/TreeView/CloneTabs.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Tabs, TabsProps, Button, Space, Popover, Input } from 'antd';
 import copy from 'copy-to-clipboard';
-import {CopyIcon, AlarmCheckIcon, DownloadIcon} from '@gitmono/ui/Icons'
-// import { CopyOutlined, CheckOutlined, DownloadOutlined } from '@ant-design/icons';
+import {CopyIcon, DownloadIcon} from '@gitmono/ui/Icons'
+import { CheckOutlined,  } from '@ant-design/icons';
 import { usePathname } from 'next/navigation';
 
 
@@ -43,15 +43,15 @@ const CloneTabs = ({ endpoint }:any) => {
             children:
                 <Space style={{ width: '100%' }}>
                     <Input value={text} />
-                    <Button onClick={handleCopy} icon={copied ? <AlarmCheckIcon /> : <CopyIcon />} size={'small'} />
+                    <Button onClick={handleCopy} icon={copied ? <CheckOutlined /> : <CopyIcon />} size={'small'} />
                 </Space>
         },
         {
             key: '2',
             label: 'SSH',
             children: <Space style={{ width: '100%' }}>
                 <Input value={text} />
-                <Button onClick={handleCopy} icon={copied ? <AlarmCheckIcon /> : <CopyIcon />} size={'small'} />
+                <Button onClick={handleCopy} icon={copied ? <CheckOutlined /> : <CopyIcon />} size={'small'} />
             </Space>
         }
     ];