diff --git a/app/components/dashboard-layout.tsx b/app/components/dashboard-layout.tsx
index dcc8c60..422d765 100644
--- a/app/components/dashboard-layout.tsx
+++ b/app/components/dashboard-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 DashboardLayout = ({ children }: React.PropsWithChildren<{}>) => {
return (
@@ -39,14 +50,11 @@ export const DashboardLayout = ({ children }: React.PropsWithChildren<{}>) => {
- Freedom
- Privacy
- Ownership
+ Freedom
+ Privacy
+ Ownership
-
+
{children}
@@ -81,9 +89,152 @@ export const DashboardLayout = ({ children }: React.PropsWithChildren<{}>) => {
)
}
+const UploadFileModal = () => {
+ const { getRootProps, getInputProps, files, upload, removeFile, cancelAll } =
+ useUppy({
+ uploader: "tus",
+ endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT
+ })
+
+ const isUploading =
+ files.length > 0
+ ? files.map((file) => file.progress?.uploadStarted != null).includes(true)
+ : false
+ const isCompleted =
+ files.length > 0
+ ? files
+ .map((file) => file.progress?.uploadComplete)
+ .reduce((acc, cur) => acc && cur, true)
+ : false
+ const hasStarted = isUploading || isCompleted
+
+ return (
+
+ )
+}
+
+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 (
-