@automattic/social-previews 2.1.0-beta.8 → 3.0.0

package/src/nextdoor-preview/footer-actions.tsx

@@ -1,23 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { CommentIcon } from './icons/comment-icon';
-import { LikeIcon } from './icons/like-icon';
-import { ShareIcon } from './icons/share-icon';
-
-export function FooterActions() {
-	return (
-		<div className="nextdoor-preview__footer--actions">
-			<div className="nextdoor-preview__footer--actions-item">
-				<LikeIcon />
-				<span>{ __( 'Like', 'social-previews' ) }</span>
-			</div>
-			<div className="nextdoor-preview__footer--actions-item">
-				<CommentIcon />
-				<span>{ __( 'Comment', 'social-previews' ) }</span>
-			</div>
-			<div className="nextdoor-preview__footer--actions-item">
-				<ShareIcon />
-				<span>{ __( 'Share', 'social-previews' ) }</span>
-			</div>
-		</div>
-	);
-}

package/src/nextdoor-preview/icons/chevron-icon.tsx

@@ -1,11 +0,0 @@
-export function ChevronIcon() {
-	return (
-		<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
-			<path
-				fill="#dfe1e4"
-				fillRule="evenodd"
-				d="M7.127 13.876a.732.732 0 1 0 1.035 1.035l4.75-4.749a.732.732 0 0 0 0-1.035L8.123 4.34A.732.732 0 0 0 7.09 5.375l4.27 4.27-4.232 4.23Z"
-			></path>
-		</svg>
-	);
-}

package/src/nextdoor-preview/icons/comment-icon.tsx

@@ -1,12 +0,0 @@
-export function CommentIcon() {
-	return (
-		<svg width="20" height="20" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-			<path
-				fill="currentColor"
-				fillRule="evenodd"
-				d="M2 10.031C2 5.596 5.574 2 10 2h4c4.427 0 8 3.596 8 8.031 0 4.435-3.573 8.031-8 8.031h-1.52a17.033 17.033 0 0 1-1.377 1.467c-.991.938-2.456 2.079-4.086 2.437a1.403 1.403 0 0 1-1.458-.565 1.55 1.55 0 0 1-.195-1.394c.28-.823.395-1.734.434-2.464.014-.257.018-.485.018-.672A8.017 8.017 0 0 1 2 10.031Zm5.798 6.178a7.02 7.02 0 0 1 .016.418c.005.252.004.606-.019 1.023-.03.573-.103 1.285-.266 2.024.775-.377 1.54-.974 2.202-1.598a15.066 15.066 0 0 0 1.448-1.586l.017-.022.003-.004a1 1 0 0 1 .801-.402h2c3.314 0 6-2.692 6-6.03C20 6.691 17.314 4 14 4h-4c-3.314 0-6 2.692-6 6.031 0 2.336 1.32 4.36 3.258 5.359.308.159.515.474.54.82Z"
-				clipRule="evenodd"
-			></path>
-		</svg>
-	);
-}

package/src/nextdoor-preview/icons/default-avatar.tsx

@@ -1,3 +0,0 @@
-export const DefaultAvatar: React.FC = () => {
-	return <div className="nextdoor-preview__default-avatar">A</div>;
-};

package/src/nextdoor-preview/icons/default-image.tsx

@@ -1,23 +0,0 @@
-export function DefaultImage() {
-	return (
-		<div className="nextdoor-preview__default-image">
-			<svg
-				width="24"
-				height="24"
-				fill="none"
-				viewBox="0 0 24 24"
-				aria-hidden="true"
-				color="#055c00"
-			>
-				<path
-					fill="currentColor"
-					d="M13.207 5.207c1.51-1.51 4.076-1.51 5.586 0 1.51 1.51 1.51 4.076 0 5.586l-2.1 2.1c-1.51 1.51-4.077 1.51-5.586 0a1 1 0 1 0-1.414 1.414c2.29 2.29 6.123 2.29 8.414 0l2.1-2.1c2.29-2.29 2.29-6.124 0-8.414s-6.124-2.29-8.414 0l-.7.7a1 1 0 0 0 1.414 1.414l.7-.7Z"
-				></path>
-				<path
-					fill="currentColor"
-					d="M7.307 11.107c1.51-1.51 4.076-1.51 5.586 0a1 1 0 0 0 1.414-1.414c-2.29-2.29-6.124-2.29-8.414 0l-2.1 2.1c-2.29 2.29-2.29 6.123 0 8.414 2.29 2.29 6.124 2.29 8.414 0l.7-.7a1 1 0 0 0-1.414-1.414l-.7.7c-1.51 1.51-4.076 1.51-5.586 0-1.51-1.51-1.51-4.076 0-5.586l2.1-2.1Z"
-				></path>
-			</svg>
-		</div>
-	);
-}

package/src/nextdoor-preview/icons/globe-icon.tsx

@@ -1,12 +0,0 @@
-export function GlobeIcon() {
-	return (
-		<svg width="14" height="14" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-			<path
-				fill="currentColor"
-				fillRule="evenodd"
-				d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.495-7.643c.286-.335.46-.357.505-.357.045 0 .219.022.505.357.282.33.581.868.852 1.619.464 1.283.79 3.034.872 5.024H9.771c.082-1.99.408-3.741.871-5.024.272-.751.571-1.289.854-1.62ZM7.77 11c.084-2.181.439-4.171.992-5.704.093-.255.192-.502.298-.738A8.009 8.009 0 0 0 4.062 11h3.707Zm-3.707 2h3.707c.084 2.181.439 4.171.992 5.704.093.255.192.502.298.738A8.009 8.009 0 0 1 4.062 13Zm15.876-2a8.009 8.009 0 0 0-4.997-6.442c.106.236.205.483.298.738.553 1.533.908 3.523.992 5.704h3.707Zm-3.707 2h3.707a8.009 8.009 0 0 1-4.997 6.442c.106-.236.205-.483.298-.738.553-1.533.908-3.523.992-5.704Zm-2.002 0c-.082 1.99-.408 3.741-.871 5.024-.272.751-.571 1.289-.854 1.62-.285.334-.46.356-.504.356-.045 0-.219-.022-.505-.357-.282-.33-.581-.868-.852-1.619-.464-1.283-.79-3.034-.872-5.024h4.458Z"
-				clipRule="evenodd"
-			></path>
-		</svg>
-	);
-}

package/src/nextdoor-preview/icons/like-icon.tsx

@@ -1,12 +0,0 @@
-export function LikeIcon() {
-	return (
-		<svg width="20" height="20" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-			<path
-				fill="currentColor"
-				fillRule="evenodd"
-				d="M13.275 8.752a1.5 1.5 0 0 1-2.55 0C9.75 7.18 8.719 5.617 6.565 6.074 5.248 6.352 4 7.433 4 9.644c0 2.153 1.348 4.592 4.259 7.236A28.475 28.475 0 0 0 12 19.74a28.475 28.475 0 0 0 3.741-2.86C18.651 14.236 20 11.797 20 9.643c0-2.21-1.25-3.29-2.564-3.57-2.155-.456-3.187 1.106-4.16 2.68Zm-2.581-3.48C7.634 2.58 2 4.217 2 9.643c0 2.996 1.85 5.934 4.914 8.717 1.478 1.343 3.1 2.585 4.839 3.575a.5.5 0 0 0 .494 0c1.739-.99 3.361-2.232 4.84-3.575C20.148 15.577 22 12.64 22 9.643c0-5.426-5.634-7.062-8.694-4.371A5.287 5.287 0 0 0 12 7.04a5.287 5.287 0 0 0-1.306-1.77Z"
-				clipRule="evenodd"
-			></path>
-		</svg>
-	);
-}

package/src/nextdoor-preview/icons/share-icon.tsx

@@ -1,12 +0,0 @@
-export function ShareIcon() {
-	return (
-		<svg width="20" height="20" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-			<path
-				fill="currentColor"
-				fillRule="evenodd"
-				d="M11.617 2.076a1 1 0 0 1 1.09.217l9 9a1 1 0 0 1 0 1.414l-9 9A1 1 0 0 1 11 21v-4.436c-2.849.366-5.261 2.271-6.384 4.837a1 1 0 0 1-1.856-.06C2.338 20.182 2 18.86 2 17.5a9.959 9.959 0 0 1 9-9.951V3a1 1 0 0 1 .617-.924ZM13 5.414V8.5a1 1 0 0 1-1 1c-4.448 0-8 3.552-8 8 0 .31.023.625.066.94C5.905 16.067 8.776 14.5 12 14.5a1 1 0 0 1 1 1v3.086L19.586 12 13 5.414Z"
-				clipRule="evenodd"
-			></path>
-		</svg>
-	);
-}

package/src/nextdoor-preview/index.tsx

@@ -1,3 +0,0 @@
-export * from './link-preview';
-export * from './post-preview';
-export * from './previews';

package/src/nextdoor-preview/link-preview.tsx

@@ -1,22 +0,0 @@
-import { getTitleFromDescription } from '../helpers';
-import { NextdoorPostPreview } from './post-preview';
-import { NextdoorPreviewProps } from './types';
-
-type OptionalProps = Partial< Pick< NextdoorPreviewProps, 'name' | 'profileImage' > >;
-
-export type NextdoorLinkPreviewProps = Omit< NextdoorPreviewProps, keyof OptionalProps > &
-	OptionalProps;
-
-export function NextdoorLinkPreview( props: NextdoorLinkPreviewProps ) {
-	return (
-		<NextdoorPostPreview
-			name=""
-			profileImage=""
-			{ ...props }
-			// Override the props that are irrelevant to link preview
-			description=""
-			media={ undefined }
-			title={ props.title || getTitleFromDescription( props.description ) }
-		/>
-	);
-}

package/src/nextdoor-preview/post-preview.tsx

@@ -1,117 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import clsx from 'clsx';
-import {
-	baseDomain,
-	formatNextdoorDate,
-	getTitleFromDescription,
-	preparePreviewText,
-} from '../helpers';
-import { FEED_TEXT_MAX_LENGTH, FEED_TEXT_MAX_LINES } from './constants';
-import { FooterActions } from './footer-actions';
-import { ChevronIcon } from './icons/chevron-icon';
-import { DefaultAvatar } from './icons/default-avatar';
-import { DefaultImage } from './icons/default-image';
-import { GlobeIcon } from './icons/globe-icon';
-import { NextdoorPreviewProps } from './types';
-
-import './style.scss';
-
-export function NextdoorPostPreview( {
-	image,
-	name,
-	profileImage,
-	description,
-	neighborhood,
-	media,
-	title,
-	url,
-}: NextdoorPreviewProps ) {
-	const hasMedia = !! media?.length;
-
-	return (
-		<div className="nextdoor-preview__wrapper">
-			<section className={ `nextdoor-preview__container ${ hasMedia ? 'has-media' : '' }` }>
-				<div className="nextdoor-preview__content">
-					<div className="nextdoor-preview__header">
-						<div className="nextdoor-preview__header--avatar">
-							{ profileImage ? <img src={ profileImage } alt="" /> : <DefaultAvatar /> }
-						</div>
-						<div className="nextdoor-preview__header--details">
-							<div className="nextdoor-preview__header--name">
-								{ name || __( 'Account Name', 'social-previews' ) }
-							</div>
-							<div className="nextdoor-preview__header--meta">
-								<span>{ neighborhood || __( 'Neighborhood', 'social-previews' ) }</span>
-								<span>•</span>
-								<span>{ formatNextdoorDate( Date.now() ) }</span>
-								<span>•</span>
-								{ /* This is the Globe SVG that represents visibility to be "public" */ }
-								<GlobeIcon />
-							</div>
-						</div>
-					</div>
-					<div className="nextdoor-preview__body">
-						{ description ? (
-							<div className="nextdoor-preview__caption">
-								{ preparePreviewText( description, {
-									platform: 'nextdoor',
-									maxChars: FEED_TEXT_MAX_LENGTH,
-									maxLines: FEED_TEXT_MAX_LINES,
-								} ) }
-							</div>
-						) : null }
-						{ hasMedia ? (
-							<div className="nextdoor-preview__media">
-								{ media.map( ( mediaItem, index ) => {
-									return (
-										<div
-											key={ `nextdoor-preview__media-item-${ index }` }
-											className="nextdoor-preview__media-item"
-										>
-											{ mediaItem?.type?.startsWith( 'video/' ) ? (
-												// eslint-disable-next-line jsx-a11y/media-has-caption
-												<video controls>
-													<source src={ mediaItem.url } type={ mediaItem.type } />
-												</video>
-											) : (
-												<img alt={ mediaItem.alt || '' } src={ mediaItem.url } />
-											) }
-										</div>
-									);
-								} ) }
-							</div>
-						) : null }
-
-						<article
-							className={ clsx( 'nextdoor-preview__card', {
-								'small-preview': ! image || hasMedia,
-							} ) }
-						>
-							{ image ? (
-								<img className="nextdoor-preview__image" src={ image } alt="" />
-							) : (
-								<DefaultImage />
-							) }
-							{ url ? (
-								<div className="nextdoor-preview__description">
-									<h2 className="nextdoor-preview__description--title">
-										{ title || getTitleFromDescription( description ) }
-									</h2>
-									<span className="nextdoor-preview__description--url">{ baseDomain( url ) }</span>
-								</div>
-							) : null }
-							{ hasMedia ? (
-								<div className="nextdoor-preview__card--chevron-wrapper">
-									<ChevronIcon />
-								</div>
-							) : null }
-						</article>
-					</div>
-					<div className="nextdoor-preview__footer">
-						<FooterActions />
-					</div>
-				</div>
-			</section>
-		</div>
-	);
-}

package/src/nextdoor-preview/previews.tsx

@@ -1,53 +0,0 @@
-import { ExternalLink } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import SectionHeading from '../shared/section-heading';
-import { NextdoorLinkPreview } from './link-preview';
-import { NextdoorPostPreview } from './post-preview';
-import type { NextdoorPreviewsProps } from './types';
-
-export const NextdoorPreviews: React.FC< NextdoorPreviewsProps > = ( {
-	headingLevel,
-	hideLinkPreview,
-	hidePostPreview,
-	...props
-} ) => {
-	return (
-		<div className="social-preview nextdoor-preview">
-			{ ! hidePostPreview && (
-				<section className="social-preview__section nextdoor-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a social post on Nextdoor
-							__( 'Your post', 'social-previews' )
-						}
-					</SectionHeading>
-					<p className="social-preview__section-desc">
-						{ __( 'This is what your social post will look like on Nextdoor:', 'social-previews' ) }
-					</p>
-					<NextdoorPostPreview { ...props } />
-				</section>
-			) }
-			{ ! hideLinkPreview && (
-				<section className="social-preview__section nextdoor-preview__section">
-					<SectionHeading level={ headingLevel }>
-						{
-							// translators: refers to a link to a Nextdoor post
-							__( 'Link preview', 'social-previews' )
-						}
-					</SectionHeading>
-					<p className="social-preview__section-desc">
-						{ __(
-							'This is what it will look like when someone shares the link to your WordPress post on Nextdoor.',
-							'social-previews'
-						) }
-						&nbsp;
-						<ExternalLink href="https://jetpack.com/support/jetpack-social-image-generator">
-							{ __( 'Learn more about links', 'social-previews' ) }
-						</ExternalLink>
-					</p>
-					<NextdoorLinkPreview { ...props } name="" profileImage="" />
-				</section>
-			) }
-		</div>
-	);
-};

package/src/nextdoor-preview/style.scss

@@ -1,211 +0,0 @@
-.nextdoor-preview {
-	&__wrapper {
-		max-width: clamp(200px, 100%, 600px);
-	}
-
-	// When the preview is in a section of all previews
-	&__section &__wrapper {
-		padding: 0;
-	}
-
-	&__section.social-preview__section {
-		width: clamp(200px, 100%, 600px);
-	}
-
-	&__container {
-
-		box-shadow: rgba(0, 0, 0, 0.1) 0 0 8px;
-		/* stylelint-disable-next-line scales/radii */
-		border-radius: 8px;
-		overflow: hidden;
-		background-color: #fff;
-
-		&.small-preview {
-			// When the preview has media, we want to hide the border radius on the bottom
-			border-end-end-radius: 0;
-			border-end-start-radius: 0;
-		}
-	}
-
-	&__header {
-		display: flex;
-		gap: 0.5rem;
-		margin-bottom: 8px;
-		align-items: center;
-
-		&--avatar {
-			width: 40px;
-			height: 40px;
-			border-radius: 50%;
-			overflow: hidden;
-			display: flex;
-			align-items: center;
-			flex-shrink: 0;
-		}
-
-		&--avatar img {
-			width: 100%;
-			object-fit: contain;
-		}
-
-		&--details {
-			display: flex;
-			flex-direction: column;
-		}
-
-		&--name {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			font-weight: 600;
-			font-size: 1rem;
-			line-height: 20px;
-			letter-spacing: -0.32px;
-		}
-
-		&--meta {
-			display: flex;
-			align-items: center;
-			gap: 0.25rem;
-			color: #666;
-			letter-spacing: -0.32px;
-			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-			font-size: 14px;
-			line-height: 19px;
-			white-space: pre-wrap;
-		}
-	}
-
-	&__footer {
-		margin-top: 24px;
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-end;
-
-		&--actions {
-			display: flex;
-			align-items: center;
-			gap: 1rem;
-		}
-
-		&--actions-item {
-			display: flex;
-			align-items: center;
-			gap: 0.25rem;
-			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-			font-size: 13px;
-			font-weight: 600;
-			line-height: 16px;
-		}
-	}
-
-	&__content {
-		padding: 12px 16px;
-	}
-
-	&__card {
-		/* stylelint-disable-next-line scales/radii */
-		border-radius: 16px;
-		box-shadow: rgba(0, 0, 0, 0.08) 0 1px 4px 0, rgba(0, 0, 0, 0.2) 0 0 2px 0;
-		display: flex;
-		flex-direction: column;
-		margin-top: 12px;
-		overflow: hidden;
-
-		&.small-preview {
-			flex-direction: row;
-			align-items: center;
-		}
-
-		&--chevron-wrapper {
-			width: 40px;
-			min-width: 40px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-
-	&__caption {
-		margin-bottom: 20px;
-		font-size: 1rem;
-		line-height: 20px;
-		font-weight: 400;
-	}
-
-	&__media-item {
-		display: flex;
-
-		img,
-		video {
-			width: 100%;
-			object-fit: cover;
-		}
-	}
-
-	&__description {
-		padding: 16px;
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-
-		.small-preview & {
-			padding: 10px;
-			flex-grow: 1;
-		}
-
-		&--title {
-			margin: 0;
-			font-weight: 600;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-			font-size: 15px;
-			line-height: 20px;
-		}
-
-		&--url {
-			/* stylelint-disable-next-line declaration-property-unit-allowed-list */
-			font-size: 13px;
-			color: #666;
-		}
-	}
-
-	&__media {
-		// compensate for the content padding
-		margin-inline: -16px;
-	}
-
-	&__image {
-		object-fit: cover;
-		width: 100%;
-		aspect-ratio: 16/9;
-
-		.small-preview & {
-			width: 62px;
-			height: 62px;
-		}
-	}
-
-	&__default-avatar {
-		width: 40px;
-		height: 40px;
-		border-radius: 50%;
-		background-color: rgb(140 110 99);
-		color: #fff;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		font-size: x-large;
-	}
-
-	&__default-image {
-		background-color: #f1ffca;
-		height: 62px;
-		width: 62px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-}

package/src/nextdoor-preview/types.ts

@@ -1,9 +0,0 @@
-import { SocialPreviewBaseProps, SocialPreviewsBaseProps } from '../types';
-
-export type NextdoorPreviewProps = SocialPreviewBaseProps & {
-	neighborhood?: string;
-	name: string;
-	profileImage: string;
-};
-
-export type NextdoorPreviewsProps = NextdoorPreviewProps & SocialPreviewsBaseProps;

package/src/shared/section-heading/index.tsx

@@ -1,21 +0,0 @@
-const HEADING_LEVELS = [ 2, 3, 4, 5, 6 ] as const;
-
-export type SectionHeadingProps = {
-	className?: string;
-	level?: ( typeof HEADING_LEVELS )[ number ];
-	children?: React.ReactNode;
-};
-
-export const SectionHeading: React.FC< SectionHeadingProps > = ( {
-	className,
-	level,
-	children,
-} ) => {
-	const Tag = `h${ level && HEADING_LEVELS.includes( level ) ? level : 3 }` as const;
-
-	return (
-		<Tag className={ `social-preview__section-heading ${ className ?? '' }` }>{ children }</Tag>
-	);
-};
-
-export default SectionHeading;

package/src/shared.scss

@@ -1,40 +0,0 @@
-$social-preview-text-color: #1e1e1e;
-$social-preview-light-text-color: #757575;
-
-.social-preview {
-	padding: 0 0.5rem;
-}
-
-.social-preview__section {
-	margin-bottom: 2rem;
-	width: clamp(200px, 100%, 680px);
-	margin-inline: auto;
-}
-
-.social-preview__section-heading {
-	margin-top: 0;
-	margin-bottom: 0.375rem;
-
-	color: $social-preview-text-color;
-
-	font-weight: 600;
-	font-size: 0.875rem;
-	line-height: 1.42;
-}
-
-.social-preview__section-desc {
-	margin-top: 0;
-	margin-bottom: 1rem;
-
-	color: $social-preview-light-text-color;
-
-	font-size: 0.75rem;
-	line-height: 1.33;
-
-	.components-external-link {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.25rem;
-	}
-}
-

package/src/threads-preview/card.tsx

@@ -1,22 +0,0 @@
-import clsx from 'clsx';
-import { baseDomain } from '../helpers';
-import { threadsTitle } from './helpers';
-import { ThreadsCardProps } from './types';
-
-export const Card: React.FC< ThreadsCardProps > = ( { image, title, url } ) => {
-	const cardClassNames = clsx( {
-		'threads-preview__card-has-image': !! image,
-	} );
-
-	return (
-		<div className="threads-preview__card">
-			<div className={ cardClassNames }>
-				{ image && <img className="threads-preview__card-image" src={ image } alt="" /> }
-				<div className="threads-preview__card-body">
-					<div className="threads-preview__card-url">{ baseDomain( url || '' ) }</div>
-					<div className="threads-preview__card-title">{ threadsTitle( title ) }</div>
-				</div>
-			</div>
-		</div>
-	);
-};

package/src/threads-preview/footer.tsx

@@ -1,43 +0,0 @@
-export const Footer: React.FC = () => {
-	return (
-		<div className="threads-preview__footer">
-			<span className="threads-preview__icon--like">
-				<svg role="img" viewBox="0 0 18 18">
-					<path
-						d="M1.34375 7.53125L1.34375 7.54043C1.34374 8.04211 1.34372 8.76295 1.6611 9.65585C1.9795 10.5516 2.60026 11.5779 3.77681 12.7544C5.59273 14.5704 7.58105 16.0215 8.33387 16.5497C8.73525 16.8313 9.26573 16.8313 9.66705 16.5496C10.4197 16.0213 12.4074 14.5703 14.2232 12.7544C15.3997 11.5779 16.0205 10.5516 16.3389 9.65585C16.6563 8.76296 16.6563 8.04211 16.6562 7.54043V7.53125C16.6562 5.23466 15.0849 3.25 12.6562 3.25C11.5214 3.25 10.6433 3.78244 9.99228 4.45476C9.59009 4.87012 9.26356 5.3491 9 5.81533C8.73645 5.3491 8.40991 4.87012 8.00772 4.45476C7.35672 3.78244 6.47861 3.25 5.34375 3.25C2.9151 3.25 1.34375 5.23466 1.34375 7.53125Z"
-						strokeWidth="1.25"
-					></path>
-				</svg>
-			</span>
-			<span className="threads-preview__icon--reply">
-				<svg role="img" viewBox="0 0 18 18">
-					<path
-						d="M15.376 13.2177L16.2861 16.7955L12.7106 15.8848C12.6781 15.8848 12.6131 15.8848 12.5806 15.8848C11.3779 16.5678 9.94767 16.8931 8.41995 16.7955C4.94194 16.5353 2.08152 13.7381 1.72397 10.2578C1.2689 5.63919 5.13697 1.76863 9.75264 2.22399C13.2307 2.58177 16.0261 5.41151 16.2861 8.92429C16.4161 10.453 16.0586 11.8841 15.376 13.0876C15.376 13.1526 15.376 13.1852 15.376 13.2177Z"
-						strokeLinejoin="round"
-						strokeWidth="1.25"
-					></path>
-				</svg>
-			</span>
-			<span className="threads-preview__icon--repost">
-				<svg role="img" viewBox="0 0 18 18">
-					<path d="M6.41256 1.23531C6.6349 0.971277 7.02918 0.937481 7.29321 1.15982L9.96509 3.40982C10.1022 3.52528 10.1831 3.69404 10.1873 3.87324C10.1915 4.05243 10.1186 4.2248 9.98706 4.34656L7.31518 6.81971C7.06186 7.05419 6.66643 7.03892 6.43196 6.7856C6.19748 6.53228 6.21275 6.13685 6.46607 5.90237L7.9672 4.51289H5.20312C3.68434 4.51289 2.45312 5.74411 2.45312 7.26289V9.51289V11.7629C2.45312 13.2817 3.68434 14.5129 5.20312 14.5129C5.5483 14.5129 5.82812 14.7927 5.82812 15.1379C5.82812 15.4831 5.5483 15.7629 5.20312 15.7629C2.99399 15.7629 1.20312 13.972 1.20312 11.7629V9.51289V7.26289C1.20312 5.05375 2.99399 3.26289 5.20312 3.26289H7.85002L6.48804 2.11596C6.22401 1.89362 6.19021 1.49934 6.41256 1.23531Z"></path>
-					<path d="M11.5874 17.7904C11.3651 18.0545 10.9708 18.0883 10.7068 17.8659L8.03491 15.6159C7.89781 15.5005 7.81687 15.3317 7.81267 15.1525C7.80847 14.9733 7.8814 14.801 8.01294 14.6792L10.6848 12.206C10.9381 11.9716 11.3336 11.9868 11.568 12.2402C11.8025 12.4935 11.7872 12.8889 11.5339 13.1234L10.0328 14.5129H12.7969C14.3157 14.5129 15.5469 13.2816 15.5469 11.7629V9.51286V7.26286C15.5469 5.74408 14.3157 4.51286 12.7969 4.51286C12.4517 4.51286 12.1719 4.23304 12.1719 3.88786C12.1719 3.54269 12.4517 3.26286 12.7969 3.26286C15.006 3.26286 16.7969 5.05373 16.7969 7.26286V9.51286V11.7629C16.7969 13.972 15.006 15.7629 12.7969 15.7629H10.15L11.512 16.9098C11.776 17.1321 11.8098 17.5264 11.5874 17.7904Z"></path>
-				</svg>
-			</span>
-			<span className="threads-preview__icon--share">
-				<svg role="img" viewBox="0 0 18 18">
-					<path
-						d="M15.6097 4.09082L6.65039 9.11104"
-						strokeLinejoin="round"
-						strokeWidth="1.25"
-					></path>
-					<path
-						d="M7.79128 14.439C8.00463 15.3275 8.11131 15.7718 8.33426 15.932C8.52764 16.071 8.77617 16.1081 9.00173 16.0318C9.26179 15.9438 9.49373 15.5501 9.95761 14.7628L15.5444 5.2809C15.8883 4.69727 16.0603 4.40546 16.0365 4.16566C16.0159 3.95653 15.9071 3.76612 15.7374 3.64215C15.5428 3.5 15.2041 3.5 14.5267 3.5H3.71404C2.81451 3.5 2.36474 3.5 2.15744 3.67754C1.97758 3.83158 1.88253 4.06254 1.90186 4.29856C1.92415 4.57059 2.24363 4.88716 2.88259 5.52032L6.11593 8.7243C6.26394 8.87097 6.33795 8.94431 6.39784 9.02755C6.451 9.10144 6.4958 9.18101 6.53142 9.26479C6.57153 9.35916 6.59586 9.46047 6.64451 9.66309L7.79128 14.439Z"
-						strokeLinejoin="round"
-						strokeWidth="1.25"
-					></path>
-				</svg>
-			</span>
-		</div>
-	);
-};