File size: 1,927 Bytes
aa2e6af | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import * as Popover from '@radix-ui/react-popover';
import { cn } from '~/utils';
const Wrapper = ({ popover, children }: { popover: boolean; children: React.ReactNode }) => {
if (popover) {
return (
<div className="text-token-text-secondary relative -mt-[0.75px] h-5 w-full leading-5">
<Popover.Trigger asChild>
<div
className="absolute left-0 top-0 line-clamp-1 overflow-visible"
style={{ opacity: 1, transform: 'none' }}
data-projection-id="78"
>
{children}
</div>
</Popover.Trigger>
</div>
);
}
return (
<div className="text-token-text-secondary relative -mt-[0.75px] h-5 w-full leading-5">
<div
className="absolute left-0 top-0 line-clamp-1 overflow-visible"
style={{ opacity: 1, transform: 'none' }}
data-projection-id="78"
>
{children}
</div>
</div>
);
};
export default function ProgressText({
progress,
onClick,
inProgressText,
finishedText,
hasInput = true,
popover = false,
}: {
progress: number;
onClick: () => void;
inProgressText: string;
finishedText: string;
hasInput?: boolean;
popover?: boolean;
}) {
return (
<Wrapper popover={popover}>
<button
type="button"
className={cn('inline-flex items-center gap-1', hasInput ? '' : 'pointer-events-none')}
disabled={!hasInput}
onClick={onClick}
>
{progress < 1 ? inProgressText : finishedText}
<svg width="16" height="17" viewBox="0 0 16 17" fill="none">
<path
className={hasInput ? '' : 'stroke-transparent'}
d="M11.3346 7.83203L8.00131 11.1654L4.66797 7.83203"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</button>
</Wrapper>
);
}
|