@spacemade/ui 0.0.1

package/src/components/post/block/PostCardsGrid.tsx

@@ -0,0 +1,56 @@
+import { useRouter } from 'next/router'
+import isEmpty from 'lodash/isEmpty'
+import { Post } from '@store/model'
+import Spinner from '@components/common/loading/Spinner'
+import PostCard from '@components/post/card/PostCard'
+
+const PostCardsGrid = ({
+	posts,
+	isFetching,
+	lastItemElementRef,
+}: {
+	posts: Post[]
+	isFetching: boolean
+	lastItemElementRef?: (node: HTMLDivElement) => void
+}) => {
+	const {
+		query: { name },
+	} = useRouter()
+
+	return (
+		<>
+			<div className='news-cards-grid w-100'>
+				{posts.map((item, key) => {
+					const isLastElement = posts.length === key + 1
+					return (
+						<div
+							key={key}
+							ref={isLastElement ? lastItemElementRef : null}
+							data-type={`${item.entity}`}
+						>
+							<PostCard post={item} />
+						</div>
+					)
+				})}
+			</div>
+
+			{isFetching && (
+				<div className='w-100 d-flex justify-content-center py-4'>
+					<Spinner color='primary' />
+				</div>
+			)}
+
+			{!isFetching && isEmpty(posts) && (
+				<div className='d-flex flex-column align-items-center justify-content-center mt-4'>
+					<p>
+						{name
+							? `There are no posts to show that match your search`
+							: 'There are no posts to show'}
+					</p>
+				</div>
+			)}
+		</>
+	)
+}
+
+export default PostCardsGrid

package/src/components/post/block/PostContent.tsx

@@ -0,0 +1,128 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { useEffect } from 'react'
+import Link from 'next/link'
+import Prism from "prismjs";
+import isEmpty from 'lodash/isEmpty'
+import { Post } from '@store/model'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Badge from '@components/common/badge/Badge'
+import SharerActionBox from '@components/common/button/SharerActionBox'
+import { FullDateFormat } from '@helpers/date'
+
+const PostContent = ({
+	post,
+}: {
+	post: Post
+}) => {
+	useEffect(() => {
+		if (post.content) Prism.highlightAll();
+	}, [post.content]);
+
+	return (
+		<div className='pb-5'>
+			<h1 className='display-5 mb-3'>{post.name}</h1>
+			<div className='d-flex flex-wrap justify-content-between align-items-center mb-4'>
+				<div className='d-flex align-items-center gap-3'>
+					{post?.owner?.profileMedia?.media.sourceUrl && (
+
+						<OptimizedImage
+							src={post.owner.profileMedia.media.sourceUrl}
+							alt={post.owner.profileMedia.media.details?.altText || ''}
+							width={45}
+							height={45}
+							className='rounded-circle object-fit-cover'
+						/>
+					)}
+					<div>
+						<div className='text-medium-gray'>
+							{post?.owner && (
+								<>{post.owner?.firstName} {post.owner?.lastName}</>
+							)}
+							<div className='d-flex align-items-center gap-1'>
+								<span className='d-block'>{FullDateFormat(post.createdAt, 'long')}</span>
+								<span className='bi bi-circle-fill fs-dec-35 mt-1 text-medium-gray ms-2'></span>
+								{post.minutesToRead && (
+									<span className='text-medium-gray ms-2'>
+										{post.minutesToRead} min{post.minutesToRead !== 1 && 's'}
+									</span>
+								)}
+							</div>
+						</div>
+					</div>
+				</div>
+				<div className='d-none d-lg-block'>
+					<SharerActionBox
+						key={post.id}
+						name={post.name}
+						imageUrl={post.featuredMedia?.media.sourceUrl}
+						shareUrl={typeof window !== 'undefined' ? window.location.href : ''}
+						iconSize='lg'
+						isLiked={post.isLikedByUser}
+						entityId={post.id}
+						type='post'
+					/>
+				</div>
+			</div>
+
+			<div className='img-full-width-only-on-mobile mb-4'>
+				{post.featuredMedia?.media.sourceUrl && (
+					<OptimizedImage
+						src={post.featuredMedia.media.sourceUrl}
+						alt={post.featuredMedia.media.details?.altText || ''}
+						width={1010}
+						height={500}
+						className='img-fluid'
+					/>
+				)}
+			</div>
+
+			<h2 className='h5 fw-normal lead text-dark-gray px-auto mb-4'>
+				{post.intro}
+			</h2>
+
+			<div className='ck-content'>
+				{post.content && (
+					<div
+						dangerouslySetInnerHTML={{
+							__html: post.content || '',
+						}}
+					/>
+				)}
+			</div>
+
+			{(!isEmpty(post.categories) || !isEmpty(post.tags)) && (
+				<div className='d-flex flex-wrap gap-2 w-100 mt-5'>
+					{(post.categories || []).map((category, key) => (
+						<Link key={key} href={`/blog/${category.slug}`}>
+							<div>
+								<Badge
+									className='px-3'
+									isOutline
+									bgColor='medium-gray'
+									textColor='medium-gray'
+									label={category.name}
+								/>
+							</div>
+						</Link>
+					))}
+
+					{(post.tags || []).map((tag, key) => (
+						<Link key={key} href={`/tag/${tag.slug}`}>
+							<div>
+								<Badge
+									className='px-3'
+									isOutline
+									bgColor='medium-gray'
+									textColor='medium-gray'
+									label={tag.name}
+								/>
+							</div>
+						</Link>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}
+
+export default PostContent

package/src/components/post/block/PostDetailPage.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable @next/next/no-img-element */
+
+import { useRouter } from 'next/router'
+import {
+	useGetApprovedPostsQuery,
+	useGetOnePostQuery,
+} from '@store/slice/api/postApiSlice'
+import PostContent from '@components/post/block/PostContent'
+import { PostPeopleAlsoReadBlock } from '@components/post/block/PostPeopleAlsoReadBlock'
+import { PostRelatedBlock } from '@components/post/block/PostRelatedCards'
+import { ApiEntityNames } from '@helpers/types'
+import { FeaturedProductCard } from '@components/post/block/FeaturedProductCard'
+import { FeaturedProviderCard } from '@components/post/block/FeaturedProviderCard'
+
+export const PostDetailPage = ({ isPreview }: { isPreview: boolean }) => {
+	const {
+		query: { postSlug },
+	} = useRouter()
+
+	const isLoggedIn = Boolean(isPreview)
+
+	const { data: post } = useGetOnePostQuery(
+		{
+			slug: postSlug?.toString() as string,
+			getForAccount: isPreview,
+			entities: [
+				ApiEntityNames.post_category,
+				ApiEntityNames.owner,
+				ApiEntityNames.tags,
+				ApiEntityNames.product,
+				ApiEntityNames.provider,
+			],
+			cookie: '',
+		},
+		{ skip: !postSlug }
+	)
+
+	const { data: skipPosts } = useGetApprovedPostsQuery({
+		limit: 3,
+		tagIds: post?.tags?.map((tag) => tag.id),
+		getForTagOnly: false,
+	})
+
+	return (
+		<>
+			<div className='container mt-4'>
+				<div className='row mx-auto g-0'>
+					<div className='col-md-8 pe-md-4'>
+						{post && (
+							<>
+								<PostContent
+									key={post.id}
+									post={post}
+								/>
+							</>
+						)}
+					</div>
+					<div className='col-md-4 border-md-start ps-md-4'>
+						<div>
+							<PostRelatedBlock
+								title='Popular Posts'
+								getForTagOnly={false}
+								tagIds={post?.tags?.map((tag) => tag.id)}
+								skipPost={post}
+							/>
+
+							{(post as any)?.provider && (
+								<FeaturedProviderCard provider={(post as any).provider} />
+							)}
+
+							{post?.product && (
+								<FeaturedProductCard
+									product={post.product as any}
+									isLoggedIn={isLoggedIn}
+								/>
+							)}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className='mt-3 pt-3 pt-lg-0 mt-lg-0'>
+				{post && (
+					<PostPeopleAlsoReadBlock
+						getForTagOnly={false}
+						tagIds={post?.tags?.map((tag) => tag.id)}
+						skipPostIds={[
+							...(skipPosts?.results.map((p) => p.id) || []),
+							post.id,
+						].filter((p) => p !== undefined)}
+					/>
+				)}
+			</div>
+		</>
+	)
+}

package/src/components/post/block/PostList.tsx

@@ -0,0 +1,111 @@
+import { useMemo } from 'react'
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+import isEmpty from 'lodash/isEmpty'
+import { useGetApprovedPostsQuery } from '@store/slice/api/postApiSlice'
+import { useSearchAndFilterCommon } from '@hooks'
+import ExploreLayoutContent from '@components/common/layout/explore/ExploreLayoutContent'
+import ExploreLayoutFilters from '@components/common/layout/explore/ExploreLayoutFilters'
+import TablePaging from '@components/common/table/TablePaging'
+import FilterPostCategoriesAccordion from '@components/post/accordion/FilterPostCategoriesAccordion'
+import PostCardsGrid from '@components/post/block/PostCardsGrid'
+import { FeaturedPostCard } from '@components/post/card/FeaturedPostCard'
+
+const NameSearch = dynamic(
+	() => import('@components/common/filters/NameSearch'),
+	{
+		ssr: false,
+	}
+)
+
+export const PostList = ({
+	categoryId,
+	tagId,
+	hideCategoryAccordion = false,
+}: {
+	categoryId?: string
+	tagId?: string
+	hideCategoryAccordion?: boolean
+}) => {
+	const {
+		query: { nameLike, page, limit },
+	} = useRouter()
+
+	const { updateURL, calculateProperPageNumber, getLimitFromQuery } =
+		useSearchAndFilterCommon()
+
+	const { data: featuredPosts } = useGetApprovedPostsQuery({
+		isFeatured: true,
+		categoryIds: categoryId ? [categoryId] : undefined,
+		tagIds: tagId ? [tagId] : undefined,
+		limit: 1,
+	})
+
+	const { data, isLoading, isFetching } = useGetApprovedPostsQuery({
+		nameLike: nameLike?.toString() || '',
+		limit: getLimitFromQuery(limit, 13),
+		categoryIds: categoryId ? [categoryId] : undefined,
+		page: calculateProperPageNumber(page),
+		tagIds: tagId ? [tagId] : undefined,
+		getForTagOnly: !!tagId,
+		includeAds: true,
+	})
+
+	const featuredPost = useMemo(() => {
+		return featuredPosts?.results[0] || data?.results[0]
+	}, [data?.results, featuredPosts?.results])
+
+	const posts = useMemo(() => {
+		return data?.results.filter((post) => post.id !== featuredPost?.id)
+	}, [data?.results, featuredPost?.id])
+
+	return (
+		<>
+			<div className='pb-3 pt-3'>
+				<h1 className='visually-hidden'>Blog</h1>
+				{featuredPost && (
+					<div className='mb-4'>
+						<FeaturedPostCard post={featuredPost} />
+					</div>
+				)}
+				<div className='d-none d-lg-block mb-4'>
+					<div className='d-flex gap-3'>
+						<div className='w-100'>
+							{!hideCategoryAccordion && (
+								<FilterPostCategoriesAccordion entity='post' />
+							)}
+						</div>
+						<div className='w-100'>
+							<NameSearch onSearchChange={() => updateURL('page', '1')} />
+						</div>
+					</div>
+				</div>
+				<ExploreLayoutFilters>
+					<div className='d-lg-none px-3 mt-3'>
+						<NameSearch onSearchChange={() => updateURL('page', '1')} />
+						<hr />
+					</div>
+					<div className='d-lg-none px-3 px-lg-0'>
+						{!hideCategoryAccordion && (
+							<FilterPostCategoriesAccordion entity='post' isAccordion />
+						)}
+					</div>
+				</ExploreLayoutFilters>
+				<ExploreLayoutContent cols={0}>
+					<PostCardsGrid
+						posts={posts || []}
+						isFetching={isFetching || isLoading}
+					/>
+					<div className='mt-5'>
+						{!isEmpty(posts) && data?.count !== undefined && (
+							<TablePaging
+								totalCount={data.count}
+								scrollToTopAfterChangeRoute
+							/>
+						)}
+					</div>
+				</ExploreLayoutContent>
+			</div>
+		</>
+	)
+}

package/src/components/post/block/PostNextAndPrevButtons.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+import { Tooltip } from '@chakra-ui/react'
+import { useGetPreviousAndNextPostQuery } from '@store/slice/api/postApiSlice'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import Button from '@components/common/button/Button'
+
+export const PostNextAndPrevButtons = ({
+	postId,
+	isDisabled,
+}: {
+	postId: string
+	isDisabled: boolean
+}) => {
+	const { push: redirect } = useRouter()
+	const { user } = useUserAuthContext()
+
+	const { data } = useGetPreviousAndNextPostQuery({
+		postId,
+	})
+
+	return (
+		<div className='d-flex gap-2'>
+			<Button
+				type='button'
+				className='border-light-gray text-hover-white no-min-size w-xs-50p h-xs-50p position-relative'
+				ariaLabel='Prev Post'
+				color='primary'
+				outline
+				disabled={isDisabled || !data?.previous}
+				onClick={() =>
+					redirect(
+						`/admin/posts/${data?.previous}`
+					)
+				}
+			>
+				<Tooltip
+					className='tooltip tooltip-md text-white'
+					label={'Go to previous post'}
+					hasArrow
+					placement='bottom'
+					fontSize='md'
+					mb='6'
+				>
+					<span className='d-flex align-items-center justify-content-center position-absolute top-0 left-0 right-0 bottom-0'>
+						<span className='bi bi-arrow-left fs-4'></span>
+					</span>
+				</Tooltip>
+			</Button>
+			<Button
+				type='button'
+				className='border-light-gray text-hover-white no-min-size w-xs-50p h-xs-50p position-relative'
+				ariaLabel='Next Post'
+				color='primary'
+				outline
+				disabled={isDisabled || !data?.next}
+				onClick={() =>
+					redirect(
+						`/admin/posts/${data?.next}`
+					)
+				}
+			>
+				<Tooltip
+					className='tooltip tooltip-md text-white'
+					label={'Go to next post'}
+					hasArrow
+					placement='bottom'
+					fontSize='md'
+					mb='6'
+				>
+					<span className='d-flex align-items-center justify-content-center position-absolute top-0 left-0 right-0 bottom-0'>
+						<span className='bi bi-arrow-right fs-4'></span>
+					</span>
+				</Tooltip>
+			</Button>
+		</div>
+	)
+}

package/src/components/post/block/PostPeopleAlsoReadBlock.tsx

@@ -0,0 +1,69 @@
+import { useGetApprovedPostsQuery } from '@store/slice/api/postApiSlice'
+import PostCard from '@components/post/card/PostCard'
+
+export const PostPeopleAlsoReadBlock = ({
+	skipPostIds,
+	limit = 5,
+	categoryIds,
+	categorySlugs,
+	tagIds,
+	ownerId,
+	titleClasses,
+	getForTagOnly,
+	title = 'People Also Read:',
+	backgroundColor = 'alice-blue',
+	containerClasses,
+	maxLimitedTo4,
+}: {
+	limit?: number
+	skipPostIds?: string[]
+	categoryIds?: string[]
+	categorySlugs?: string[]
+	tagIds?: string[]
+	ownerId?: string
+	title?: string
+	backgroundColor?: string
+	titleClasses?: string
+	containerClasses?: string
+	getForTagOnly?: boolean
+	maxLimitedTo4?: boolean
+}) => {
+	const { data: posts } = useGetApprovedPostsQuery({
+		limit,
+		categoryIds,
+		categorySlugs,
+		tagIds,
+		ownerId,
+		skipPostIds: skipPostIds,
+		getForTagOnly,
+	})
+	const computedContainerClasses =
+		containerClasses ||
+		(backgroundColor === 'transparent' ? 'mt-5 mb-5' : 'mt-5 py-5')
+
+	if (!posts?.count) {
+		return <></>
+	}
+
+	return (
+		<div className={`bg-${backgroundColor} ${computedContainerClasses}`}>
+			<div className='container'>
+				<h2 className={`fw-bolder fs-4 mb-4 ${titleClasses}`}>
+					{title}
+				</h2>
+				<div
+					className={`news-cards-grid general-cards general-cards-one-row ${
+						maxLimitedTo4 ? 'general-cards-limit-n1' : ''
+					}`}
+				>
+					{posts &&
+						posts.results.map((post, key) => (
+							<div key={key}>
+								<PostCard post={post} />
+							</div>
+						))}
+				</div>
+			</div>
+		</div>
+	)
+}

package/src/components/post/block/PostRelatedCards.tsx

@@ -0,0 +1,43 @@
+import isEmpty from 'lodash/isEmpty'
+import { Post } from '@store/model'
+import { useGetApprovedPostsQuery } from '@store/slice/api/postApiSlice'
+import RelatedPostCard from '@components/post/card/RelatedPostCard'
+
+export const PostRelatedBlock = ({
+	skipPost,
+	limit = 3,
+	categoryIds,
+	ownerId,
+	title,
+	tagIds,
+	getForTagOnly,
+}: {
+	limit?: number
+	skipPost?: Post
+	categoryIds?: string[]
+	ownerId?: string
+	title?: string
+	tagIds?: string[]
+	getForTagOnly?: boolean
+}) => {
+	const { data: posts } = useGetApprovedPostsQuery({
+		limit,
+		categoryIds,
+		ownerId,
+		tagIds,
+		getForTagOnly,
+		skipPostIds: skipPost ? [skipPost.id] : undefined,
+	})
+
+	return (
+		<>
+			{title && !isEmpty(posts?.results || []) && (
+				<h2 className='h3 mb-3'>Popular Posts</h2>
+			)}
+			{posts &&
+				posts.results.map((post, key) => (
+					<RelatedPostCard key={key} post={post} />
+				))}
+		</>
+	)
+}

package/src/components/post/card/FeaturedPostCard.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable @next/next/no-img-element */
+
+import Link from 'next/link'
+import isEmpty from 'lodash/isEmpty'
+import { Post } from '@store/model'
+import { usePostUtils } from '@hooks'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Badge from '@components/common/badge/Badge'
+import SharerActionBox from '@components/common/button/SharerActionBox'
+import { FullDateFormat } from '@helpers/date'
+import { LoginPersonIconDark, imageNotAvailable } from '@helpers/images'
+import { generatePageDescription } from '@helpers/string'
+
+export const FeaturedPostCard = ({
+	post,
+}: {
+	post: Post
+}) => {
+	const { onPostCardClick, generatePostDetailPageUrl } = usePostUtils()
+
+	return (
+		<div
+			className='card pointer rounded-md h-100 shadow border-0 featured-post'
+			data-type='post'
+			onClick={(e) => onPostCardClick(e, post)}
+		>
+			<div className='row g-0 rounded-md overflow-hidden h-md-350p'>
+				<div className='col-md-6 position-relative h-100 minh-xs-190p'>
+					<OptimizedImage
+						src={post.featuredMedia?.media.sourceUrl || imageNotAvailable.src || imageNotAvailable}
+						alt={post.featuredMedia?.media.details?.altText || ''}
+						className='w-100 h-100 top-0 left-0 object-fit-cover'
+						fill
+						width={680}
+						height={680}
+						priority
+						sizes='(max-width: 576px) 370px, (max-width: 768px) 680px, (max-width: 991px) 440px, (max-width: 1200px) 470px, (max-width: 1400px) 560px, 780px'
+					/>
+				</div>
+				<div className='col-md-6'>
+					<div className='card-body h-100 p-0 pt-3 pt-md-4 position-relative'>
+						{post.categories && !isEmpty(post.categories) && (
+							<div className='d-none d-md-flex flex-wrap gap-2 w-100 mb-3 ms-4'>
+								{post.categories.slice(0, 1).map((category, key) => (
+									<Link key={key} href={`/blog/c/${category.slug}`}>
+										<div data-type='category'>
+											<Badge
+												isOutline
+												bgColor='medium-gray'
+												textColor='medium-gray'
+												label={category.name}
+											/>
+										</div>
+									</Link>
+								))}
+							</div>
+						)}
+						<div className='d-flex flex-column justify-content-between h-100 w-100'>
+							<div>
+								<h2
+									className={`fs-lg text-truncate text-truncate--max-lines-3 mb-0 text-dark px-3 px-md-4 mh-xs-140p mh-md-190p`}
+								>
+									<Link href={generatePostDetailPageUrl(post)}>
+										{post.name}
+									</Link>
+								</h2>
+								{post.intro && (
+									<p className='mb-0 text-truncate text-truncate--max-lines-3 px-3 px-md-4 mb-6 mb-md-0 mt-3 mh-xs-80p'>
+										{post.intro}
+									</p>
+								)}
+							</div>
+							<div className='card-footer bg-white d-flex justify-content-between align-items-center rounded-bottom-md position-absolute bottom-0 end-0 start-0'>
+								<div className='text-medium-gray fw-bold fs-dec-65 fs-dec-md-85 ps-md-2 d-flex align-items-center'>
+									<OptimizedImage
+										src={
+											post.owner?.profileMedia?.media.sourceUrl || LoginPersonIconDark
+										}
+										alt={
+											post.owner?.profileMedia?.media.details?.altText ||
+											`${post.owner?.name} profile image`
+										}
+										width={30}
+										height={30}
+										className='object-fit-cover rounded-pill me-2 post-author-icon'
+									/>
+									<span>{FullDateFormat(post.createdAt, 'long')}</span>
+								</div>
+								<div data-type='actions' className='pe-md-2'>
+									<SharerActionBox
+										key={post.id}
+										name={post.name}
+										imageUrl={post.featuredMedia?.media.sourceUrl}
+										shareUrl={generatePostDetailPageUrl(post)}
+										isLiked={post.isLikedByUser}
+										entityId={post.id}
+										type='post'
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}