aboutsummaryrefslogtreecommitdiff
path: root/components/ViewPort
diff options
context:
space:
mode:
Diffstat (limited to 'components/ViewPort')
-rw-r--r--components/ViewPort/index.tsx33
1 files changed, 19 insertions, 14 deletions
diff --git a/components/ViewPort/index.tsx b/components/ViewPort/index.tsx
index 29191a1..08b4c7e 100644
--- a/components/ViewPort/index.tsx
+++ b/components/ViewPort/index.tsx
@@ -1,24 +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;
- children?: React.ReactNode;
+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;