Added fullWidth and leftIcon properties to input and finished FileManager design

app/components/ui/input.tsx

@@ -4,10 +4,13 @@ import { cn } from "~/utils"
 import { EyeOpenIcon, EyeNoneIcon } from "@radix-ui/react-icons"
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+    fullWidth: boolean,
+    leftIcon?: React.ReactNode
+  }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, type, fullWidth, leftIcon, ...props }, ref) => {
     const [showPassword, setShowPassword] = React.useState<boolean>(false)
     const [mask, setMask] = React.useState<boolean>(false)
     const toggleShowPassword = () => {
@@ -15,12 +18,18 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       setMask((mask) => !mask)
     }
     return (
-      <div className="relative">
+      <div className={`relative ${fullWidth ? "w-full" : ""}`}>
+        {leftIcon && (
+          <div className="absolute left-4 top-1/2 -translate-y-1/2">
+            {leftIcon}
+          </div>
+        )}
         <input
           type={type && !mask ? type : "text"}
           className={cn(
             "flex h-14 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-input-placeholder focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-            className
+            className,
+            leftIcon && "pl-10"
           )}
           ref={ref}
           {...props}

app/routes/file-manager/route.tsx

@@ -0,0 +1,104 @@
+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>
+  );
+};