From 16baa822cc897fa8764c14861f7869f46ca50e30 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Mon, 30 May 2022 21:11:40 -0500
Subject: Compress results gif

---
 components/ViewPort/index.tsx | 34 ++++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

(limited to 'components/ViewPort')

diff --git a/components/ViewPort/index.tsx b/components/ViewPort/index.tsx
index 665ee00..08b4c7e 100644
--- a/components/ViewPort/index.tsx
+++ b/components/ViewPort/index.tsx
@@ -1,23 +1,29 @@
 import React, { FC } from "react"
 import styles from './index.module.scss';
+import { getSystemStyle, SystemProps } from '../utils/systemProps';
 import clsx from 'clsx';
 
-export type Props = {
-    size?: "sm" | "md" | "lg";
-    className?: string;
+interface Props extends SystemProps {
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
 };
 
-const Viewport : FC<Props> = ({children, className, size}) => {
-    const _size : string = size || "md";
-    const sizeClass : string = styles['viewport-' + _size];
+const Viewport : FC<Props> = ({children, className, style, size, ...systemProps}) => {
+  style = getSystemStyle(systemProps, style);
 
-    return (
-        <div
-            className={clsx(sizeClass, className)}
-        >
-            {children}
-        </div>
-    )
+  const _size : string = size || "md";
+  const sizeClass : string = styles['viewport-' + _size];
+
+  return (
+    <div
+        className={clsx(sizeClass, className)}
+        style={style}
+    >
+      {children}
+    </div>
+  )
 };
 
-export default Viewport;
\ No newline at end of file
+export default Viewport;
-- 
cgit v1.2.3