Add BucketInspector

frontend/src/components/BucketInspector.tsx

+import { BucketObject } from "../models/bucket";
+import { Inspector, InspectorProps } from "./Inspector";
+
+interface BucketInspectorProps extends InspectorProps {
+  buckets: BucketObject[]
+}
+
+export const BucketInspector = (props: BucketInspectorProps) => {
+
+  const { buckets } = props;
+  const title = buckets.length === 1 ? buckets[0].Key : "Multiple objects";
+
+  return (
+    <Inspector
+      isOpen={props.isOpen}>
+      {props.children}
+      <div className="p-8 text-lg font-semibold">
+        {title}
+      </div>
+    </Inspector>
+  )
+}
\ No newline at end of file

frontend/src/components/Inspector.tsx

+import { ReactNode } from "react"
+import { Transition } from '@headlessui/react';
+
+export interface InspectorProps {
+  children?: ReactNode;
+  isOpen: boolean;
+}
+export const Inspector = ({ isOpen, children }: InspectorProps) => {
+  return (
+    <Transition
+      show={isOpen}
+      enter="transition-transform duration-200"
+      enterFrom="translate-x-64"
+      enterTo="translate-x-0"
+      leave="transition-transform duration-200"
+      leaveFrom='translate-x-0'
+      leaveTo="translate-x-64"
+    >
+      <div className="w-64 right-0 top-0 h-screen fixed z-1 overflow-auto">
+        <div className='h-full bg-gray-100 dark:bg-gray-800'>
+          {children}
+        </div>
+      </div>
+    </Transition>
+  )
+}
\ No newline at end of file

frontend/src/routes/BucketBrowser/index.tsx

@@ -4,6 +4,7 @@ import { BucketObject } from '../../models/bucket';
 import { Column, Table } from '../../components/Table';
 import { getHumanSize } from '../../commons/utils';
 import { Button } from '../../components/Button';
+import { BucketInspector } from '../../components/BucketInspector';
 import {
   DocumentIcon,
   PhotoIcon,
@@ -194,31 +195,41 @@ export const BucketBrowser = ({ bucketName }: PropsType) => {
         icon={<ArrowLeftIcon />}
         onClick={() => navigate(-1)}
       />
-      <div className='container w-2/3'>
-        <div className="flex mt-8 place-content-between">
-          <div className='flex space-x-4'>
-            <InputFile
-              icon={<ArrowUpOnSquareIcon />}
-              onChange={handleFileChange}
+
+      <div className='top-0 fixed z-10 right-0 w-64 bg-slate-300'>
+        <BucketInspector
+          isOpen={selectedRows.size > 0}
+          buckets={Array.from(selectedRows).map(index => bucketObjects[index])}
+        />
+      </div>
+      <div className={`transition-all ease-in-out duration-200 ${selectedRows.size > 0 ? "mr-64" : "mr-0"}`}>
+        <div className='container w-2/3'>
+          <div className="flex mt-8 place-content-between">
+            <div className='flex space-x-4'>
+              <InputFile
+                icon={<ArrowUpOnSquareIcon />}
+                onChange={handleFileChange}
+              />
+            </div>
+            <Button
+              title="Delete file(s)"
+              icon={<TrashIcon />}
+              onClick={deleteSelectedObjects}
+              disabled={selectedRows.size === 0}
+            />
+          </div>
+          <div className="flex place-content-center mt-4">
+            <Table
+              selectable={true}
+              columns={columns}
+              data={tableData}
+              onSelect={onSelect}
+              selectedRows={selectedRows}
             />
           </div>
-          <Button
-            title="Delete file(s)"
-            icon={<TrashIcon />}
-            onClick={deleteSelectedObjects}
-            disabled={selectedRows.size === 0}
-          />
-        </div>
-        <div className="flex place-content-center mt-4">
-          <Table
-            selectable={true}
-            columns={columns}
-            data={tableData}
-            onSelect={onSelect}
-            selectedRows={selectedRows}
-          />
         </div>
       </div>
+
     </Page>
   )
 }
\ No newline at end of file