@eightshift/frontend-libs-tailwind 1.5.0 → 2.0.0

package/blocks/init/src/Blocks/custom/featured-content/components/featured-content-options.js

@@ -1,248 +0,0 @@
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { getAttrKey, checkAttr, getOption, props, fetchFromWpRest } from '@eightshift/frontend-libs-tailwind/scripts';
-import { LoadMoreOptions } from '../../../components/load-more/components/load-more-options';
-import {
-	AnimatedVisibility,
-	AsyncMultiSelect,
-	NumberPicker,
-	OptionSelect,
-	Spacer,
-	Toggle,
-} from '@eightshift/ui-components';
-import { icons } from '@eightshift/ui-components/icons';
-import manifest from '../manifest.json';
-
-export const FeaturedContentOptions = ({ attributes, setAttributes }) => {
-	const featuredContentPostType = checkAttr('featuredContentPostType', attributes, manifest);
-	const featuredContentTaxonomy = checkAttr('featuredContentTaxonomy', attributes, manifest, true);
-	const featuredContentTerms = checkAttr('featuredContentTerms', attributes, manifest) ?? [];
-	const featuredContentUseCurrentTerm = checkAttr('featuredContentUseCurrentTerm', attributes, manifest);
-	const featuredContentPosts = checkAttr('featuredContentPosts', attributes, manifest) ?? [];
-	const featuredContentExcludeCurrentPost = checkAttr('featuredContentExcludeCurrentPost', attributes, manifest);
-	const featuredContentRandomOrder = checkAttr('featuredContentRandomOrder', attributes, manifest);
-	const featuredContentLayout = checkAttr('featuredContentLayout', attributes, manifest);
-	const featuredContentPerPage = checkAttr('featuredContentPerPage', attributes, manifest);
-
-	const allGenericOption = { label: __('Show all', '%g_textdomain%'), value: '_all', separator: 'below' };
-
-	const postTypeOptions = getOption('featuredContentPostType', attributes, manifest);
-	const taxonomyOptions = [allGenericOption, ...getOption('featuredContentTaxonomy', attributes, manifest)];
-
-	// Set internal store for specific items.
-	const [useSpecificPosts, setUseSpecificPosts] = useState(featuredContentPosts?.length > 0);
-	const [useSpecificTerms, setUseSpecificTerms] = useState(featuredContentTerms?.length > 0);
-
-	let termsToShow = '';
-
-	if (featuredContentUseCurrentTerm) {
-		termsToShow = 'current';
-	} else {
-		termsToShow = useSpecificTerms ? 'manual' : 'all';
-	}
-
-	return (
-		<>
-			<OptionSelect
-				icon={icons.layoutAlt3}
-				label={__('Layout', '%g_textdomain%')}
-				value={featuredContentLayout}
-				onChange={(value) => setAttributes({ [getAttrKey('featuredContentLayout', attributes, manifest)]: value })}
-				options={getOption('featuredContentLayout', attributes, manifest)}
-				type='menu'
-				inline
-			/>
-
-			<NumberPicker
-				icon={icons.dummySpacer}
-				label={__('Items per page', '%g_textdomain%')}
-				value={featuredContentPerPage}
-				onChange={(value) => setAttributes({ [getAttrKey('featuredContentPerPage', attributes, manifest)]: value })}
-				min={1}
-				inline
-			/>
-
-			<Spacer />
-			<Spacer />
-
-			<OptionSelect
-				icon={icons.multiple}
-				label={__('Content type', '%g_textdomain%')}
-				value={featuredContentPostType?.value}
-				options={postTypeOptions}
-				onChange={(rawValue) => {
-					setUseSpecificPosts(false);
-					setUseSpecificTerms(false);
-
-					const value = postTypeOptions.find((option) => option.value === rawValue);
-
-					setAttributes({
-						[getAttrKey('featuredContentPostType', attributes, manifest)]: value,
-						[getAttrKey('featuredContentTaxonomy', attributes, manifest)]: undefined,
-						[getAttrKey('featuredContentTerms', attributes, manifest)]: undefined,
-						[getAttrKey('featuredContentUseCurrentTerm', attributes, manifest)]: false,
-						[getAttrKey('featuredContentPosts', attributes, manifest)]: undefined,
-					});
-				}}
-				type='menu'
-				inline
-			/>
-
-			<OptionSelect
-				aria-label={__('Select items to show', '%g_textdomain%')}
-				value={useSpecificPosts}
-				onChange={() => {
-					setUseSpecificPosts(!useSpecificPosts);
-					setAttributes({
-						[getAttrKey('featuredContentPosts', attributes, manifest)]: undefined,
-					});
-				}}
-				options={[
-					{ label: __('Show all posts', '%g_textdomain%'), value: false },
-					{
-						label: __('Select posts to show', '%g_textdomain%'),
-						value: true,
-						disabled: featuredContentExcludeCurrentPost || featuredContentTaxonomy,
-						subtitle:
-							(featuredContentExcludeCurrentPost || featuredContentTaxonomy) &&
-							__('Unavailable when a taxonomy filter is set', '%g_textdomain%'),
-					},
-				]}
-				type='radiosSegmented'
-				vertical
-			/>
-
-			<AnimatedVisibility
-				noInitial
-				visible={!useSpecificPosts}
-			>
-				<Toggle
-					icon={icons.excludeItemAlt}
-					label={__('Exclude current', '%g_textdomain%')}
-					subtitle={__('Best used with blog posts', '%g_textdomain%')}
-					checked={featuredContentExcludeCurrentPost}
-					onChange={(value) =>
-						setAttributes({ [getAttrKey('featuredContentExcludeCurrentPost', attributes, manifest)]: value })
-					}
-				/>
-			</AnimatedVisibility>
-
-			<AnimatedVisibility
-				noInitial
-				visible={useSpecificPosts && !featuredContentExcludeCurrentPost}
-			>
-				<AsyncMultiSelect
-					key={featuredContentPostType.value}
-					help={__(
-						'Newest 30 items are shown, others can be selected by searching. If blank, all items are shown.',
-						'%g_textdomain%',
-					)}
-					value={featuredContentPosts}
-					loadOptions={fetchFromWpRest(featuredContentPostType?.api, {
-						processLabel: ({ title: { rendered } }) => rendered,
-					})}
-					onChange={(value) => setAttributes({ [getAttrKey('featuredContentPosts', attributes, manifest)]: value })}
-					reFetchOnSearch
-				/>
-			</AnimatedVisibility>
-
-			<Spacer />
-
-			<Toggle
-				icon={icons.dice}
-				label={__('Randomize order', '%g_textdomain%')}
-				checked={featuredContentRandomOrder}
-				onChange={(value) => setAttributes({ [getAttrKey('featuredContentRandomOrder', attributes, manifest)]: value })}
-			/>
-
-			<Spacer />
-			<Spacer />
-
-			<OptionSelect
-				icon={icons.filter}
-				label={__('Taxonomy', '%g_textdomain%')}
-				value={(featuredContentTaxonomy ?? allGenericOption)?.value}
-				options={taxonomyOptions}
-				onChange={(rawValue) => {
-					setUseSpecificPosts(false);
-					setUseSpecificTerms(false);
-
-					const value =
-						rawValue === '_all' ? allGenericOption : taxonomyOptions.find((option) => option.value === rawValue);
-
-					setAttributes({
-						[getAttrKey('featuredContentTaxonomy', attributes, manifest)]:
-							value === allGenericOption ? undefined : value,
-						[getAttrKey('featuredContentTerms', attributes, manifest)]: undefined,
-						[getAttrKey('featuredContentUseCurrentTerm', attributes, manifest)]: false,
-						[getAttrKey('featuredContentPosts', attributes, manifest)]: undefined,
-					});
-				}}
-				hidden={featuredContentPostType?.taxonomies?.length < 1}
-				type='menu'
-				inline
-			/>
-
-			<OptionSelect
-				aria-label={__('Select terms to show', '%g_textdomain%')}
-				value={termsToShow}
-				onChange={(value) => {
-					setUseSpecificTerms(value === 'manual');
-					setAttributes({
-						[getAttrKey('featuredContentTerms', attributes, manifest)]: undefined,
-						[getAttrKey('featuredContentUseCurrentTerm', attributes, manifest)]: value === 'current',
-					});
-				}}
-				options={[
-					{ label: __('Show all terms', '%g_textdomain%'), value: 'all' },
-					{
-						label: __('Select terms to show', '%g_textdomain%'),
-						value: 'manual',
-						disabled: (featuredContentTaxonomy ?? allGenericOption)?.value === '_all',
-						subtitle:
-							(featuredContentTaxonomy ?? allGenericOption)?.value === '_all' &&
-							__('Select a taxonomy to enable', '%g_textdomain%'),
-					},
-					{
-						label: __('Show same terms as current post', '%g_textdomain%'),
-						value: 'current',
-					},
-				]}
-				type='radiosSegmented'
-				vertical
-			/>
-
-			<AnimatedVisibility
-				noInitial
-				visible={useSpecificTerms && !featuredContentUseCurrentTerm}
-			>
-				<AsyncMultiSelect
-					key={featuredContentTaxonomy?.value}
-					help={__(
-						'Newest 30 items are shown, others can be selected by searching. If blank, all items are shown.',
-						'%g_textdomain%',
-					)}
-					value={featuredContentTerms}
-					loadOptions={fetchFromWpRest(featuredContentTaxonomy?.api, {
-						fields: 'id,name',
-						processId: ({ id }) => id,
-						processLabel: ({ name }) => name,
-					})}
-					onChange={(value) => setAttributes({ [getAttrKey('featuredContentTerms', attributes, manifest)]: value })}
-					reFetchOnSearch
-					placeholder={__('Select terms to show', '%g_textdomain%')}
-				/>
-			</AnimatedVisibility>
-
-			<Spacer />
-
-			<LoadMoreOptions
-				{...props('loadMore', attributes, {
-					setAttributes,
-				})}
-				label={__('"Load more" button', '%g_textdomain%')}
-				noUseToggle
-			/>
-		</>
-	);
-};

package/blocks/init/src/Blocks/custom/featured-content/featured-content-block.js

@@ -1,13 +0,0 @@
-import { FeaturedContentEditor } from './components/featured-content-editor';
-import { FeaturedContentOptions } from './components/featured-content-options';
-import { GutenbergBlock } from '@eightshift/frontend-libs-tailwind/scripts';
-
-export const FeaturedContent = (props) => {
-	return (
-		<GutenbergBlock
-			{...props}
-			options={FeaturedContentOptions}
-			editor={FeaturedContentEditor}
-		/>
-	);
-};

package/blocks/init/src/Blocks/custom/featured-content/featured-content.php

@@ -1,139 +0,0 @@
-<?php
-
-/**
- * Featured content block template.
- *
- * @package %g_namespace%
- */
-
-use %g_namespace_vendor_prefix%\EightshiftLibs\Helpers\Helpers;
-
-$manifest = Helpers::getManifestByDir(__DIR__);
-
-$blockName = $attributes['blockName'] ?? '';
-
-$featuredContentPostType = Helpers::checkAttr('featuredContentPostType', $attributes, $manifest);
-$featuredContentTaxonomy = Helpers::checkAttr('featuredContentTaxonomy', $attributes, $manifest);
-$featuredContentTerms = Helpers::checkAttr('featuredContentTerms', $attributes, $manifest);
-$featuredContentPosts = Helpers::checkAttr('featuredContentPosts', $attributes, $manifest);
-$featuredContentExcludeCurrentPost = Helpers::checkAttr('featuredContentExcludeCurrentPost', $attributes, $manifest);
-$featuredContentUseCurrentTerm = Helpers::checkAttr('featuredContentUseCurrentTerm', $attributes, $manifest);
-$featuredContentRandomOrder = Helpers::checkAttr('featuredContentRandomOrder', $attributes, $manifest);
-$featuredContentLoadMoreUse = Helpers::checkAttr('featuredContentLoadMoreUse', $attributes, $manifest);
-$featuredContentPerPage = Helpers::checkAttr('featuredContentPerPage', $attributes, $manifest);
-
-$featuredContentServerSideRender = Helpers::checkAttr('featuredContentServerSideRender', $attributes, $manifest);
-
-if (!empty($featuredContentPostType)) {
-	$featuredContentPostType = $featuredContentPostType['value'];
-}
-
-if (!empty($featuredContentTaxonomy)) {
-	$featuredContentTaxonomy = $featuredContentTaxonomy['value'];
-}
-
-global $post;
-
-$args = [
-	'post_type' => $featuredContentPostType,
-	'posts_per_page' => $featuredContentPerPage,
-	'fields' => 'ids',
-	'order' => 'ASC',
-];
-
-// phpcs:ignore WordPress.Security.NonceVerification.Recommended
-if (isset($_GET['current-page'])) {
-	// phpcs:ignore WordPress.Security.NonceVerification.Recommended
-	$skipToPage = sanitize_text_field(wp_unslash($_GET['current-page']));
-
-	$args['posts_per_page'] = $featuredContentPerPage * $skipToPage;
-}
-
-if ($featuredContentTaxonomy) {
-	$args['tax_query'][0] = [
-		'taxonomy' => $featuredContentTaxonomy,
-		'field' => 'id',
-	];
-
-	if ($featuredContentTerms) {
-		$args['tax_query'][0]['terms'] = array_map(fn ($item) => $item['value'], (array) $featuredContentTerms);
-	} elseif ($featuredContentUseCurrentTerm && $post instanceof WP_Post) {
-		$currentTerms = get_the_terms($post->ID, strval($featuredContentTaxonomy));
-
-		if ($currentTerms) {
-			$args['tax_query'][0]['terms'] = wp_list_pluck($currentTerms, 'term_id');
-		}
-	} else {
-		// phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query
-		$args['tax_query'][0]['operator'] = 'NOT IN';
-	}
-}
-
-$excludeList = [];
-
-if ($featuredContentExcludeCurrentPost && $post instanceof WP_Post) {
-	$excludeList[] = $post->ID;
-}
-
-if ($excludeList) {
-	$args['post__not_in'] = $excludeList;
-}
-
-if ($featuredContentPosts) {
-	$args['post__in'] = array_map(fn($item) => $item['value'], (array)$featuredContentPosts);
-	$args['orderby'] = 'post__in';
-}
-
-if ($featuredContentRandomOrder) {
-	$args['orderby'] = 'rand';
-}
-
-$mainQuery = new WP_Query($args);
-
-if (!$mainQuery->have_posts()) {
-	return;
-}
-
-wp_reset_postdata();
-
-$unique = Helpers::getUnique();
-$loadMoreId = "{$blockName}-{$unique}";
-
-$args['posts_per_page'] = $featuredContentPerPage;
-?>
-
-<div>
-	<div
-		id="<?php echo esc_attr($loadMoreId); ?>"
-		class="<?php echo esc_attr(Helpers::tailwindClasses('base', $attributes, $manifest)); ?>"
-		aria-live="polite"
-	>
-		<?php
-		echo Helpers::render(
-			'cards',
-			[
-				'items' => $mainQuery->posts,
-			],
-			'blocks',
-			false,
-			"{$blockName}/partials"
-		);
-		?>
-	</div>
-
-	<?php
-	// phpcs:ignore Squiz.NamingConventions.ValidVariableName.MemberNotCamelCaps
-	if (!$featuredContentServerSideRender && $mainQuery->max_num_pages > 1) { ?>
-		<div class="<?php echo esc_attr(Helpers::tailwindClasses('loadMoreContainer', $attributes, $manifest)); ?>">
-			<?php
-			echo Helpers::render('load-more', Helpers::props('loadMore', $attributes, [
-				'loadMoreInitialItems' => wp_json_encode($mainQuery->posts),
-				'loadMoreQuery' => wp_json_encode($args),
-				'loadMoreId' => $loadMoreId,
-				'loadMoreType' => $blockName,
-				'loadMorePage' => $skipToPage ?? 1,
-			]));
-			?>
-		</div>
-	<?php } ?>
-</div>

package/blocks/init/src/Blocks/custom/featured-content/manifest.json

@@ -1,131 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
-	"blockName": "featured-content",
-	"title": "Featured content",
-	"description": "Display posts with an option for dynamic loading and taxonomy filtering.",
-	"category": "eightshift",
-	"icon": {
-		"src": "es-featured-posts"
-	},
-	"keywords": [
-		"featured",
-		"posts",
-		"content"
-	],
-	"attributes": {
-		"featuredContentPostType": {
-			"type": "object",
-			"default": {
-				"label": "Post",
-				"value": "post",
-				"api": "posts",
-				"taxonomies": [
-					"category"
-				]
-			}
-		},
-		"featuredContentTaxonomy": {
-			"type": "object"
-		},
-		"featuredContentTerms": {
-			"type": "array"
-		},
-		"featuredContentPosts": {
-			"type": "array"
-		},
-		"featuredContentUseCurrentTerm": {
-			"type": "boolean",
-			"default": false
-		},
-		"featuredContentExcludeCurrentPost": {
-			"type": "boolean",
-			"default": false
-		},
-		"featuredContentServerSideRender": {
-			"type": "boolean",
-			"default": false
-		},
-		"featuredContentRandomOrder": {
-			"type": "boolean",
-			"default": false
-		},
-		"featuredContentLayout": {
-			"type": "string",
-			"default": "threeCols"
-		},
-		"featuredContentPerPage": {
-			"type": "integer",
-			"default": 6
-		}
-	},
-	"components": {
-		"loadMore": "loadMore"
-	},
-	"options": {
-		"featuredContentPostType": [
-			{
-				"label": "Post",
-				"value": "post",
-				"api": "posts",
-				"taxonomies": [
-					"category"
-				]
-			},
-			{
-				"label": "Page",
-				"value": "page",
-				"api": "pages"
-			}
-		],
-		"featuredContentTaxonomy": [
-			{
-				"label": "Category",
-				"value": "category",
-				"api": "categories"
-			}
-		],
-		"featuredContentLayout": [
-			{
-				"label": "2 columns",
-				"value": "twoCols",
-				"endIcon": "twoColumns"
-			},
-			{
-				"label": "3 columns",
-				"value": "threeCols",
-				"endIcon": "columns"
-			},
-			{
-				"label": "4 columns",
-				"value": "fourCols",
-				"endIcon": "fourColumns",
-				"separator": "below"
-			},
-			{
-				"label": "Auto columns",
-				"value": "auto",
-				"endIcon": "gridAutoCols"
-			}
-		]
-	},
-	"tailwind": {
-		"base": {
-			"twClasses": "grid gap-6"
-		},
-		"parts": {
-			"loadMoreContainer": {
-				"twClasses": "flex justify-center w-full mt-6"
-			}
-		},
-		"options": {
-			"featuredContentLayout": {
-				"twClasses": {
-					"twoCols": "grid-cols-1 sm:grid-cols-2",
-					"threeCols": "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
-					"fourCols": "grid-cols-1 sm:grid-cols-2 md:grid-cols-4",
-					"auto": "grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(20rem,1fr))]"
-				}
-			}
-		}
-	}
-}

package/blocks/init/src/Blocks/custom/featured-content/partials/cards.php

@@ -1,39 +0,0 @@
-<?php
-
-/**
- * Template for the Featured Content view - Card content map from ID.
- *
- * @package %g_namespace%
- */
-
-$items = $attributes['items'] ?? [];
-$hasEnterAnimation = $attributes['hasEnterAnimation'] ?? false;
-
-$output = [];
-
-if (!$items) {
-	return $output;
-}
-
-foreach ($items as $item) {
-	$featuredImage = get_the_post_thumbnail_url($item, 'full');
-	?>
-	<a
-		href="<?php echo esc_attr(get_the_permalink($item)); ?>"
-		class="group rounded-xl relative overflow-hidden w-full aspect-[0.875] bg-gradient-to-b from-gray-100 to-white shadow-md hover:shadow-lg transition duration-500 hover:duration-1000 border border-gray-200 <?php echo $hasEnterAnimation ? 'animate-in zoom-in-110 fade-in' : ''; ?>"
-	>
-		<?php if (!empty($featuredImage)) { ?>
-			<img class="absolute inset-0 !size-full object-cover group-hover:scale-105 origin-bottom transition-transform duration-500 group-hover:duration-1000 pointer-events-none select-none" src="<?php echo esc_url($featuredImage); ?>" alt="" loading="lazy">
-			<div class="absolute inset-0 backdrop-blur [mask-image:_linear-gradient(to_bottom,_transparent_5%,_black_50%)]"></div>
-			<div class="absolute inset-0 backdrop-blur-lg [mask-image:_linear-gradient(to_bottom,_transparent_20%,_black_100%)]"></div>
-			<div class="absolute inset-0 backdrop-blur-3xl [mask-image:_linear-gradient(to_bottom,_transparent_85%,_black_100%)]"></div>
-			<div class="absolute inset-0 backdrop-saturate-[125%] backdrop-brightness-105"></div>
-			<div class="absolute inset-0 bg-black/50 [&+div]:text-white [mask-image:_linear-gradient(to_bottom,_transparent_25%,_black_80%)]"></div>
-		<?php } ?>
-		<div class="flex flex-col justify-end p-6 absolute inset-0 group-hover:scale-[1.025] origin-bottom-left transition-transform duration-500 group-hover:duration-1000">
-			<p class="text-xs opacity-45 uppercase mb-0.5"><?php echo get_the_date('', $item); ?></p>
-			<p class="~sm/md:~text-lg/3xl !leading-tight font-display line-clamp-3 text-balance"><?php echo esc_html(get_the_title($item)); ?></p>
-		</div>
-	</a>
-	<?php
-}

package/blocks/init/src/Blocks/custom/group/components/group-editor.js

@@ -1,6 +0,0 @@
-import { InnerBlocks } from '@wordpress/block-editor';
-import { BlockInserter } from '@eightshift/frontend-libs-tailwind/scripts';
-
-export const GroupEditor = ({ clientId }) => {
-	return <InnerBlocks renderAppender={() => <BlockInserter clientId={clientId} />} />;
-};

package/blocks/init/src/Blocks/custom/group/group-block.js

@@ -1,14 +0,0 @@
-import { useSelect } from '@wordpress/data';
-import { overrideInnerBlockAttributes } from '@eightshift/frontend-libs-tailwind/scripts/editor';
-import { GroupEditor } from './components/group-editor';
-
-export const Group = (props) => {
-	useSelect((select) => {
-		overrideInnerBlockAttributes(select, props.clientId, {
-			wrapperNoWidthControls: true,
-			wrapperWidth: 'none',
-		});
-	});
-
-	return <GroupEditor {...props} />;
-};

package/blocks/init/src/Blocks/custom/group/group.php

@@ -1,10 +0,0 @@
-<?php
-
-/**
- * Template for the Group block.
- *
- * @package %g_namespace%
- */
-
-// phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
-echo $renderContent;

package/blocks/init/src/Blocks/custom/group/manifest.json

@@ -1,32 +0,0 @@
-{
-	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs-tailwind/main/schemas/block.json",
-	"blockName": "group",
-	"title": "Group",
-	"description" : "Group similar content together.",
-	"category": "eightshift",
-	"icon": {
-		"src": "es-group"
-	},
-	"keywords": [
-		"container",
-		"section",
-		"group"
-	],
-	"example": {
-		"innerBlocks": [
-			{
-				"name": "eightshift-boilerplate/heading",
-				"attributes": {
-					"headingHeadingContent": "Lorem ipsum dolor sit amet"
-				}
-			},
-			{
-				"name": "eightshift-boilerplate/paragraph",
-				"attributes": {
-					"paragraphParagraphContent": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam aliquam est id semper aliquet. Aenean accumsan lacus justo, a lacinia turpis semper condimentum. "
-				}
-			}
-		]
-	},
-	"hasInnerBlocks": true
-}

package/blocks/init/src/Blocks/custom/heading/components/heading-editor.js

@@ -1,15 +0,0 @@
-import React, { useMemo } from 'react';
-import { tailwindClasses, props } from '@eightshift/frontend-libs-tailwind/scripts';
-import { HeadingEditor as EditorComponent } from '../../../components/heading/components/heading-editor';
-import manifest from './../manifest.json';
-
-export const HeadingEditor = ({ attributes, setAttributes }) => {
-	return (
-		<EditorComponent
-			{...props('heading', attributes, {
-				setAttributes,
-			})}
-			additionalClass={tailwindClasses(attributes, manifest)}
-		/>
-	);
-};