diff --git a/.vscode/settings.json b/.vscode/settings.json index 99e58e0..eb98407 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,12 +2,13 @@ "typescript.tsdk": "node_modules/typescript/lib", "eslint.format.enable": true, "eslint.codeActionsOnSave.mode": "all", + "css.lint.validProperties": ["composes"], "css.format.spaceAroundSelectorSeparator": true, "[css]": { "editor.suggest.insertMode": "replace", "gitlens.codeLens.scopes": ["document"], "editor.formatOnSave": true, - "editor.defaultFormatter": "vscode.css-language-features" + "editor.defaultFormatter": "vscode.css-language-features", }, "[javascript]": { "editor.formatOnSave": false, diff --git a/components/SideComponentWrapper.module.css b/components/SideComponentWrapper.module.css new file mode 100644 index 0000000..81ceba5 --- /dev/null +++ b/components/SideComponentWrapper.module.css @@ -0,0 +1,32 @@ +.wrapperCommon { + background-color: var(--secondary-background); + display: flex; + width: 80%; + padding: calc(40rem / 16) calc(50rem / 16); + margin: calc(80rem / 16) 0; +} + +.wrapperRight { + composes: wrapperCommon; + align-self: end; + margin-right: 0; + padding-right: 0; + border-radius: calc(200rem / 16) 0 0 calc(200rem / 16); +} + +.wrapperLeft { + composes: wrapperCommon; + align-self: start; + margin-left: 0; + padding-left: 0; + border-radius: 0 12.5rem 12.5rem 0; +} + +.graphWrapper { + margin: calc(20rem / 16); +} + + +.textWrapper { + margin: 0 calc(100rem / 16); +} \ No newline at end of file diff --git a/components/SideComponentWrapper.tsx b/components/SideComponentWrapper.tsx new file mode 100644 index 0000000..6f1cdc8 --- /dev/null +++ b/components/SideComponentWrapper.tsx @@ -0,0 +1,27 @@ +import React from "react"; + +import styles from "./SideComponentWrapper.module.css"; + +type ComponentWrapperProps = { + children: React.ReactNode; + heading: string; + body: string; + rightAligned?: boolean; +}; + +export default function SideComponentWrapper({ + heading, + body, + children, + rightAligned = false, +}: ComponentWrapperProps) { + return ( +
{body}
+