mirror of
https://github.com/langgenius/dify.git
synced 2026-07-23 20:18:40 +08:00
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { Button } from '@langgenius/dify-ui/button'
|
|
import { cn } from '@langgenius/dify-ui/cn'
|
|
import { DialogDescription, DialogTitle } from '@langgenius/dify-ui/dialog'
|
|
import * as React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import DifyLogo from '../../base/logo/dify-logo'
|
|
import styles from './header.module.css'
|
|
|
|
type HeaderProps = {
|
|
onClose: () => void
|
|
}
|
|
|
|
const Header = ({ onClose }: HeaderProps) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<div className="flex min-h-[105px] w-full justify-center px-10">
|
|
<div className="relative flex max-w-[1680px] grow flex-col justify-end gap-y-1 border-x border-divider-accent p-6 pt-8">
|
|
<div className="flex items-end">
|
|
<div aria-hidden="true" className="py-[5px]">
|
|
<DifyLogo className="h-[27px] w-[60px]" />
|
|
</div>
|
|
<DialogTitle
|
|
className={cn(
|
|
'bg-billing-plan-title-bg bg-clip-text px-1.5 text-[37px] leading-[1.2] text-transparent',
|
|
styles.instrumentSerif,
|
|
)}
|
|
>
|
|
{t(($) => $['plansCommon.title.plans'], { ns: 'billing' })}
|
|
</DialogTitle>
|
|
</div>
|
|
<DialogDescription className="system-sm-regular text-text-tertiary">
|
|
{t(($) => $['plansCommon.title.description'], { ns: 'billing' })}
|
|
</DialogDescription>
|
|
<Button
|
|
variant="secondary"
|
|
className="absolute right-[-18px] bottom-[40.5px] z-10 size-9 rounded-full p-2"
|
|
aria-label={t(($) => $['operation.close'], { ns: 'common' })}
|
|
onClick={onClose}
|
|
>
|
|
<span aria-hidden="true" className="i-ri-close-line size-5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(Header)
|