From f1f25f4764dd8d297a59765b0df85f55da2b39ee Mon Sep 17 00:00:00 2001
From: flu0r1ne <flu0r1ne@flu0r1ne.net>
Date: Mon, 19 Jul 2021 21:08:50 -0500
Subject: Init

---
 components/ViewPort/index.module.scss | 18 ++++++++++++++++++
 components/ViewPort/index.tsx         | 23 +++++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 components/ViewPort/index.module.scss
 create mode 100644 components/ViewPort/index.tsx

(limited to 'components/ViewPort')

diff --git a/components/ViewPort/index.module.scss b/components/ViewPort/index.module.scss
new file mode 100644
index 0000000..c9b6ab0
--- /dev/null
+++ b/components/ViewPort/index.module.scss
@@ -0,0 +1,18 @@
+.viewport-sm, .viewport-md, .viewport-lg {
+    margin: 0 auto;
+}
+
+.viewport-sm {
+    width: 50%;
+    width: calc(110px + 44vw);
+}
+
+.viewport-md {
+    width: 60%;
+    width: calc(80px + 55vw);
+}
+
+.viewport-lg {
+    width: 85%;
+    width: calc(25px + 85vw);
+}
\ No newline at end of file
diff --git a/components/ViewPort/index.tsx b/components/ViewPort/index.tsx
new file mode 100644
index 0000000..665ee00
--- /dev/null
+++ b/components/ViewPort/index.tsx
@@ -0,0 +1,23 @@
+import React, { FC } from "react"
+import styles from './index.module.scss';
+import clsx from 'clsx';
+
+export type Props = {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+};
+
+const Viewport : FC<Props> = ({children, className, size}) => {
+    const _size : string = size || "md";
+    const sizeClass : string = styles['viewport-' + _size];
+
+    return (
+        <div
+            className={clsx(sizeClass, className)}
+        >
+            {children}
+        </div>
+    )
+};
+
+export default Viewport;
\ No newline at end of file
-- 
cgit v1.2.3