temp: add resources

packages/resources/src/pages/file/index.tsx

@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+import { useResourceStore } from '../store/resource';
+import { useSettingsStore } from '../store/settings';
+import { Box, Button, Card, CardContent, Typography, ButtonGroup, useTheme } from '@mui/material';
+import { FileText, Image, File, Table, Grid } from 'lucide-react';
+import { getIcon } from './FileIcon';
+import { FileTable } from './list/FileTable';
+import { FileCard } from './list/FileCard';
+export const FileApp = () => {
+  const { list, getList, prefix, setListType, listType } = useResourceStore();
+  const { settings } = useSettingsStore();
+
+  useEffect(() => {
+    getList();
+  }, []);
+  const theme = useTheme();
+  return (
+    <Box sx={{ padding: 2, backgroundColor: 'white', borderRadius: 2, marginTop: 4, boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)' }}>
+      <div className='flex items-center gap-3 mb-8'>
+        <FileText className='w-8 h-8 text-amber-600' />
+        <Typography
+          variant='h1'
+          className='text-amber-900'
+          sx={{
+            fontSize: { xs: '1.3rem', sm: '2rem' },
+            fontWeight: 'bold',
+          }}>
+          Resources
+        </Typography>
+      </div>
+      <Box className='flex items-center gap-2 mb-4'>
+        <Typography variant='h5' sx={{ fontWeight: 'bold', color: theme.palette.primary.main }}>
+          <span className='mr-2' style={{ color: theme.palette.secondary.main }}>
+            Prefix:
+          </span>
+          {prefix}
+        </Typography>
+        <ButtonGroup className='ml-auto' variant='contained' color='primary' sx={{ color: 'white' }}>
+          <Button variant={listType === 'table' ? 'contained' : 'outlined'} onClick={() => setListType('table')}>
+            <Table />
+          </Button>
+          <Button variant={listType === 'card' ? 'contained' : 'outlined'} onClick={() => setListType('card')}>
+            <Grid />
+          </Button>
+        </ButtonGroup>
+      </Box>
+      <div>{listType === 'card' ? <FileCard /> : <FileTable />}</div>
+    </Box>
+  );
+};