chore: from marketplace tilte ui

This commit is contained in:
Joel 2024-10-21 15:07:10 +08:00
parent 5aa7696cc3
commit 8f49572f85
2 changed files with 11 additions and 6 deletions

View File

@ -26,7 +26,7 @@ const Item: FC<Props> = ({
const { locale } = useContext(I18n)
return (
<div className='group/plugin flex rounded-lg py-2 pr-1 pl-3 hover:bg-state-base-hover'>
<div className='group/plugin flex rounded-lg py-1 pr-1 pl-3 hover:bg-state-base-hover'>
<div
className='shrink-0 relative w-6 h-6 border-[0.5px] border-components-panel-border-subtle rounded-md bg-center bg-no-repeat bg-contain'
style={{ backgroundImage: `url(${payload.icon})` }}

View File

@ -5,6 +5,7 @@ import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
import Item from './item'
import type { Plugin } from '@/app/components/plugins/types.ts'
import cn from '@/utils/classnames'
// import { RiArrowRightUpLine } from '@remixicon/react'
type Props = {
wrapElemRef: React.RefObject<HTMLElement>
@ -26,11 +27,11 @@ const List = ({
const stickyClassName = useMemo(() => {
switch (scrollPosition) {
case ScrollPosition.aboveTheWrap:
return 'top-0 shadow-md bg-white'
return 'top-0 h-9 pt-3 pb-2 shadow-xs bg-components-panel-bg-blur'
case ScrollPosition.showing:
return 'bottom-0'
return 'bottom-0 pt-3 pb-1'
case ScrollPosition.belowTheWrap:
return 'bottom-0 border-t border-gray-500 bg-white text-blue-500'
return 'bottom-0 items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-blue-500 shadow-lg text-text-accent-light-mode-only cursor-pointer'
}
}, [scrollPosition])
@ -41,8 +42,12 @@ const List = ({
return (
<>
<div
className={cn('sticky z-10 pt-3 px-4 py-1 text-text-primary system-sm-medium', stickyClassName)}>
{t('plugin.fromMarketplace')}
className={cn('sticky z-10 flex h-8 px-4 py-1 text-text-primary system-sm-medium', stickyClassName)}
>
<span>{t('plugin.fromMarketplace')}</span>
{/* {scrollPosition === ScrollPosition.belowTheWrap && (
<RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
)} */}
</div>
<div className='p-1 pb-[500px]' ref={nextToStickyELemRef}>
{list.map((item, index) => (