begin js(x) to ts(x)

src/layouts/WhitelabelLayout.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const WhitelabelLayout = ({ children, header, footer, customStyles }) => {
-    return (
-        <div style={customStyles} className="whitelabel-layout">
-            {header && <header className="whitelabel-header">{header}</header>}
-            <main className="whitelabel-main">{children}</main>
-            {footer && <footer className="whitelabel-footer">{footer}</footer>}
-        </div>
-    );
-};
-
-WhitelabelLayout.propTypes = {
-    children: PropTypes.node.isRequired,
-    header: PropTypes.node,
-    footer: PropTypes.node,
-    customStyles: PropTypes.object,
-};
-
-WhitelabelLayout.defaultProps = {
-    header: null,
-    footer: null,
-    customStyles: {},
-};
-
-export default WhitelabelLayout;

src/layouts/WhitelabelLayout.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode, CSSProperties } from 'react';
+
+interface WhitelabelLayoutProps {
+    children: ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
+    customStyles?: CSSProperties;
+}
+
+const WhitelabelLayout: React.FC<WhitelabelLayoutProps> = ({ 
+    children, 
+    header = null, 
+    footer = null, 
+    customStyles = {} 
+}) => {
+    return (
+        <div style={customStyles} className="whitelabel-layout">
+            {header && <header className="whitelabel-header">{header}</header>}
+            <main className="whitelabel-main">{children}</main>
+            {footer && <footer className="whitelabel-footer">{footer}</footer>}
+        </div>
+    );
+};
+
+export default WhitelabelLayout;