refactor: refactor sections (#40)

Author: vault-developer

src/pages/home/Home.styled.ts

@@ -58,28 +58,6 @@ export const NarrowColumn = styled.div(
 	`
 );
 
-export const BaseLayoutElement = styled.div(
-	({ theme: { custom } }) => css`
-		border: 1px solid ${custom.sys.colors.border};
-		background: ${custom.sys.colors.container};
-		transition:
-			background-color ${custom.sys.transitions.color},
-			border-color ${custom.sys.transitions.color};
-		margin: 0;
-		padding: 10px;
-		border-radius: 8px;
-	`
-);
-
-export const List = styled(BaseLayoutElement)`
-	display: flex;
-	flex-direction: column;
-	padding: 10px;
-	gap: 20px;
-	overflow: auto;
-	position: relative;
-`;
-
 export const sharedComponentStyles = ({ theme }: { theme: Theme }) => css`
 	min-height: 10vh;
 	@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {

src/pages/home/sections/Callstack/Callstack.modal.tsx

@@ -1,52 +1,14 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import { TransparentButton } from 'components/TransparentButton/TransparentButton.tsx';
+import { BaseQueue } from 'pages/home/sections/base/BaseQueue/BaseQueue.tsx';
 
-export const Callstack = styled.div(
+export const Callstack = styled(BaseQueue)(
 	({ theme }) => css`
-		flex: 1;
-		display: flex;
 		flex-direction: row-reverse;
 		justify-content: end;
-		gap: 20px;
 
 		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-direction: column-reverse;
 		}
 	`
 );
-
-export const CallstackElement = styled.div(
-	({ theme: { custom } }) => css`
-		background: ${custom.com.queueElement.background};
-		transition: background-color ${custom.sys.transitions.color};
-		animation: ${custom.sys.animations.zoomIn};
-		border: 1px solid ${custom.sys.colors.border};
-		border-radius: 4px;
-		padding: 10px;
-		word-wrap: break-word;
-		word-break: break-word;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex: 1;
-		max-width: 33.33%;
-
-		@media (min-width: ${custom.sys.breakpoints.desktop}px) {
-			max-width: unset;
-			flex-grow: 0;
-		}
-	`
-);
-
-export const InfoButton = styled(TransparentButton)`
-	position: absolute;
-	top: 8px;
-	right: 8px;
-`;
-
-export const CloseButton = styled(TransparentButton)`
-	position: absolute;
-	top: 12px;
-	right: 12px;
-`;

src/pages/home/sections/Callstack/Callstack.styled.ts

@@ -1,29 +1,54 @@
 import * as Styled from './Callstack.styled.ts';
-import useBoolean from 'utils/hooks/useBoolean.ts';
-import { List } from '../../Home.styled.ts';
-import CallStackModal from './Callstack.modal.tsx';
 import { useQueueManagerStore } from 'store/store.ts';
-import { Icon } from 'components/Icon/Icon.tsx';
-import { useTheme } from '@emotion/react';
+import { BaseModalSection } from 'pages/home/sections/base/BaseModalSection/BaseModalSection.tsx';
+import { BaseQueueElement } from 'pages/home/sections/base/BaseQueueElement/BaseQueueElement.tsx';
+
+const ModalContent = (
+	<>
+		<h2>Call stack</h2>
+		<p>
+			A call stack is a mechanism for an interpreter to keep track of its place
+			in a script that calls multiple functions — what function is currently
+			being run and what functions are called from within that function, etc.
+		</p>
+		<ul>
+			<li>
+				When a script calls a function, the interpreter adds it to the call
+				stack and then starts carrying out the function.
+			</li>
+			<li>
+				Any functions that are called by that function are added to the call
+				stack further up, and run where their calls are reached.
+			</li>
+			<li>
+				When the current function is finished, the interpreter takes it off the
+				stack and resumes execution where it left off in the last code listing.
+			</li>
+			<li>
+				If the stack takes up more space than it was assigned, a "stack
+				overflow" error is thrown.
+			</li>
+		</ul>
+	</>
+);
 
 function CallStack({ className }: { className?: string }) {
 	const tasks = useQueueManagerStore((state) => state.callstack);
-	const [isOpened, toggle] = useBoolean(false);
-	const theme = useTheme();
 
 	return (
-		<List className={className}>
-			<span>CallStack</span>
+		<BaseModalSection
+			className={className}
+			title={'CallStack'}
+			modalContent={ModalContent}
+		>
 			<Styled.Callstack>
-				<Styled.InfoButton onClick={toggle}>
-					<Icon variant={'info'} color={theme.custom.com.icon.background} />
-				</Styled.InfoButton>
 				{tasks.map((task) => (
-					<Styled.CallstackElement key={task}>{task}</Styled.CallstackElement>
+					<BaseQueueElement isVertical key={task}>
+						{task}
+					</BaseQueueElement>
 				))}
-				<CallStackModal isOpened={isOpened} toggle={toggle} />
 			</Styled.Callstack>
-		</List>
+		</BaseModalSection>
 	);
 }
 

src/pages/home/sections/Callstack/Callstack.tsx

@@ -1,9 +1,9 @@
 import * as Styled from './Configurator.styled.ts';
-import { BaseLayoutElement } from '../../Home.styled.ts';
 import Controls from './Controls/Controls.tsx';
 import Editor from './Editor/Editor.tsx';
 import { codeExamples } from './Configurator.data.tsx';
 import { useState } from 'react';
+import { BaseLayoutElement } from 'pages/home/sections/base/BaseLayoutElement/BaseLayoutElement.tsx';
 
 export default function Configurator({ className }: { className?: string }) {
 	const [text, setText] = useState(codeExamples[3].code);

src/pages/home/sections/Configurator/Configurator.tsx

@@ -1,41 +1,11 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import { BaseQueue } from 'pages/home/sections/base/BaseQueue/BaseQueue.tsx';
 
-export const LogQueue = styled.div(
+export const LogQueue = styled(BaseQueue)(
 	({ theme }) => css`
-		flex: 1;
-		display: flex;
-		justify-content: start;
-		gap: 20px;
-
 		@media (min-width: ${theme.custom.sys.breakpoints.desktop}px) {
 			flex-direction: column;
 		}
 	`
 );
-
-export const Log = styled.div(
-	({
-		theme: {
-			custom: { sys, com },
-		},
-	}) => css`
-		background: ${com.queueElement.background};
-		transition: background-color ${sys.transitions.color};
-		animation: ${sys.animations.zoomIn};
-		border: 1px solid ${sys.colors.border};
-		border-radius: 4px;
-		padding: 10px;
-		word-wrap: break-word;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex: 1;
-		max-width: 33.33%;
-
-		@media (min-width: ${sys.breakpoints.desktop}px) {
-			max-width: unset;
-			flex-grow: 0;
-		}
-	`
-);

src/pages/home/sections/Console/Console.styled.ts

@@ -1,19 +1,21 @@
 import { useQueueManagerStore } from 'store/store.ts';
 import * as Styled from './Console.styled.ts';
-import { List } from '../../Home.styled.ts';
+import { BaseSection } from 'pages/home/sections/base/BaseSection/BaseSection.tsx';
+import { BaseQueueElement } from 'pages/home/sections/base/BaseQueueElement/BaseQueueElement.tsx';
 
 function Console({ className }: { className?: string }) {
 	const tasks = useQueueManagerStore((state) => state.console);
 
 	return (
-		<List className={className}>
-			<span>Console</span>
+		<BaseSection className={className} title={'Console'}>
 			<Styled.LogQueue>
 				{tasks.map((log, i) => (
-					<Styled.Log key={log + i}>{log}</Styled.Log>
+					<BaseQueueElement isVertical key={log + i}>
+						{log}
+					</BaseQueueElement>
 				))}
 			</Styled.LogQueue>
-		</List>
+		</BaseSection>
 	);
 }
 

src/pages/home/sections/Console/Console.tsx

@@ -1,11 +1,11 @@
 import * as Styled from './EventLoop.styled.ts';
 import useBoolean from 'utils/hooks/useBoolean.ts';
-import { BaseLayoutElement } from 'pages/home/Home.styled.ts';
 import { EVENT_LOOP_ID } from 'utils/constants.ts';
 import EventLoopModal from './EventLoop.modal.tsx';
 import Wheel from 'pages/home/sections/EventLoop/Wheel/Wheel.tsx';
 import { Icon } from 'components/Icon/Icon.tsx';
 import { useTheme } from '@emotion/react';
+import { BaseLayoutElement } from 'pages/home/sections/base/BaseLayoutElement/BaseLayoutElement.tsx';
 
 function EventLoop({ className }: { className?: string }) {
 	const [isOpened, toggle] = useBoolean(false);