diff --git a/app/components/general-layout.tsx b/app/components/general-layout.tsx
index 839c8e8..ae1c876 100644
--- a/app/components/general-layout.tsx
+++ b/app/components/general-layout.tsx
@@ -3,6 +3,17 @@ import logoPng from "~/images/lume-logo.png?url"
import lumeColorLogoPng from "~/images/lume-color-logo.png?url"
import discordLogoPng from "~/images/discord-logo.png?url"
import { Link } from "@remix-run/react"
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger
+} from "./ui/dialog"
+import { useUppy } from "./lib/uppy"
+import { UppyFile } from "@uppy/core"
+import { Progress } from "./ui/progress"
+import { DialogClose } from "@radix-ui/react-dialog"
export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
return (
@@ -39,14 +50,21 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
- Freedom
- Privacy
- Ownership
+ Freedom
+ Privacy
+ Ownership
-
+
@@ -83,9 +101,147 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
)
}
+const UploadFileForm = () => {
+ const {
+ getRootProps,
+ getInputProps,
+ getFiles,
+ upload,
+ state,
+ removeFile,
+ cancelAll
+ } = useUppy({
+ uploader: "tus",
+ endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT
+ })
+
+ console.log({ state, files: getFiles() })
+
+ const isUploading = state === "uploading"
+ const isCompleted = state === "completed"
+ const hasStarted = state !== "idle" && state !== "initializing"
+
+ return (
+ <>
+
+ Upload Files
+
+ {!hasStarted ? (
+
+
+
+
Drag & Drop Files or Browse
+
+ ) : null}
+
+
+ {getFiles().map((file) => (
+ {
+ removeFile(id)
+ }}
+ />
+ ))}
+
+
+ {hasStarted ? (
+
+
+ {isCompleted
+ ? "Upload completed"
+ : `${getFiles().length} files being uploaded`}
+
+ ) : null}
+
+ {isUploading ? (
+
+
+
+ ) : null}
+
+ {isCompleted ? (
+
+
+
+ ) : null}
+
+ {!hasStarted && !isCompleted && !isUploading ? (
+
+ ) : null}
+ >
+ )
+}
+
+function bytestoMegabytes(bytes: number) {
+ return bytes / 1024 / 1024
+}
+
+const UploadFileItem = ({
+ file,
+ onRemove
+}: {
+ file: UppyFile
+ onRemove: (id: string) => void
+}) => {
+ return (
+
+
+
+
+ {file.progress?.uploadComplete ? (
+
+ ) : (
+
+ )}
+
+
+
+ {file.name}
+ {" "}
+ ({bytestoMegabytes(file.size).toFixed(2)} MB)
+
+
+
+
+
+ {file.progress?.uploadStarted && !file.progress.uploadComplete ? (
+
+ ) : null}
+
+ )
+}
+
const NavigationButton = ({ children }: React.PropsWithChildren) => {
return (
-