mirror of
https://github.com/langgenius/dify.git
synced 2025-11-03 20:33:00 +00:00
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import type { RemixiconComponentType } from '@remixicon/react'
|
|
import React from 'react'
|
|
|
|
type ItemProps = {
|
|
Icon: RemixiconComponentType
|
|
title: string
|
|
description: string
|
|
onClick: () => void
|
|
}
|
|
|
|
const Item = ({
|
|
Icon,
|
|
title,
|
|
description,
|
|
onClick,
|
|
}: ItemProps) => {
|
|
return (
|
|
<div
|
|
className='group flex w-[337px] cursor-pointer items-center gap-x-3 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 shadow-xs shadow-shadow-shadow-3 hover:shadow-md hover:shadow-shadow-shadow-5'
|
|
onClick={onClick}
|
|
>
|
|
<div className='flex size-10 shrink-0 items-center justify-center rounded-[10px] border border-dashed border-divider-regular bg-background-section group-hover:border-state-accent-hover-alt group-hover:bg-state-accent-hover'>
|
|
<Icon className='size-5 text-text-quaternary group-hover:text-text-accent' />
|
|
</div>
|
|
<div className='flex grow flex-col gap-y-0.5 py-px'>
|
|
<div className='system-md-semibold truncate text-text-secondary'>
|
|
{title}
|
|
</div>
|
|
<div className='system-xs-regular text-text-tertiary'>
|
|
{description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(Item)
|