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

117
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,72 +73,81 @@ 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',
<FileActions borderRight: '1px solid var(--mantine-color-gray-3)',
handlePullChanges={handlePull} overflow: 'hidden',
selectedFile={selectedFile} }}
/> >
<FileTree <FileActions
files={files} handlePullChanges={handlePull}
selectedFile={selectedFile} selectedFile={selectedFile}
handleFileSelect={handleFileSelect} />
/> <FileTree files={files} handleFileSelect={handleFileSelect} />
</div> </Box>
</Grid> <Box
<Grid style={{
xs={24} flex: 1,
sm={18} overflow: 'hidden',
md={19} display: 'flex',
lg={20} flexDirection: 'column',
height="100%" }}
className="main-content" >
> <Flex justify="space-between" align="center" p="md">
<div className="content-header"> {renderBreadcrumbs()}
{renderBreadcrumbs()} <Tabs value={activeTab} onChange={handleTabChange}>
<Tabs value={activeTab} onChange={handleTabChange}> <Tabs.List>
<Tabs.Item label={<Code />} value="source" /> <Tabs.Tab value="source" leftSection={<IconCode size="0.8rem" />}>
<Tabs.Item label={<Eye />} value="preview" /> Source
</Tabs> </Tabs.Tab>
</div> <Tabs.Tab value="preview" leftSection={<IconEye size="0.8rem" />}>
<div className="content-body"> Preview
<ContentView </Tabs.Tab>
activeTab={activeTab} </Tabs.List>
selectedFile={selectedFile} </Tabs>
content={content} </Flex>
handleContentChange={handleContentChange} <Box style={{ flex: 1, overflow: 'auto' }}>
handleSave={handleSaveFile} <ContentView
handleLinkClick={handleLinkClick} activeTab={activeTab}
/> selectedFile={selectedFile}
</div> content={content}
</Grid> handleContentChange={handleContentChange}
</Grid.Container> handleSave={handleSaveFile}
handleLinkClick={handleLinkClick}
/>
</Box>
</Box>
<CreateFileModal onCreateFile={handleCreateFile} /> <CreateFileModal onCreateFile={handleCreateFile} />
<DeleteFileModal <DeleteFileModal
onDeleteFile={handleDeleteFile} onDeleteFile={handleDeleteFile}
selectedFile={selectedFile} selectedFile={selectedFile}
/> />
<CommitMessageModal onCommitAndPush={handleCommitAndPush} /> <CommitMessageModal onCommitAndPush={handleCommitAndPush} />
</> </Box>
); );
}; };