105 lines
2.9 KiB
TypeScript
105 lines
2.9 KiB
TypeScript
import { GeneralLayout } from "~/components/general-layout";
|
|
import { FileCard, FileCardList, FileTypes } from "~/components/file-card";
|
|
import { DataTable } from "~/components/data-table";
|
|
import { columns } from "./columns";
|
|
import { Input } from "~/components/ui/input";
|
|
import { Button } from "~/components/ui/button";
|
|
|
|
export default function FileManager() {
|
|
const isLogged = true;
|
|
if (!isLogged) {
|
|
window.location.href = "/login";
|
|
}
|
|
|
|
return (
|
|
<GeneralLayout>
|
|
<h1 className="font-bold mb-4 text-lg">File Manager</h1>
|
|
<FileCardList>
|
|
<FileCard
|
|
fileName="Backups"
|
|
size="33 files"
|
|
type={FileTypes.Folder}
|
|
createdAt="2 days ago"
|
|
/>
|
|
<FileCard
|
|
fileName="Backups"
|
|
size="33 files"
|
|
type={FileTypes.Folder}
|
|
createdAt="2 days ago"
|
|
/>
|
|
<FileCard
|
|
fileName="Backups"
|
|
size="33 files"
|
|
type={FileTypes.Folder}
|
|
createdAt="2 days ago"
|
|
/>
|
|
<FileCard
|
|
fileName="Backups"
|
|
size="33 files"
|
|
type={FileTypes.Folder}
|
|
createdAt="2 days ago"
|
|
/>
|
|
</FileCardList>
|
|
<h2 className="font-bold text-l mt-8">Files</h2>
|
|
<div className="flex items-center space-x-4 my-6 w-full">
|
|
<Input
|
|
fullWidth
|
|
leftIcon={<AddIcon />}
|
|
placeholder="Search files by name or CID"
|
|
className="border-ring font-bold w-full grow h-12 flex-1"
|
|
/>
|
|
<Button className="h-12 gap-x-2">
|
|
<AddIcon />
|
|
Select All
|
|
</Button>
|
|
<Button className="h-12 gap-x-2">
|
|
<AddIcon />
|
|
New Folder
|
|
</Button>
|
|
</div>
|
|
<DataTable
|
|
columns={columns}
|
|
data={[
|
|
{
|
|
name: "whirly-final-draft.psd",
|
|
cid: "0xB45165ED3CD437B",
|
|
size: "1.89 MB",
|
|
createdOn: "03/02/2024 at 13:29 PM",
|
|
},
|
|
{
|
|
name: "whirly-final-draft.psd",
|
|
cid: "0xB45165ED3CD437B",
|
|
size: "1.89 MB",
|
|
createdOn: "03/02/2024 at 13:29 PM",
|
|
},
|
|
]}
|
|
/>
|
|
</GeneralLayout>
|
|
);
|
|
}
|
|
|
|
const AddIcon = ({ className }: { className?: string }) => {
|
|
return (
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={className}
|
|
>
|
|
<g clipPath="url(#clip0_323_1258)">
|
|
<path
|
|
d="M9 1.5C4.85625 1.5 1.5 4.85625 1.5 9C1.5 13.1438 4.85625 16.5 9 16.5C13.1438 16.5 16.5 13.1438 16.5 9C16.5 4.85625 13.1438 1.5 9 1.5ZM12.75 9.75H9.75V12.75H8.25V9.75H5.25V8.25H8.25V5.25H9.75V8.25H12.75V9.75Z"
|
|
fill="currentColor"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_323_1258">
|
|
<rect width="18" height="18" fill="currentColor" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
};
|