Mathis/lemma
1
0
Fork 0
mirror of https://github.com/lordmathis/lemma.git synced 2025-11-06 16:04:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate main content

Browse Source
This commit is contained in:
Matúš Námešný
2024-10-09 22:48:58 +02:00
parent 8fdc8daa0f
commit 76b4ed5d88
1 changed files with 63 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
frontend/src/components/MainContent.js
View File

@@ -1,6 +1,6 @@
import React, { useState, useCallback, useEffect } from 'react'; import React, { useState, useCallback, useEffect } from 'react';
import { Breadcrumbs, Grid, Tabs, Dot } from '@geist-ui/core'; import { Tabs, Breadcrumbs, Group, Box, Text, Flex } from '@mantine/core';
import { Code, Eye } from '@geist-ui/icons'; import { IconCode, IconEye, IconPointFilled } from '@tabler/icons-react';
import FileActions from './FileActions'; import FileActions from './FileActions';
import FileTree from './FileTree'; import FileTree from './FileTree';
@@ -73,54 +73,64 @@ const MainContent = () => {
); );
const renderBreadcrumbs = () => { const renderBreadcrumbs = () => {
if (!selectedFile) return <div className="breadcrumbs-container"></div>; if (!selectedFile) return null;
const pathParts = selectedFile.split('/'); const pathParts = selectedFile.split('/');
const items = pathParts.map((part, index) => (
<Text key={index} size="sm">
{part}
</Text>
));
return ( return (
<div className="breadcrumbs-container"> <Group>
<Breadcrumbs> <Breadcrumbs separator="/">{items}</Breadcrumbs>
{pathParts.map((part, index) => (
<Breadcrumbs.Item key={index}>{part}</Breadcrumbs.Item>
))}
</Breadcrumbs>
{hasUnsavedChanges && ( {hasUnsavedChanges && (
<Dot type="warning" className="unsaved-indicator" /> <IconPointFilled
size={16}
style={{ color: 'var(--mantine-color-yellow-filled)' }}
/>
)} )}
</div> </Group>
); );
}; };
return ( return (
<> <Box style={{ height: 'calc(100vh - 60px)', display: 'flex' }}>
<Grid.Container gap={1} height="calc(100vh - 64px)"> <Box
<Grid xs={24} sm={6} md={5} lg={4} height="100%" className="sidebar"> style={{
<div className="file-tree-container"> width: '300px',
borderRight: '1px solid var(--mantine-color-gray-3)',
overflow: 'hidden',
}}
>
<FileActions <FileActions
handlePullChanges={handlePull} handlePullChanges={handlePull}
selectedFile={selectedFile} selectedFile={selectedFile}
/> />
<FileTree <FileTree files={files} handleFileSelect={handleFileSelect} />
files={files} </Box>
selectedFile={selectedFile} <Box
handleFileSelect={handleFileSelect} style={{
/> flex: 1,
</div> overflow: 'hidden',
</Grid> display: 'flex',
<Grid flexDirection: 'column',
xs={24} }}
sm={18}
md={19}
lg={20}
height="100%"
className="main-content"
> >
<div className="content-header"> <Flex justify="space-between" align="center" p="md">
{renderBreadcrumbs()} {renderBreadcrumbs()}
<Tabs value={activeTab} onChange={handleTabChange}> <Tabs value={activeTab} onChange={handleTabChange}>
<Tabs.Item label={<Code />} value="source" /> <Tabs.List>
<Tabs.Item label={<Eye />} value="preview" /> <Tabs.Tab value="source" leftSection={<IconCode size="0.8rem" />}>
Source
</Tabs.Tab>
<Tabs.Tab value="preview" leftSection={<IconEye size="0.8rem" />}>
Preview
</Tabs.Tab>
</Tabs.List>
</Tabs> </Tabs>
</div> </Flex>
<div className="content-body"> <Box style={{ flex: 1, overflow: 'auto' }}>
<ContentView <ContentView
activeTab={activeTab} activeTab={activeTab}
selectedFile={selectedFile} selectedFile={selectedFile}
@@ -129,16 +139,15 @@ const MainContent = () => {
handleSave={handleSaveFile} handleSave={handleSaveFile}
handleLinkClick={handleLinkClick} handleLinkClick={handleLinkClick}
/> />
</div> </Box>
</Grid> </Box>
</Grid.Container>
<CreateFileModal onCreateFile={handleCreateFile} /> <CreateFileModal onCreateFile={handleCreateFile} />
<DeleteFileModal <DeleteFileModal
onDeleteFile={handleDeleteFile} onDeleteFile={handleDeleteFile}
selectedFile={selectedFile} selectedFile={selectedFile}
/> />
<CommitMessageModal onCommitAndPush={handleCommitAndPush} /> <CommitMessageModal onCommitAndPush={handleCommitAndPush} />
</> </Box>
); );
}; };