87 lines
3.4 KiB
TypeScript
87 lines
3.4 KiB
TypeScript
import {
|
|
useState,
|
|
} from 'react'
|
|
import {
|
|
RiCheckboxCircleFill,
|
|
RiErrorWarningFill,
|
|
RiInstallLine,
|
|
} from '@remixicon/react'
|
|
import {
|
|
PortalToFollowElem,
|
|
PortalToFollowElemContent,
|
|
PortalToFollowElemTrigger,
|
|
} from '@/app/components/base/portal-to-follow-elem'
|
|
import Tooltip from '@/app/components/base/tooltip'
|
|
import Button from '@/app/components/base/button'
|
|
// import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
|
|
import { useMemo } from 'react'
|
|
import cn from '@/utils/classnames'
|
|
|
|
const InstallInfo = () => {
|
|
const [open, setOpen] = useState(false)
|
|
const status = 'error'
|
|
const statusError = useMemo(() => status === 'error', [status])
|
|
|
|
return (
|
|
<div className='flex items-center'>
|
|
<PortalToFollowElem
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
placement='bottom-start'
|
|
offset={{
|
|
mainAxis: 4,
|
|
crossAxis: 79,
|
|
}}
|
|
>
|
|
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
|
|
<Tooltip popupContent='Installing 1/3 plugins...'>
|
|
<div
|
|
className={cn(
|
|
'relative flex items-center justify-center w-8 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover',
|
|
statusError && 'border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt',
|
|
)}
|
|
>
|
|
<RiInstallLine
|
|
className={cn(
|
|
'w-4 h-4 text-components-button-secondary-text',
|
|
statusError && 'text-components-button-destructive-secondary-text',
|
|
)}
|
|
/>
|
|
<div className='absolute -right-1 -top-1'>
|
|
{/* <ProgressCircle
|
|
percentage={33}
|
|
circleFillColor='fill-components-progress-brand-bg'
|
|
sectorFillColor='fill-components-progress-error-bg'
|
|
circleStrokeColor='stroke-components-progress-error-bg'
|
|
/> */}
|
|
<RiCheckboxCircleFill className='w-3.5 h-3.5 text-text-success' />
|
|
</div>
|
|
</div>
|
|
</Tooltip>
|
|
</PortalToFollowElemTrigger>
|
|
<PortalToFollowElemContent className='z-10'>
|
|
<div className='p-1 pb-2 w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
|
|
<div className='flex items-center px-2 pt-1 h-7 system-sm-semibold-uppercase'>3 plugins failed to install</div>
|
|
<div className='flex items-center p-1 pl-2 h-8 rounded-lg hover:bg-state-base-hover'>
|
|
<div className='relative flex items-center justify-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'>
|
|
<RiErrorWarningFill className='absolute -right-0.5 -bottom-0.5 w-3 h-3 text-text-destructive' />
|
|
</div>
|
|
<div className='grow system-md-regular text-text-secondary truncate'>
|
|
DuckDuckGo Search
|
|
</div>
|
|
<Button
|
|
size='small'
|
|
variant='ghost-accent'
|
|
>
|
|
Clear
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</PortalToFollowElemContent>
|
|
</PortalToFollowElem>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default InstallInfo
|