temp: add resources

packages/resources/src/pages/file/list/FileCard.tsx

@@ -0,0 +1,27 @@
+import { useResourceStore } from '@/pages/store/resource';
+import { Card, CardContent, Typography } from '@mui/material';
+import { getIcon } from '../FileIcon';
+
+export const FileCard = () => {
+  const { list, prefix } = useResourceStore();
+  return (
+    <>
+      {list.map((resource) => (
+        <Card key={resource.etag} style={{ margin: '10px' }}>
+          <CardContent>
+            <Typography
+              variant='h5'
+              component='div'
+              // className='flex items-center gap-2'
+            >
+              {getIcon(resource.name)}
+              {resource.name ? resource.name.replace(prefix, '') : resource.prefix?.replace(prefix, '')}
+            </Typography>
+            {resource.lastModified && <Typography color='text.secondary'>Last Modified: {resource.lastModified}</Typography>}
+            {resource.size > 0 && <Typography color='text.secondary'>Size: {resource.size} bytes</Typography>}
+          </CardContent>
+        </Card>
+      ))}
+    </>
+  );
+};

packages/resources/src/pages/file/list/FileTable.tsx

@@ -0,0 +1,52 @@
+import { useResourceStore } from '@/pages/store/resource';
+import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import prettyBytes from 'pretty-bytes';
+import dayjs from 'dayjs';
+import { getIcon } from '../FileIcon';
+
+export const FileTable = () => {
+  const { list, prefix, download } = useResourceStore();
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label='simple table'>
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell sx={{ minWidth: 100 }}>Size</TableCell>
+            <TableCell sx={{ minWidth: 100 }}>Last Modified</TableCell>
+            <TableCell sx={{ minWidth: 100 }}>Actions</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {list.map((row) => (
+            <TableRow key={row.name}>
+              <TableCell>
+                <div className='flex items-center gap-2'>
+                  {getIcon(row.name)}
+                  {row.name ? row.name.replace(prefix, '') : row.prefix?.replace?.(prefix, '')}
+                </div>
+              </TableCell>
+              <TableCell>{row.size ? prettyBytes(row.size) : ''}</TableCell>
+              <TableCell>{row.lastModified ? dayjs(row.lastModified).format('YYYY-MM-DD HH:mm:ss') : ''}</TableCell>
+              <TableCell>
+                {!row.prefix ? (
+                  <Button
+                    variant='contained'
+                    color='primary'
+                    onClick={() => download(row)}
+                    sx={{
+                      color: 'white',
+                    }}>
+                    Download
+                  </Button>
+                ) : (
+                  ''
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};