mirror of
https://github.com/langgenius/dify.git
synced 2026-09-07 18:36:02 +08:00
cb6c04637b
Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: fatelei <fatelei@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: CodingOnStar <hanxujiang@dify.com> Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: 姜涵煦 <hanxujiang@jianghanxudeMacBook-Pro-2.local> Co-authored-by: L1nSn0w <l1nsn0w@qq.com> Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import type { PluginBanner } from '@dify/contracts/marketplace'
|
|
import type { CSSProperties, ReactNode } from 'react'
|
|
import type { MarketplaceBannerPage } from './banners'
|
|
import { cn } from '@langgenius/dify-ui/cn'
|
|
import {
|
|
HOME_HEADER_HEIGHT_PX,
|
|
HOME_SEARCH_HEIGHT_PX,
|
|
HOME_SEARCH_MOBILE_PADDING_BOTTOM_PX,
|
|
} from './home-constants'
|
|
import { HomeStickyStateProvider } from './home-sticky-state-provider'
|
|
import styles from './home-sticky.module.css'
|
|
import HomeTrending from './home-trending'
|
|
|
|
type HomeShellProps = {
|
|
banners: PluginBanner[]
|
|
children: ReactNode
|
|
header: ReactNode
|
|
hero: ReactNode
|
|
isMarketplacePlatform: boolean
|
|
navigation: ReactNode
|
|
page: MarketplaceBannerPage
|
|
search: ReactNode
|
|
}
|
|
|
|
/**
|
|
* Shared scaffold for the marketplace catalog homes (Plugins and Templates):
|
|
* sticky header, hero, floating search, the optional trending banners, and
|
|
* the sticky catalog navigation above the page content. Keeping the structure
|
|
* in one place stops the two catalog pages from drifting apart.
|
|
*/
|
|
export function HomeShell({
|
|
banners,
|
|
children,
|
|
header,
|
|
hero,
|
|
isMarketplacePlatform,
|
|
navigation,
|
|
page,
|
|
search,
|
|
}: HomeShellProps) {
|
|
return (
|
|
<HomeStickyStateProvider>
|
|
<div
|
|
className="flex min-h-full w-full shrink-0 flex-col bg-background-default"
|
|
data-marketplace-standalone={isMarketplacePlatform ? '' : undefined}
|
|
style={
|
|
{
|
|
'--home-header-height': `${HOME_HEADER_HEIGHT_PX}px`,
|
|
'--home-search-height': `${HOME_SEARCH_HEIGHT_PX}px`,
|
|
'--home-search-mobile-padding-bottom': `${HOME_SEARCH_MOBILE_PADDING_BOTTOM_PX}px`,
|
|
} as CSSProperties
|
|
}
|
|
>
|
|
{header}
|
|
<div className="relative flex w-full flex-col">
|
|
{hero}
|
|
{search}
|
|
{banners.length > 0 && (
|
|
<>
|
|
<div
|
|
aria-hidden="true"
|
|
className={cn('h-12 shrink-0', isMarketplacePlatform && styles.bannerSpacer)}
|
|
/>
|
|
<HomeTrending
|
|
banners={banners}
|
|
isMarketplacePlatform={isMarketplacePlatform}
|
|
page={page}
|
|
/>
|
|
</>
|
|
)}
|
|
{navigation}
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</HomeStickyStateProvider>
|
|
)
|
|
}
|