@eightshift/frontend-libs-tailwind 1.0.0

package/blocks/init/src/Blocks/components/quote/components/quote-options.js

@@ -0,0 +1,29 @@
+import { __ } from '@wordpress/i18n';
+import { checkAttr, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
+import { ComponentToggle, Toggle } from '@eightshift/ui-components';
+import { icons, JsxSvg } from '@eightshift/ui-components/icons';
+import manifest from './../manifest.json';
+
+export const QuoteOptions = (attributes) => {
+	const { setAttributes, ...rest } = attributes;
+
+	const quoteUse = checkAttr('quoteUse', attributes, manifest);
+	const quoteShowIcon = checkAttr('quoteShowIcon', attributes, manifest);
+
+	return (
+		<ComponentToggle
+			label={manifest.title}
+			icon={icons.paragraph}
+			onChange={(value) => setAttributes({ [getAttrKey('quoteUse', attributes, manifest)]: value })}
+			useComponent={quoteUse}
+			{...rest}
+		>
+			<Toggle
+				icon={<JsxSvg svg={manifest.resources.quoteIcon} />}
+				label={__('Icon', '%g_textdomain%')}
+				checked={quoteShowIcon}
+				onChange={(value) => setAttributes({ [getAttrKey('quoteShowIcon', attributes, manifest)]: value })}
+			/>
+		</ComponentToggle>
+	);
+};

package/blocks/init/src/Blocks/components/quote/manifest.json

@@ -0,0 +1,47 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "quote",
+	"title": "Quote",
+	"componentClass": "quote",
+	"example": {
+		"attributes": {
+			"quoteUse": true
+		}
+	},
+	"attributes": {
+		"quoteUse": {
+			"type": "boolean",
+			"default": true
+		},
+		"quoteShowIcon": {
+			"type": "boolean",
+			"default": "true"
+		},
+		"quoteText": {
+			"type": "string"
+		},
+		"quoteAuthor": {
+			"type": "string"
+		}
+	},
+	"resources": {
+		"quoteIcon": "<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none'><path d='M27.058 17.98c-2.467 0-4.343-.569-5.628-1.705-1.259-1.162-1.888-2.698-1.888-4.61 0-2.117.77-3.834 2.312-5.15C23.396 5.17 25.246 4.5 27.404 4.5c2.493 0 4.549.84 6.168 2.518C35.19 8.696 36 11.188 36 14.493c0 2.944-.527 5.578-1.58 7.902-1.054 2.298-2.519 4.21-4.394 5.733-1.85 1.523-3.983 2.582-6.399 3.176-.925.232-1.657.258-2.197.077-.514-.206-.848-.568-1.002-1.084-.128-.49-.038-.956.27-1.395.334-.439.964-.826 1.889-1.162 1.721-.62 3.135-1.394 4.24-2.324 1.13-.93 1.965-1.91 2.505-2.943.565-1.06.848-2.027.848-2.905 0-.491-.142-.879-.424-1.163-.257-.284-.745-.426-1.465-.426h-1.233Zm-19.58.038c-2.467 0-4.33-.568-5.59-1.704C.63 15.152 0 13.602 0 11.666 0 9.548.758 7.83 2.274 6.514 3.816 5.171 5.666 4.5 7.824 4.5c2.519 0 4.574.84 6.167 2.518 1.62 1.678 2.429 4.17 2.429 7.475 0 2.944-.527 5.578-1.58 7.902-1.054 2.324-2.506 4.248-4.356 5.771-1.85 1.524-3.983 2.57-6.398 3.138-.951.232-1.683.258-2.197.077-.514-.206-.848-.568-1.002-1.084-.129-.465-.039-.917.27-1.356.333-.465.95-.865 1.85-1.2 1.721-.62 3.134-1.395 4.24-2.325 1.13-.93 1.965-1.91 2.505-2.943.565-1.033.848-2.002.848-2.905 0-.491-.142-.866-.424-1.124-.257-.284-.746-.426-1.465-.426H7.478Z' fill='currentColor'/></svg>"
+	},
+	"tailwind": {
+		"parts": {
+			"container": {
+				"twClasses": "pl-7 py-5 border-l-4 border-l-gray-300"
+			},
+			"quote-text": {
+				"twClasses": "text-gray-900 font-display ~text-4xl/6xl !leading-none italic text-balance max-w-prose tracking-tight"
+			},
+			"author": {
+				"twClasses": "font-sans text-sm text-gray-500 mt-4 font-light",
+				"twClassesEditor": "inline-flex gap-1 font-sans text-sm text-gray-500 mt-2 font-light"
+			},
+			"icon": {
+				"twClasses": "ml-1 ~mb-3/4 pointer-events-none text-gray-400 size-6"
+			}
+		}
+	}
+}

package/blocks/init/src/Blocks/components/quote/quote.php

@@ -0,0 +1,49 @@
+<?php
+
+/**
+ * Quote component template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+$additionalClass = $attributes['additionalClass'] ?? '';
+
+$quoteUse = Helpers::checkAttr('quoteUse', $attributes, $manifest);
+
+if (!$quoteUse) {
+	return;
+}
+
+$quoteText = Helpers::checkAttr('quoteText', $attributes, $manifest);
+$quoteAuthor = Helpers::checkAttr('quoteAuthor', $attributes, $manifest);
+$quoteShowIcon = Helpers::checkAttr('quoteShowIcon', $attributes, $manifest);
+
+$iconClass = Helpers::getTwPart('icon', $manifest);
+
+$icon = $manifest['resources']['quoteIcon'];
+$icon = str_replace('<svg', '<svg class="' . $iconClass . '"', $icon);
+$icon = str_replace('<svg', '<svg aria-hidden="true"', $icon);
+?>
+
+<figure class="<?php echo esc_attr(Helpers::getTwPart('container', $manifest, $additionalClass)); ?>">
+	<?php
+	if ($quoteShowIcon) {
+		// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+		echo $icon;
+	}
+	?>
+
+	<blockquote class="<?php echo esc_attr(Helpers::getTwPart('quote-text', $manifest)); ?>">
+		<?php echo wp_kses_post($quoteText); ?>
+	</blockquote>
+
+	<?php if (!empty($quoteAuthor)) { ?>
+		<figcaption class="<?php echo esc_attr(Helpers::getTwPart('author', $manifest)); ?>">
+			&mdash;
+			<?php echo wp_kses_post($quoteAuthor); ?>
+		</figcaption>
+	<?php } ?>
+</figure>

package/blocks/init/src/Blocks/components/share/assets/index.js

@@ -0,0 +1,39 @@
+import domReady from '@wordpress/dom-ready';
+import manifest from '../manifest.json';
+
+domReady(async () => {
+	const shareTargets = document.querySelectorAll(`.${manifest.componentJsClass}`);
+
+	if (shareTargets.length < 1) {
+		return;
+	}
+
+	const openShareDialog = async ({ shareUrl, pageUrl, pageTitle }) => {
+		const navigatorShareData = {
+			title: pageTitle,
+			url: pageUrl,
+		};
+
+		if ('share' in navigator && navigator?.canShare(navigatorShareData)) {
+			await navigator?.share(navigatorShareData);
+		} else {
+			window.open(
+				shareUrl,
+				'share-post',
+				'height=600,width=800,left=0,top=0,location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1'
+			);
+		}
+	};
+
+	shareTargets.forEach((element) => {
+		element.querySelectorAll(`.${manifest.componentJsClass}-link`).forEach((link) => {
+			link.addEventListener('click', () => {
+				openShareDialog({
+					shareUrl: link?.dataset?.shareUrl ?? '',
+					pageUrl: link?.dataset?.pageUrl ?? '',
+					pageTitle: link?.dataset?.pageTitle ?? '',
+				});
+			});
+		});
+	});
+});

package/blocks/init/src/Blocks/components/share/components/share-editor.js

@@ -0,0 +1,25 @@
+import { checkAttr, classnames, getAttrKey, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import { JsxSvg } from '@eightshift/ui-components/icons';
+import manifest from '../manifest.json';
+
+export const ShareEditor = (attributes) => {
+	const {
+		additionalClass,
+	} = attributes;
+
+	const shareUse = checkAttr('shareUse', attributes, manifest);
+
+	if (!shareUse) {
+		return null;
+	}
+
+	const shareTargets = checkAttr('shareTargets', attributes, manifest);
+
+	return (
+		<div className={getTwPart('container', manifest, additionalClass)}>
+			{shareTargets.map((network) => {
+				return <JsxSvg className={getTwPart('icon', manifest)} svg={manifest?.networks?.[network]?.icon} />;
+			})}
+		</div>
+	);
+};

package/blocks/init/src/Blocks/components/share/components/share-options.js

@@ -0,0 +1,112 @@
+import { __ } from '@wordpress/i18n';
+import { checkAttr, getAttrKey, getHiddenOptions } from '@eightshift/frontend-libs-tailwind/scripts';
+import manifest from '../manifest.json';
+import {
+	ComponentToggle,
+	OptionSelect,
+	DraggableList,
+	DraggableListItem,
+	Spacer,
+	Switch,
+} from '@eightshift/ui-components';
+import { icons, JsxSvg } from '@eightshift/ui-components/icons';
+
+export const ShareOptions = (attributes) => {
+	const { hideOptions, setAttributes, ...rest } = attributes;
+
+	const hiddenOptions = getHiddenOptions(hideOptions);
+
+	const shareUse = checkAttr('shareUse', attributes, manifest);
+
+	const shareTargets = checkAttr('shareTargets', attributes, manifest);
+	const shareMode = checkAttr('shareMode', attributes, manifest);
+
+	const networksToShow = Object.entries(manifest.networks).reduce((current, [name, info]) => {
+		if (shareMode === 'share' && !info?.shareUrl) {
+			return current;
+		}
+
+		return [...current, { name: name, enabled: shareTargets.includes(name), ...info }];
+	}, []);
+
+	const modeOptions = [
+		{
+			label: __('Link to social networks', '%g_textdomain%'),
+			icon: icons.link,
+			value: 'links',
+		},
+		{
+			label: __('Share the current URL', '%g_textdomain%'),
+			subtitle: __('Unavailable for some networks', '%g_textdomain%'),
+			icon: icons.share,
+			value: 'share',
+		},
+	];
+
+	const pickerSectionTitle = shareMode
+		? __('Share targets', '%g_textdomain%')
+		: __('Social networks', '%g_textdomain%');
+
+	return (
+		<ComponentToggle
+			label={manifest.title}
+			icon={icons.share}
+			onChange={(value) => setAttributes({ [getAttrKey('shareUse', attributes, manifest)]: value })}
+			useComponent={shareUse}
+			{...rest}
+		>
+			<OptionSelect
+				aria-label={__('Share mode', '%g_textdomain%')}
+				value={shareMode}
+				options={modeOptions}
+				onChange={(value) =>
+					setAttributes({
+						[getAttrKey('shareMode', attributes, manifest)]: value,
+					})
+				}
+				type='radiosSegmented'
+				hidden={hiddenOptions?.mode}
+				vertical
+			/>
+
+			<Spacer />
+
+			<DraggableList
+				icon={icons.globe}
+				label={pickerSectionTitle}
+				items={networksToShow}
+				onChange={(value) => {
+					const newValue = value.reduce((current, { name, enabled }) => {
+						if (!enabled) {
+							return current;
+						}
+
+						return [...current, name];
+					}, []);
+
+					setAttributes({ [getAttrKey('shareTargets', attributes, manifest)]: newValue });
+				}}
+				hidden={hiddenOptions?.networks}
+				key={shareMode}
+			>
+				{(item) => {
+					const { enabled, title, icon, updateData } = item;
+
+					return (
+						<DraggableListItem
+							icon={<JsxSvg svg={icon} />}
+							label={title}
+						>
+							<Switch
+								checked={enabled}
+								onChange={(value) => {
+									updateData({ enabled: value });
+								}}
+							/>
+						</DraggableListItem>
+					);
+				}}
+			</DraggableList>
+		</ComponentToggle>
+	);
+};

package/blocks/init/src/Blocks/components/share/manifest.json

@@ -0,0 +1,72 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "share",
+	"title": "Share",
+	"componentClass": "share",
+	"componentJsClass": "js-share",
+	"example": {
+		"attributes": {
+			"shareUse": true
+		}
+	},
+	"attributes": {
+		"shareTargets": {
+			"type": "array",
+			"default": [
+				"facebook",
+				"linkedin",
+				"youtube",
+				"instagram"
+			]
+		},
+		"shareMode": {
+			"type": "string",
+			"default": "links"
+		},
+		"shareUse": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"networks": {
+		"facebook": {
+			"url": "https://www.facebook.com/infinumcom",
+			"title": "Facebook",
+			"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z' fill='currentColor'/></svg>",
+			"shareUrl": "https://www.facebook.com/sharer/sharer.php?u=POST_URL"
+		},
+		"x": {
+			"url": "https://x.com/infinum",
+			"title": "X (formerly Twitter)",
+			"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z' fill='currentColor'/></svg>",
+			"shareUrl": "https://x.com/intent/post?url=POST_URL&text=POST_TITLE"
+		},
+		"linkedin": {
+			"url": "https://www.linkedin.com/company/infinum/",
+			"title": "LinkedIn",
+			"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' fill='currentColor'/></svg>",
+			"shareUrl": "https://www.linkedin.com/sharing/share-offsite/?url=POST_URL"
+		},
+		"youtube": {
+			"url": "https://www.youtube.com/channel/UCQV7qsvmrpe8IbCWZsv3Low",
+			"title": "YouTube",
+			"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' fill='currentColor'/></svg>"
+		},
+		"instagram": {
+			"url": "https://www.instagram.com/infinumcom/",
+			"title": "Instagram",
+			"icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M7.03.084c-1.277.06-2.149.264-2.91.563a5.874 5.874 0 0 0-2.124 1.388 5.878 5.878 0 0 0-1.38 2.127C.321 4.926.12 5.8.064 7.076.008 8.354-.005 8.764.001 12.023c.007 3.259.021 3.667.083 4.947.061 1.277.264 2.149.563 2.911.308.789.72 1.457 1.388 2.123a5.872 5.872 0 0 0 2.129 1.38c.763.295 1.636.496 2.913.552 1.278.056 1.689.069 4.947.063 3.257-.007 3.668-.021 4.947-.082 1.28-.06 2.147-.265 2.91-.563a5.881 5.881 0 0 0 2.123-1.388 5.881 5.881 0 0 0 1.38-2.129c.295-.763.496-1.636.551-2.912.056-1.28.07-1.69.063-4.948-.006-3.258-.02-3.667-.081-4.947-.06-1.28-.264-2.148-.564-2.911a5.892 5.892 0 0 0-1.387-2.123 5.857 5.857 0 0 0-2.128-1.38c-.764-.294-1.636-.496-2.914-.55C15.647.009 15.236-.006 11.977 0 8.718.008 8.31.021 7.03.084m.14 21.693c-1.17-.05-1.805-.245-2.228-.408a3.736 3.736 0 0 1-1.382-.895 3.695 3.695 0 0 1-.9-1.378c-.165-.423-.363-1.058-.417-2.228-.06-1.264-.072-1.644-.08-4.848-.006-3.204.006-3.583.061-4.848.05-1.169.246-1.805.408-2.228.216-.561.477-.96.895-1.382a3.705 3.705 0 0 1 1.379-.9c.423-.165 1.057-.361 2.227-.417 1.265-.06 1.644-.072 4.848-.08 3.203-.006 3.583.006 4.85.062 1.168.05 1.804.244 2.227.408.56.216.96.475 1.382.895.421.42.681.817.9 1.378.165.422.362 1.056.417 2.227.06 1.265.074 1.645.08 4.848.005 3.203-.006 3.583-.061 4.848-.051 1.17-.245 1.805-.408 2.23-.216.56-.477.96-.896 1.38a3.705 3.705 0 0 1-1.378.9c-.422.165-1.058.362-2.226.418-1.266.06-1.645.072-4.85.079-3.204.007-3.582-.006-4.848-.06m9.783-16.192a1.44 1.44 0 1 0 1.437-1.442 1.44 1.44 0 0 0-1.437 1.442M5.839 12.012a6.161 6.161 0 1 0 12.323-.024 6.162 6.162 0 0 0-12.323.024M8 12.008A4 4 0 1 1 12.008 16 4 4 0 0 1 8 12.008' fill='currentColor'/></svg>"
+		}
+	},
+	"tailwind": {
+		"parts": {
+			"container": {
+				"twClasses": "flex items-center gap-2.5"
+			},
+			"icon": {
+				"twClasses": "text-gray-400 hover:text-gray-900 focus:outline-none focus-visible:text-navy-500 [&>svg]:size-5 transition",
+				"twClassesEditor": "text-gray-400 size-5"
+			}
+		}
+	}
+}

package/blocks/init/src/Blocks/components/share/share.php

@@ -0,0 +1,66 @@
+<?php
+
+/**
+ * Share component template.
+ *
+ * @package %g_namespace%
+ */
+
+use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
+
+$manifest = Helpers::getManifestByDir(__DIR__);
+
+$shareUse = Helpers::checkAttr('shareUse', $attributes, $manifest);
+
+if (!$shareUse) {
+	return;
+}
+
+$shareTargets = Helpers::checkAttr('shareTargets', $attributes, $manifest);
+$shareMode = Helpers::checkAttr('shareMode', $attributes, $manifest);
+
+$additionalClass = $attributes['additionalClass'] ?? '';
+
+?>
+<div class="<?php echo esc_attr(Helpers::getTwPart('container', $manifest, $additionalClass)); ?>">
+	<?php
+	if ($shareMode) {
+		foreach ($shareTargets as $networkName) {
+			$shareUrl = $manifest['networks'][$networkName]['shareUrl'] ?? '';
+			$shareUrl = str_replace('POST_TITLE', get_the_title(), $shareUrl);
+			$shareUrl = str_replace('POST_URL', get_the_permalink(), $shareUrl);
+			$shareUrl = str_replace('POST_FEATURED_IMAGE', get_the_post_thumbnail_url(get_the_ID(), 'large'), $shareUrl);
+			?>
+			<button
+				class="<?php echo esc_attr(Helpers::getTwPart('icon', $manifest)); ?>"
+				data-network="<?php echo esc_attr($networkName); ?>"
+				data-share-url="<?php echo esc_url($shareUrl); ?>"
+				data-page-title="<?php echo esc_attr(get_the_title()); ?>"
+				data-page-url="<?php echo esc_url(get_the_permalink()); ?>"
+			>
+				<?php
+				// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+				echo $manifest['networks'][$networkName]['icon'] ?? '';
+				?>
+			</button>
+		<?php }
+	} else {
+		foreach ($shareTargets as $networkName) {
+			?>
+			<a
+				class="<?php echo esc_attr(Helpers::getTwPart('icon', $manifest)); ?>"
+				href="<?php echo esc_url($manifest['networks'][$networkName]['url'] ?? ''); ?>"
+				title="<?php echo esc_attr($manifest['networks'][$networkName]['title'] ?? ''); ?>"
+				target="_blank"
+				rel="noreferrer noopener"
+			>
+				<?php
+				// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
+				echo $manifest['networks'][$networkName]['icon'] ?? '';
+				?>
+			</a>
+			<?php
+		}
+	}
+	?>
+</div>

package/blocks/init/src/Blocks/components/tracking-before-body-end/manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "tracking-before-body-end",
+	"title": "Tracking: Before body end"
+}

package/blocks/init/src/Blocks/components/tracking-before-body-end/tracking-before-body-end.php

@@ -0,0 +1,9 @@
+<?php
+
+/**
+ * Code added to the end of the document body.
+ *
+ * @package %g_namespace%
+ */
+
+// Add your code here.

package/blocks/init/src/Blocks/components/tracking-head/manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/component.json",
+	"componentName": "tracking-before-head",
+	"title": "Tracking: Head"
+}

package/blocks/init/src/Blocks/components/tracking-head/tracking-head.php

@@ -0,0 +1,9 @@
+<?php
+
+/**
+ * Code added to the start of the head. Useful for things like tracking scripts.
+ *
+ * @package %g_namespace%
+ */
+
+// Add your code here.

package/blocks/init/src/Blocks/components/video/components/video-editor.js

@@ -0,0 +1,74 @@
+import { __ } from '@wordpress/i18n';
+import { ManageFileButton, checkAttr, getAttrKey, getTwPart } from '@eightshift/frontend-libs-tailwind/scripts';
+import { HStack, MediaPlaceholder, VStack } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import manifest from '../manifest.json';
+
+export const VideoEditor = (attributes) => {
+	const { setAttributes, additionalClass } = attributes;
+
+	const videoUse = checkAttr('videoUse', attributes, manifest);
+	const videoUrl = checkAttr('videoUrl', attributes, manifest);
+
+	if (!videoUse) {
+		return null;
+	}
+
+	const hasVideo = videoUrl?.length > 0;
+
+	return (
+		<>
+			{!hasVideo && (
+				<MediaPlaceholder
+					style='simple'
+					size='video'
+					icon={icons.video}
+					helpText={
+						<VStack className='mt-2 text-center'>
+							{__('Add a video', 'eightshift-frontend-libs')}
+
+							<HStack>
+								<ManageFileButton
+									type='browse'
+									onChange={({ id, url, mime, mime_type }) =>
+										setAttributes({
+											[getAttrKey('videoId', attributes, manifest)]: id,
+											[getAttrKey('videoUrl', attributes, manifest)]: url,
+											[getAttrKey('videoMimeType', attributes, manifest)]:
+												typeof mime === 'undefined' ? mime_type : mime,
+										})
+									}
+									allowedTypes={['video/mp4', 'video/webm']}
+									kind='video'
+								/>
+
+								<ManageFileButton
+									type='upload'
+									onChange={({ id, url, mime, mime_type }) =>
+										setAttributes({
+											[getAttrKey('videoId', attributes, manifest)]: id,
+											[getAttrKey('videoUrl', attributes, manifest)]: url,
+											[getAttrKey('videoMimeType', attributes, manifest)]:
+												typeof mime === 'undefined' ? mime_type : mime,
+										})
+									}
+									allowedTypes={['video/mp4', 'video/webm']}
+									kind='video'
+								/>
+							</HStack>
+						</VStack>
+					}
+				/>
+			)}
+
+			{hasVideo && (
+				<video
+					className={getTwPart('video', manifest, additionalClass)}
+					src={videoUrl}
+					controls
+					muted
+				/>
+			)}
+		</>
+	);
+};