Problem z napisaniem okna - React

Siema.

Kodowałem już projekty embedded, miałem styczność z AI, brałem też udział w pisaniu kodu do systemów wymagających wysokiej wydajności oraz bawiłem się w stawianie serwerów, ale skala trudności tych projektów to jest nic w porównaniu z CSSem - to g***o przerasta moje zdolności pojmowania.

Czy byłby ktoś w stanie pomóc mi ogarnąć taki styl okna - obrazek w załączniku?

Piszę to w reactcie oraz przy użyciu biblioteki komponentów ChakraUI.
W kodzie jest syf bo niezliczę ile razy eksperymentowałem z różnymi opcjami.

App.jsx:

import { Flex, Spacer } from "@chakra-ui/react";
import CodeEditor from "./components/CodeEditor";
import Toolbar from "./components/Toolbar";


function App() {
  return (
    <Flex direction="column" alignItems="center" minWidth="max-content" gap="2" w="100%" h="100%">
      <Toolbar />
      <Spacer p="10px"/>
      <CodeEditor />
    </Flex>
  );
}

export default App;

Toolbar.jsx:

import { Flex, HStack, Image } from "@chakra-ui/react";

export default function Toolbar() {
  return (
    <Flex bg="green.400" minWidth="100%" minHeight="100%">
      <HStack>
        <Image borderRadius="full" boxSize="50px" />
      </HStack>
    </Flex>
  );
}

CodeEditor.jsx:

import { Alert, AlertTitle, Flex, HStack } from "@chakra-ui/react";
import CodeInputWindow from "./CodeInputWindow";
import CompiledCodeWindow from "./CompiledCodeWindow";
import useFetch from "./useFetch";

export default function CodeEditor() {
  const URL = "http://localhost:8000/api/available-compilers";

  const { data: availableCompilers, isPending, error } = useFetch(URL);

  return (
    <Flex p="10px" mb="60px" alignItems="flex-start" w="100%" h="100%">
      <HStack spacing="40px">
        {error && (
          <Alert status="error">
            <AlertTitle>{error.message}</AlertTitle>
          </Alert>
        )}
        {availableCompilers && (
          <CodeInputWindow 
            availableCompilers={availableCompilers["available_compilers"]}
          />
        )}
        <CompiledCodeWindow />
      </HStack>
    </Flex>
  );
}

CodeInputWindow.jsx:

import { Textarea, Flex, Menu, MenuButton, HStack, Spacer, MenuList, MenuItem, VStack, Box, Heading, Button} from "@chakra-ui/react";
import {ChevronDownIcon} from "@chakra-ui/icons";


export default function CodeInputWindow({availableCompilers}) {
  return (
        <Flex minWidth='max-content' alignItems='center' gap='2' direction="column" w="100%" h="100%">
            <HStack p='2'>
                <Heading size='md'>Chakra App</Heading>
                <Menu>
                        <MenuButton
                            px={4}
                            py={2}
                            transition='all 0.2s'
                            borderRadius='md'
                            borderWidth='1px'
                            _hover={{ bg: 'gray.100' }}
                            _expanded={{ bg: 'gray.200' }}
                            _focus={{ boxShadow: 'outline' }}
                        >
                            Select Compiler <ChevronDownIcon />
                        </MenuButton>
                        
                        {availableCompilers.map((availableCompiler) => 
                            <MenuList>
                                <MenuItem>{availableCompiler}</MenuItem>
                            </MenuList>
                        )}
                    </Menu>
            </HStack>
            <Spacer />
            <Textarea resize="none" w="50vh"/>
        </Flex>
  )
}

Od razu zaznacze, ze nigdy nie miałem z ChakraUI do czynienia w swoim życiu, ale zrobiłbym to mniej więcej tak:

Wszystko umieść we wrapperze, tj:

<div className="page-wrapper">
// Potem kolejny div, nazwij go menu-container:
  <div className="menu-container">
  // Teraz coś na pasek narzędzi
  <div className="menu-toolbox">
      // Tutaj nie wiem jak konkretnie ten pasek narzędzi miałby wyglądać, ale potencjalnie użyłbym po prostu Buttonów - https://v2.chakra-ui.com/docs/components/button/usage
  </div>
  
  
  // Następnie, żeby rozdzielić te dwie sekcje wpakuj te przyciski + textarea w osobny div i użyj flexboxa do ułożenia tego w całość :
  // Jak działa flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  
  <div className="menu-container__left">
      <div className="left-selector">
          //Tutaj component Select - https://v2.chakra-ui.com/docs/components/select/usage
      </div>
      <div className="left-textarea">
          //Tutaj component TextArea - https://v2.chakra-ui.com/docs/components/textarea/usage
     </div>
  <div>
  
  </div>
      <div className="menu-container__right">
          <div className="right-selector">
              // Tutaj component Input - https://v2.chakra-ui.com/docs/components/input/usage
              // Tutaj component Select - https://v2.chakra-ui.com/docs/components/select/usage
          </div>
          <div className="right-textarea">
              // Tutaj component TextArea - https://v2.chakra-ui.com/docs/components/textarea/usage
          </div>
      </div>
  </div>
</div>

Mam nadzieję, że to Ci jakoś pomogło, pisałem to w sumie na żywioł, bardziej traktuj to jako dummy code niż instrukcję 1:1

@CraneDev: No właśnie największy problem jest z CSS'em, samego HTML'a coś tam ogarniam ;d

Eldorad O. napisał(a):

@CraneDev: No właśnie największy problem jest z CSS'em, samego HTML'a coś tam ogarniam ;d

TLDR; ale może grid-template-areas wpasuje się w Twoje gusta, po prostu sobie "rysujesz" w ascii layout:

grid-template-areas: 
            "narzedzia narzedzia"
            "przycisk1 przycisk2"
            "textarea1 textarea2";

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

@obscurity: Dobry patent, ale już mi się udało to ogarnąć