LumeWeb
/
portal-dashboard
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

style: Formatted code

This commit is contained in:
Tania Gutierrez 2024-03-13 21:55:44 -04:00
parent c7d7a129b9
commit 260b41b29b
Signed by: riobuenoDevelops
GPG Key ID: 53133EB28EB7E801
2 changed files with 88 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
app/components/general-layout.tsx
View File

@ -1,20 +1,20 @@
import { Button } from "~/components/ui/button" import { Button } from "~/components/ui/button";
import logoPng from "~/images/lume-logo.png?url" import logoPng from "~/images/lume-logo.png?url";
import lumeColorLogoPng from "~/images/lume-color-logo.png?url" import lumeColorLogoPng from "~/images/lume-color-logo.png?url";
import discordLogoPng from "~/images/discord-logo.png?url" import discordLogoPng from "~/images/discord-logo.png?url";
import { Link, useLocation } from "@remix-run/react" import { Link, useLocation } from "@remix-run/react";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogTrigger DialogTrigger,
} from "~/components/ui/dialog" } from "~/components/ui/dialog";
import { useUppy } from "./lib/uppy" import { useUppy } from "./lib/uppy";
import type { UppyFile } from "@uppy/core" import type { UppyFile } from "@uppy/core";
import { Progress } from "~/components/ui/progress" import { Progress } from "~/components/ui/progress";
import { DialogClose } from "@radix-ui/react-dialog" import { DialogClose } from "@radix-ui/react-dialog";
import { ChevronDownIcon, TrashIcon } from "@radix-ui/react-icons" import { ChevronDownIcon, TrashIcon } from "@radix-ui/react-icons";
import { import {
ClockIcon, ClockIcon,
DriveIcon, DriveIcon,
@ -23,11 +23,11 @@ import {
CloudCheckIcon, CloudCheckIcon,
BoxCheckedIcon, BoxCheckedIcon,
PageIcon, PageIcon,
ThemeIcon ThemeIcon,
} from "./icons" } from "./icons";
import { DropdownMenu, DropdownMenuTrigger } from "./ui/dropdown-menu" import { DropdownMenu, DropdownMenuTrigger } from "./ui/dropdown-menu";
import { Avatar } from "@radix-ui/react-avatar" import { Avatar } from "@radix-ui/react-avatar";
import { cn } from "~/utils" import { cn } from "~/utils";
export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => { export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
const location = useLocation(); const location = useLocation();
@ -40,7 +40,8 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
<ul> <ul>
<li> <li>
<Link to="/dashboard"> <Link to="/dashboard">
<NavigationButton active={location.pathname.includes("dashboard")}> <NavigationButton
active={location.pathname.includes("dashboard")}>
<ClockIcon className="w-5 h-5 mr-2" /> <ClockIcon className="w-5 h-5 mr-2" />
Dashboard Dashboard
</NavigationButton> </NavigationButton>
@ -48,7 +49,8 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
</li> </li>
<li> <li>
<Link to="/file-manager"> <Link to="/file-manager">
<NavigationButton active={location.pathname.includes("file-manager")}> <NavigationButton
active={location.pathname.includes("file-manager")}>
<DriveIcon className="w-5 h-5 mr-2" /> <DriveIcon className="w-5 h-5 mr-2" />
File Manager File Manager
</NavigationButton> </NavigationButton>
@ -56,7 +58,8 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
</li> </li>
<li> <li>
<Link to="/account"> <Link to="/account">
<NavigationButton active={location.pathname.includes("account")}> <NavigationButton
active={location.pathname.includes("account")}>
<CircleLockIcon className="w-5 h-5 mr-2" /> <CircleLockIcon className="w-5 h-5 mr-2" />
Account Account
</NavigationButton> </NavigationButton>
@ -107,8 +110,7 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
<Link to="https://discord.lumeweb.com"> <Link to="https://discord.lumeweb.com">
<Button <Button
variant={"link"} variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder" className="flex flex-row gap-x-2 text-input-placeholder">
>
<img <img
className="h-5" className="h-5"
src={discordLogoPng} src={discordLogoPng}
@ -122,8 +124,7 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
<Link to="https://lumeweb.com"> <Link to="https://lumeweb.com">
<Button <Button
variant={"link"} variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder" className="flex flex-row gap-x-2 text-input-placeholder">
>
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" /> <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
Connect with us Connect with us
</Button> </Button>
@ -133,8 +134,8 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
</footer> </footer>
</div> </div>
</div> </div>
) );
} };
const UploadFileForm = () => { const UploadFileForm = () => {
const { const {
@ -144,17 +145,17 @@ const UploadFileForm = () => {
upload, upload,
state, state,
removeFile, removeFile,
cancelAll cancelAll,
} = useUppy({ } = useUppy({
uploader: "tus", uploader: "tus",
endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT,
}) });
console.log({ state, files: getFiles() }) console.log({ state, files: getFiles() });
const isUploading = state === "uploading" const isUploading = state === "uploading";
const isCompleted = state === "completed" const isCompleted = state === "completed";
const hasStarted = state !== "idle" && state !== "initializing" const hasStarted = state !== "idle" && state !== "initializing";
return ( return (
<> <>
@ -164,8 +165,7 @@ const UploadFileForm = () => {
{!hasStarted ? ( {!hasStarted ? (
<div <div
{...getRootProps()} {...getRootProps()}
className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center" className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center">
>
<input <input
hidden hidden
aria-hidden aria-hidden
@ -185,7 +185,7 @@ const UploadFileForm = () => {
key={file.id} key={file.id}
file={file} file={file}
onRemove={(id) => { onRemove={(id) => {
removeFile(id) removeFile(id);
}} }}
/> />
))} ))}
@ -222,19 +222,19 @@ const UploadFileForm = () => {
</Button> </Button>
) : null} ) : null}
</> </>
) );
} };
function bytestoMegabytes(bytes: number) { function bytestoMegabytes(bytes: number) {
return bytes / 1024 / 1024 return bytes / 1024 / 1024;
} }
const UploadFileItem = ({ const UploadFileItem = ({
file, file,
onRemove onRemove,
}: { }: {
file: UppyFile file: UppyFile;
onRemove: (id: string) => void onRemove: (id: string) => void;
}) => { }) => {
return ( return (
<div className="flex flex-col w-full py-4 px-2 bg-primary-dark"> <div className="flex flex-col w-full py-4 px-2 bg-primary-dark">
@ -258,8 +258,7 @@ const UploadFileItem = ({
size={"icon"} size={"icon"}
variant={"ghost"} variant={"ghost"}
className="!text-inherit" className="!text-inherit"
onClick={() => onRemove(file.id)} onClick={() => onRemove(file.id)}>
>
<TrashIcon className="w-4 h-4" /> <TrashIcon className="w-4 h-4" />
</Button> </Button>
</div> </div>
@ -268,16 +267,21 @@ const UploadFileItem = ({
<Progress max={100} value={file.progress.percentage} className="mt-2" /> <Progress max={100} value={file.progress.percentage} className="mt-2" />
) : null} ) : null}
</div> </div>
) );
} };
const NavigationButton = ({ children, active }: React.PropsWithChildren<{ active?: boolean }>) => { const NavigationButton = ({
children,
active,
}: React.PropsWithChildren<{ active?: boolean }>) => {
return ( return (
<Button variant="ghost" className={cn( <Button
variant="ghost"
className={cn(
"justify-start h-14 w-full font-semibold", "justify-start h-14 w-full font-semibold",
active && "bg-secondary-1 text-secondary-1-foreground" active && "bg-secondary-1 text-secondary-1-foreground",
)}> )}>
{children} {children}
</Button> </Button>
) );
} };

17
app/routes/account.tsx
View File

@ -251,8 +251,10 @@ const SetupTwoFactorDialog = ({
const [continueModal, setContinue] = useState<boolean>(false); const [continueModal, setContinue] = useState<boolean>(false);
return ( return (
<Dialog open={open} onOpenChange={(value) => { <Dialog
setOpen(value) open={open}
onOpenChange={(value) => {
setOpen(value);
setContinue(false); setContinue(false);
}}> }}>
<DialogContent className="p-8"> <DialogContent className="p-8">
@ -261,7 +263,10 @@ const SetupTwoFactorDialog = ({
<div className="flex flex-col gap-y-6"> <div className="flex flex-col gap-y-6">
{continueModal ? ( {continueModal ? (
<> <>
<p className="text-sm text-primary-2">Enter the authentication code generated in your two-factor application to confirm your setup.</p> <p className="text-sm text-primary-2">
Enter the authentication code generated in your two-factor
application to confirm your setup.
</p>
<Input fullWidth className="text-center" /> <Input fullWidth className="text-center" />
<Button className="w-full h-14">Confirm</Button> <Button className="w-full h-14">Confirm</Button>
</> </>
@ -276,7 +281,11 @@ const SetupTwoFactorDialog = ({
<div className="p-4 border text-primary-2 text-center font-bold"> <div className="p-4 border text-primary-2 text-center font-bold">
HHH7MFGAMPJ44OM44FGAMPJ44O232 HHH7MFGAMPJ44OM44FGAMPJ44O232
</div> </div>
<Button className="w-full h-14" onClick={() => setContinue(true)}>Continue</Button> <Button
className="w-full h-14"
onClick={() => setContinue(true)}>
Continue
</Button>
</> </>
)} )}
</div> </div>