dify/web/app/components/base/create-resource-card.tsx
Jingyi 9b74df21d0
feat(web): refine onboarding UI (#37433)
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: hjlarry <hjlarry@163.com>
Co-authored-by: fatelei <fatelei@gmail.com>
Co-authored-by: Asuka Minato <i@asukaminato.eu.org>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com>
Co-authored-by: gigglewang <gigglewang@dify.ai>
Co-authored-by: Yunlu Wen <yunlu.wen@dify.ai>
Co-authored-by: chariri <w@chariri.moe>
Co-authored-by: Evan <2869018789@qq.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
2026-06-15 08:47:15 +00:00

44 lines
1.6 KiB
TypeScript

import { cn } from '@langgenius/dify-ui/cn'
import * as React from 'react'
export const createResourceCardActionClassName = 'group flex w-full cursor-pointer items-center gap-2 rounded-lg px-4 py-2 text-left system-sm-medium text-text-tertiary outline-hidden transition-colors hover:bg-background-default-dodge hover:text-text-secondary hover:shadow-xs hover:shadow-shadow-shadow-3 focus-visible:bg-background-default-dodge focus-visible:text-text-secondary focus-visible:shadow-xs focus-visible:shadow-shadow-shadow-3'
export const createResourceCardActionIconClassName = 'size-4 shrink-0 text-text-tertiary group-hover:text-text-secondary group-focus-visible:text-text-secondary'
type CreateResourceCardProps = {
children: React.ReactNode
footer: React.ReactNode
className?: string
isLoading?: boolean
ref?: React.RefObject<HTMLDivElement | null>
}
const CreateResourceCard = ({
children,
footer,
className,
isLoading = false,
ref,
}: CreateResourceCardProps) => {
return (
<div
ref={ref}
className={cn(
'relative col-span-1 inline-flex h-41.5 flex-col overflow-hidden rounded-xl bg-background-default-dimmed transition-opacity',
isLoading && 'pointer-events-none opacity-50',
className,
)}
>
<div className="flex min-h-0 grow flex-col justify-center p-2">
<div className="flex w-full flex-col gap-0.5">
{children}
</div>
</div>
<div className="flex shrink-0 items-center border-t-[0.5px] border-divider-subtle p-2">
{footer}
</div>
</div>
)
}
export default React.memo(CreateResourceCard)