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

feat: add pinning modal

This commit is contained in:
Juan Di Toro 2024-03-22 12:31:31 +01:00
parent db91cb9590
commit 9d9aa4e9c9
2 changed files with 85 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/forms.tsx
View File

@ -58,7 +58,7 @@ export const FieldCheckbox = ({
const input = useInputControl({ const input = useInputControl({
key, key,
name: inputProps.name, name: inputProps.name,
formId: inputProps.form, formId: inputProps.form,
initialValue: defaultChecked ? checkedValue : undefined initialValue: defaultChecked ? checkedValue : undefined
}) })
const fallbackId = useId() const fallbackId = useId()

143
app/routes/file-manager/index.tsx
View File

@ -1,64 +1,89 @@
import {GeneralLayout} from "~/components/general-layout"; import { GeneralLayout } from "~/components/general-layout";
import {FileCard, FileCardList, FileTypes} from "~/components/file-card"; import { FileCard, FileCardList, FileTypes } from "~/components/file-card";
import {DataTable} from "~/components/data-table"; import { DataTable } from "~/components/data-table";
import {columns} from "./columns"; import { columns } from "./columns";
import {Input} from "~/components/ui/input"; import { Input } from "~/components/ui/input";
import {Button} from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import {AddIcon} from "~/components/icons"; import { AddIcon } from "~/components/icons";
import {Authenticated} from "@refinedev/core"; import { Authenticated } from "@refinedev/core";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "~/components/ui/dialog";
import { Field } from "~/components/forms";
export default function FileManager() { export default function FileManager() {
return ( return (
<Authenticated key="dashboard" v3LegacyAuthProviderCompatible> <Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
<GeneralLayout> <Dialog>
<h1 className="font-bold mb-4 text-lg">File Manager</h1> <GeneralLayout>
<FileCardList> <h1 className="font-bold mb-4 text-lg">File Manager</h1>
<FileCard <FileCardList>
fileName="Backups" <FileCard
size="33 files" fileName="Backups"
type={FileTypes.Folder} size="33 files"
createdAt="2 days ago" type={FileTypes.Folder}
/> createdAt="2 days ago"
<FileCard />
fileName="Backups" <FileCard
size="33 files" fileName="Backups"
type={FileTypes.Folder} size="33 files"
createdAt="2 days ago" type={FileTypes.Folder}
/> createdAt="2 days ago"
<FileCard />
fileName="Backups" <FileCard
size="33 files" fileName="Backups"
type={FileTypes.Folder} size="33 files"
createdAt="2 days ago" type={FileTypes.Folder}
/> createdAt="2 days ago"
<FileCard />
fileName="Backups" <FileCard
size="33 files" fileName="Backups"
type={FileTypes.Folder} size="33 files"
createdAt="2 days ago" type={FileTypes.Folder}
/> createdAt="2 days ago"
</FileCardList> />
<h2 className="font-bold text-l mt-8">Files</h2> </FileCardList>
<div className="flex items-center space-x-4 my-6 w-full"> <h2 className="font-bold text-l mt-8">Files</h2>
<Input <div className="flex items-center space-x-4 my-6 w-full">
fullWidth <Input
leftIcon={<AddIcon />} fullWidth
placeholder="Search files by name or CID" leftIcon={<AddIcon />}
className="border-ring font-medium w-full grow h-12 flex-1 bg-primary-2/10" placeholder="Search files by name or CID"
/> className="border-ring font-medium w-full grow h-12 flex-1 bg-primary-2/10"
<Button className="h-12 gap-x-2"> />
<AddIcon /> <Button className="h-12 gap-x-2">
Select All <AddIcon />
</Button> Select All
<Button className="h-12 gap-x-2"> </Button>
<AddIcon /> <DialogTrigger asChild>
New Folder <Button className="h-12 gap-x-2">
</Button> <AddIcon />
</div> Pin Content
<DataTable </Button>
columns={columns} </DialogTrigger>
/> </div>
</GeneralLayout> <DataTable columns={columns} />
</Authenticated> </GeneralLayout>
<DialogHeader>
<DialogTitle>Pinning Contnet</DialogTitle>
</DialogHeader>
<DialogContent>
<form action="" className="w-full flex flex-col gap-y-4">
<Field
inputProps={{ name: "cids", placeholder: "Comma separated CIDs" }}
labelProps={{ htmlFor: "cids", children: "Content to Pin" }}
/>
<Button type="submit" className="w-full">
Pin Content
</Button>
</form>
</DialogContent>
</Dialog>
</Authenticated>
); );
} }