first

wp-content/plugins/visual-portfolio/gutenberg/components/tabs-control/index.js

@@ -0,0 +1,29 @@
+import './style.scss';
+
+import { TabPanel } from '@wordpress/components';
+import { Component, RawHTML } from '@wordpress/element';
+
+/**
+ * Component Class
+ */
+export default class TabsControl extends Component {
+	render() {
+		const { onChange, children, options } = this.props;
+
+		return (
+			<TabPanel
+				className="vpf-component-tabs-control"
+				onSelect={onChange}
+				tabs={options.map((item) => {
+					return {
+						name: item.category,
+						title: item.title,
+						icon: item.icon ? <RawHTML>{item.icon}</RawHTML> : null,
+					};
+				})}
+			>
+				{children}
+			</TabPanel>
+		);
+	}
+}

wp-content/plugins/visual-portfolio/gutenberg/components/tabs-control/style.scss

@@ -0,0 +1,8 @@
+.vpf-component-tabs-control {
+	margin: 0 -16px;
+	margin-bottom: -26px;
+
+	.components-tab-panel__tabs-item {
+		flex: 1;
+	}
+}