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 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 ( Upload Files {!hasStarted ? (

Drag & Drop Files or Browse

) : null}
{files.map((file) => ( { removeFile(id) }} /> ))}
{hasStarted ? (
{isCompleted ? "Upload completed" : `${files.length} being uploaded`}
) : null} {hasStarted ? ( ) : ( )} {hasStarted && isCompleted ? ( ) : 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 ( ) }