diff --git a/site/src/components/FileUpload/FileUpload.stories.tsx b/site/src/components/FileUpload/FileUpload.stories.tsx new file mode 100644 index 0000000000000..be49f25d92e4d --- /dev/null +++ b/site/src/components/FileUpload/FileUpload.stories.tsx @@ -0,0 +1,35 @@ +import Link from "@mui/material/Link"; +import type { Meta, StoryObj } from "@storybook/react"; +import { FileUpload } from "./FileUpload"; + +const meta: Meta = { + title: "components/FileUpload", + component: FileUpload, + args: { + title: "Upload template", + description: ( + <> + The template has to be a .tar or .zip file. You can also use our{" "} + starter templates to getting + started with Coder. + + ), + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const Uploading: Story = { + args: { + isUploading: true, + }, +}; + +export const WithFile: Story = { + args: { + file: new File([], "template.zip"), + }, +}; diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx index c6feb07189efa..79e0a3b4f212b 100644 --- a/site/src/components/FileUpload/FileUpload.tsx +++ b/site/src/components/FileUpload/FileUpload.tsx @@ -64,11 +64,13 @@ export const FileUpload: FC = ({ {...fileDrop} > - {isUploading ? ( - - ) : ( - - )} +

+ {isUploading ? ( + + ) : ( + + )} +

{title} @@ -155,6 +157,15 @@ const styles = { opacity: 0.75, }, + // Used to maintain the size of icon and spinner + iconWrapper: { + width: 64, + height: 64, + display: "flex", + alignItems: "center", + justifyContent: "center", + }, + icon: { fontSize: 64, }, pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: