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 (
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 ? (
) : 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 (
)
}