feat: add basic drive interface

front/src/app/(drive)/layout.tsx

@@ -2,11 +2,14 @@ import { ReactNode } from "react";
 
 import { AuthWrapper } from "@/components/AuthWrapper";
 import { BedrockSidebar } from "@/components/BedrockSidebar";
+import SetupFileList from "./setupFileList";
 
 export default function DriveLayout({ children }: Readonly<{ children: ReactNode }>) {
 	return (
 		<AuthWrapper>
-			<BedrockSidebar>{children}</BedrockSidebar>
+			<BedrockSidebar>{children}
+				<SetupFileList/>
+			</BedrockSidebar>
 		</AuthWrapper>
 	);
 }

front/src/app/(drive)/setupFileList.tsx

@@ -1,20 +1,53 @@
 "use client";
 
 import { useEffect, useState } from 'react';
-import "./drive.css";
 
-import { Permission } from "@/utils/types";
+import FileList from '@/components/drive/fileList';
+import { Permission } from '@/utils/types';
+
+import "./drive.css";
 const SetupFileList = () => {
-	const [files, setFiles] = useState<{
-		name: string; size: number; id: string; createdAt: string; permission: Permission, path: string
+	const [files, setFiles] = useState<{ name: string; size: number; id: string; createdAt: string; permission: Permission, path: string
 	}[]>([]);
-	const [folders, setFolders] = useState<{
-		name: string; permission: Permission, path: string
+	const [folders, setFolders] = useState<{ name: string; permission: Permission, path: string
 	}[]>([]);
+	const [userPath, setUserPath] = useState<string>('/');
+	const [searchQuery, setSearchQuery] = useState<string>('');
+
+
+	useEffect(() => {
+		const fetchData = async () => {
+		};
+
+		fetchData();
+	}, []);
+
+	const filteredFiles = files.filter((file) =>
+		file.name.toLowerCase().includes(searchQuery.toLowerCase())
+	);
+	const filteredFolders = folders.filter((folder) =>
+		folder.name.toLowerCase().includes(searchQuery.toLowerCase())
+	);
 
 	return (
-		<div></div>
-	)
-}
+		<div className="drive-container">
+			<div className="drive-title">
+				<h1>My Decentralized Drive</h1>
+			</div>
+			<div className="search-bar mb-4">
+				<input
+					type="text"
+					placeholder="Search files and folders..."
+					value={searchQuery}
+					onChange={(e) => setSearchQuery(e.target.value)}
+					className="p-2 border border-gray-300 rounded-lg w-full"
+				/>
+			</div>
+			<div className="drive-content">
+				<FileList files={filteredFiles} folders={filteredFolders} />
+			</div>
+		</div>
+	);
+};
 
 export default SetupFileList;

front/src/components/drive/fileList.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+
+import "@/app/(drive)/drive.css";
+import { FileListProps } from "@/utils/types";
+import { Card, CardFooter, CardTitle, CardContent } from "@/components/ui/card";
+import { FolderIcon, FileText } from "lucide-react";
+
+type SortColumn = 'name' | 'size' | 'createdAt' | 'permission';
+type SortOrder = 'asc' | 'desc';
+
+const FileList: React.FC<FileListProps> = ({ files, folders }) => {
+	const [sortColumn, setSortColumn] = useState<SortColumn>('name');
+	const [sortOrder, setSortOrder] = useState<SortOrder>('asc');
+
+	return (
+		<div></div>
+	)
+}
+
+export default FileList;