67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
import * as React from 'react';
|
|
import PostHoverPreview from './PostHoverPreview';
|
|
import {
|
|
anchorClassNamesForVisualStyle,
|
|
iconClassNamesForSize,
|
|
} from '../utils/hoverPreviewUtils';
|
|
|
|
interface PostHoverPreviewWrapperProps {
|
|
visualStyle: 'sky-link' | 'description-section-link';
|
|
linkText: string;
|
|
postTitle: string;
|
|
postPath: string;
|
|
postThumbnailPath: string;
|
|
postThumbnailAlt: string;
|
|
postDomainIcon?: string;
|
|
creatorName?: string;
|
|
creatorAvatarPath?: string;
|
|
}
|
|
|
|
export const PostHoverPreviewWrapper: React.FC<
|
|
PostHoverPreviewWrapperProps
|
|
> = ({
|
|
visualStyle,
|
|
linkText,
|
|
postTitle,
|
|
postPath,
|
|
postThumbnailPath,
|
|
postThumbnailAlt,
|
|
postDomainIcon,
|
|
creatorName,
|
|
creatorAvatarPath,
|
|
}) => {
|
|
return (
|
|
<PostHoverPreview
|
|
postTitle={postTitle}
|
|
postThumbnailPath={postThumbnailPath}
|
|
postThumbnailAlt={postThumbnailAlt}
|
|
postDomainIcon={postDomainIcon}
|
|
creatorName={creatorName}
|
|
creatorAvatarPath={creatorAvatarPath}
|
|
>
|
|
<a
|
|
href={postPath}
|
|
className={anchorClassNamesForVisualStyle(visualStyle, true)}
|
|
>
|
|
{postDomainIcon && (
|
|
<img
|
|
src={postDomainIcon}
|
|
alt={postThumbnailAlt}
|
|
className={iconClassNamesForSize('small')}
|
|
/>
|
|
)}
|
|
{visualStyle === 'description-section-link' && (
|
|
<img
|
|
src={postDomainIcon}
|
|
alt={postTitle}
|
|
className={iconClassNamesForSize('small')}
|
|
/>
|
|
)}
|
|
<span className="truncate">{linkText}</span>
|
|
</a>
|
|
</PostHoverPreview>
|
|
);
|
|
};
|
|
|
|
export default PostHoverPreviewWrapper;
|