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

41 lines
1.1 KiB
TypeScript

'use client'
import {
RiPlanetFill,
RiPlanetLine,
} from '@remixicon/react'
import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import { cn } from '@/utils/classnames'
type ExploreNavProps = {
className?: string
}
const ExploreNav = ({
className,
}: ExploreNavProps) => {
const { t } = useTranslation()
const selectedSegment = useSelectedLayoutSegment()
const activated = selectedSegment === 'explore'
return (
<Link
href="/explore/apps"
className={cn(className, 'group', activated && 'bg-components-main-nav-nav-button-bg-active 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')}
>
{
activated
? <RiPlanetFill className="h-4 w-4" />
: <RiPlanetLine className="h-4 w-4" />
}
<div className="ml-2 max-[1024px]:hidden">
{t('menus.explore', { ns: 'common' })}
</div>
</Link>
)
}
export default ExploreNav