init

content/templates/react/components/sheet/index.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode, useMemo } from "react";
+import styled from "styled-components";
+import { createTheme } from "@/theme/create";
+import { ThemeProvider } from "@/theme/provider";
+
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.foreground};
+  min-height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+const BackgroundWrapper = styled.div<{
+  image?: string;
+}>`
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background-size: cover;
+  background-position: center;
+  opacity: 0.2;
+  ${({ image }) => (image ? `background-image: url(${image});` : "")}
+`;
+
+const Content = styled.div`
+  z-index: 1;
+  display: flex;
+  max-width: 1000px;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+type Props = {
+  children: ReactNode;
+  background?: string;
+  color?: string;
+};
+
+const Sheet: React.FC<Props> = ({ color, background, children }) => {
+  const theme = useMemo(
+    () =>
+      createTheme({
+        baseColor: color,
+      }),
+    [color]
+  );
+  return (
+    <ThemeProvider theme={theme}>
+      <Wrapper>
+        <BackgroundWrapper image={background} />
+        <Content>{children}</Content>
+      </Wrapper>
+    </ThemeProvider>
+  );
+};
+
+export { Sheet };