dify

dify/web/app/components/header/tools-nav/index.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
+import { useSelectedLayoutSegment } from 'next/navigation'
+import {
+  RiHammerFill,
+  RiHammerLine,
+} from '@remixicon/react'
+import classNames from '@/utils/classnames'
+type ToolsNavProps = {
+  className?: string
+}
+
+const ToolsNav = ({
+  className,
+}: ToolsNavProps) => {
+  const { t } = useTranslation()
+  const selectedSegment = useSelectedLayoutSegment()
+  const activated = selectedSegment === 'tools'
+
+  return (
+    <Link href="/tools" className={classNames(
+      'group text-sm font-medium',
+      activated && 'hover:bg-components-main-nav-nav-button-bg-active-hover bg-components-main-nav-nav-button-bg-active font-semibold shadow-md',
+      activated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover',
+      className,
+    )}>
+      {
+        activated
+          ? <RiHammerFill className='h-4 w-4' />
+          : <RiHammerLine className='h-4 w-4' />
+      }
+      <div className='ml-2 max-[1024px]:hidden'>
+        {t('common.menus.tools')}
+      </div>
+    </Link>
+  )
+}
+
+export default ToolsNav