import { Button } from "~/components/ui/button" 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 (
Lume logo

Freedom

Privacy

Ownership

{children}
) } 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 ( ) } const ClockIcon = ({ className }: { className?: string }) => { return ( ) } const CircleLockIcon = ({ className }: { className?: string }) => { return ( ) } const DriveIcon = ({ className }: { className?: string }) => { return ( ) } const CloudUploadIcon = ({ className }: { className?: string }) => { return ( ) } const PageIcon = ({ className }: { className?: string }) => { return ( ) } const TrashIcon = ({ className }: { className?: string }) => { return ( ) } const CloudCheckIcon = ({ className }: { className?: string }) => { return ( ) } const BoxCheckedIcon = ({ className }: { className?: string }) => { return ( ) }