strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pad progress button

Browse Source
This commit is contained in:
Sam Becker 2025-09-11 20:41:15 -05:00
parent 9c1c924f20
commit c9f74bd18c
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/primitives/ProgressButton.tsx
View File

@ -4,6 +4,8 @@ import { ComponentProps } from 'react';
import LoaderButton from './LoaderButton'; import LoaderButton from './LoaderButton';
import { clsx } from 'clsx/lite'; import { clsx } from 'clsx/lite';
const PROGRESS_PADDING = 0.1;
export default function ProgressButton({ export default function ProgressButton({
progress, progress,
isLoading, isLoading,
@ -13,6 +15,8 @@ export default function ProgressButton({
}: { }: {
progress?: number progress?: number
} & ComponentProps<typeof LoaderButton>) { } & ComponentProps<typeof LoaderButton>) {
const progressPadded =
PROGRESS_PADDING + (progress ?? 0) * (1 - PROGRESS_PADDING);
return ( return (
<LoaderButton <LoaderButton
{...props} {...props}
@ -23,7 +27,7 @@ export default function ProgressButton({
)} )}
> >
<div <div
style={{ transform: `scaleX(${progress ?? 0})`}} style={{ transform: `scaleX(${progressPadded})`}}
className={clsx( className={clsx(
'absolute top-0 left-0 w-full', 'absolute top-0 left-0 w-full',
'transition-all duration-500 origin-left', 'transition-all duration-500 origin-left',