diff --git a/src/app/page.tsx b/src/app/page.tsx index e59e918..9afea66 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -16,6 +16,7 @@ import { useMemo } from 'react' import { getFileName } from '../fs' import TitleText from '../components/TitleText' import SubtitleText from '../components/SubtitleText' +import { pluralize } from '../utils/pluralize' const queryClient = new QueryClient() @@ -83,8 +84,8 @@ function ConfirmUploadState({ return ( - You are about to start uploading {uploadedFiles.length}{' '} - {uploadedFiles.length === 1 ? 'file' : 'files'}. + You are about to start uploading{' '} + {pluralize(uploadedFiles.length, 'file', 'files')}. @@ -109,8 +110,7 @@ function UploadingState({ return ( - You are uploading {uploadedFiles.length}{' '} - {uploadedFiles.length === 1 ? 'file' : 'files'}. + You are uploading {pluralize(uploadedFiles.length, 'file', 'files')}. diff --git a/src/components/PasswordField.tsx b/src/components/PasswordField.tsx index 3223696..02bdbc9 100644 --- a/src/components/PasswordField.tsx +++ b/src/components/PasswordField.tsx @@ -30,7 +30,7 @@ export default function PasswordField({ className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${ isInvalid ? 'border-red-500' : 'border-stone-300' }`} - placeholder="Enter a secret password for this FilePizza..." + placeholder="Enter a secret password for this slice of FilePizza..." value={value} onChange={handleChange} /> diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index c57087a..ae48391 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -11,18 +11,22 @@ export default function ProgressBar({ const isComplete = value === max return ( -
+
{Math.round(percentage)}%
- {Math.round(percentage)}% + + {Math.round(percentage)}% +
) diff --git a/src/components/TypeBadge.tsx b/src/components/TypeBadge.tsx index 662ffca..558e788 100644 --- a/src/components/TypeBadge.tsx +++ b/src/components/TypeBadge.tsx @@ -11,9 +11,9 @@ function getTypeColor(fileType: string): string { export default function TypeBadge({ type }: { type: string }): JSX.Element { return ( {type} diff --git a/src/components/UploadFileList.tsx b/src/components/UploadFileList.tsx index 4adb888..91412fb 100644 --- a/src/components/UploadFileList.tsx +++ b/src/components/UploadFileList.tsx @@ -18,14 +18,14 @@ export default function UploadFileList({ key={f.fileName} className={`w-full border-b border-stone-300 last:border-0`} > -
+

{f.fileName}

-
+
{onRemove && (