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, useLocation } from "@remix-run/react"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, } from "~/components/ui/dialog"; import { useUppy } from "./lib/uppy"; import type { FailedUppyFile, UppyFile } from "@uppy/core"; import { Progress } from "~/components/ui/progress"; import { DialogClose } from "@radix-ui/react-dialog"; import { ChevronDownIcon, ExitIcon, TrashIcon } from "@radix-ui/react-icons"; import { ClockIcon, DriveIcon, CircleLockIcon, CloudUploadIcon, CloudCheckIcon, BoxCheckedIcon, PageIcon, ThemeIcon, ExclamationCircleIcon, } from "./icons"; import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, } from "./ui/dropdown-menu"; import { Avatar } from "@radix-ui/react-avatar"; import { cn } from "~/utils"; import { useGetIdentity, useLogout } from "@refinedev/core"; import { PinningNetworkBanner } from "./pinning-network-banner"; import { PinningProvider } from "~/providers/PinningProvider"; import type { Identity } from "~/data/auth-provider"; import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider, } from "./ui/tooltip"; import filesize from "./lib/filesize"; import { ErrorList } from "./forms"; export const GeneralLayout = ({ children }: React.PropsWithChildren) => { const location = useLocation(); const { data: identity } = useGetIdentity(); const { mutate: logout } = useLogout(); return ( {!identity?.verified ? (
We have sent you a verification email. Please click on the link in the email to start using the platform.
) : null}
Lume logo

Freedom

Privacy

Ownership

logout()}> Logout
{children}
); }; const UploadFileForm = () => { const { getRootProps, getInputProps, getFiles, state, removeFile, cancelAll, failedFiles, upload, } = useUppy(); const inputProps = getInputProps(); const isUploading = state === "uploading"; const isCompleted = state === "completed"; const hasErrored = state === "error"; const hasStarted = state !== "idle" && state !== "initializing"; const isValid = getFiles().length > 0; const getFailedState = (id: string) => failedFiles.find((file) => file.id === id); return ( <> Upload Files {!hasStarted ? (

Drag & Drop Files or Browse

) : null}
{getFiles().map((file) => ( { removeFile(id); }} failedState={getFailedState(file.id)} /> ))}
{hasStarted && !hasErrored ? (
{isCompleted ? "Upload completed" : `${getFiles().length} files being uploaded`}
) : null} {isUploading ? ( ) : null} {isCompleted ? ( ) : null} {!hasStarted && !isCompleted && !isUploading ? ( ) : null} ); }; const UploadFileItem = ({ file, failedState, onRemove, }: { file: UppyFile; failedState?: FailedUppyFile, Record>; onRemove: (id: string) => void; }) => { console.log({ file: file.progress }); return (
{file.progress?.uploadComplete ? ( ) : failedState?.error ? ( ) : ( )}

{file.name} {" "} ({filesize(file.size, 2)})

{file.name} ({filesize(file.size, 2)})

{failedState ? (

Error uploading: {failedState.error}

) : null} {file.progress?.preprocess ? (

Processing...

) : null} {file.progress?.uploadStarted && !file.progress.uploadComplete ? ( ) : null}
); }; const NavigationButton = ({ children, active, }: React.PropsWithChildren<{ active?: boolean }>) => { return ( ); };