feat(background): adds a basic background component to wrap your app and screens in

Author: hackr-sh

src/components/Background.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import "./css/main.css";
+import styled from "styled-components";
+import { getThemeValue } from "./ThemeProvider";
+
+export const Background = (props: { children: React.ReactNode }) => {
+  const { children } = props;
+  return <StyledBackground>{children}</StyledBackground>;
+};
+
+const StyledBackground = styled.div`
+  background-color: ${(props) =>
+    props.theme.background ?? getThemeValue("background")};
+  color: ${(props) => props.theme.text ?? getThemeValue("text")};
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+`;

src/index.ts

@@ -1,6 +1,7 @@
 // MARK: Component imports
 
 export { Button, type ButtonProps } from './components/Button';
+export { Background } from './components/Background';
 export { TextField, type TextFieldProps } from './components/TextField';
 export { Text, type TextProps } from './components/Text';
 export { ThemeProvider } from './components/ThemeProvider';