@salla.sa/twilight-theme-engine 1.0.85 → 1.0.87

package/tailwind/routes/blog/BlogAuthorPage.tsx.txt

@@ -0,0 +1,82 @@
+import { useRef, useCallback } from 'react';
+import { ItemsList } from '@salla.sa/twilight-components-react';
+import { HookSlot } from '../../hooks';
+import { useTranslation } from '../../providers/I18nProvider';
+import { useLocation } from '../../providers/NavigationProvider';
+import { Breadcrumb, NoContent } from '../../components/common';
+import { blog } from '../../api/blog';
+import { BlogArticleCard, BlogListLayout } from './components';
+import type { BlogAuthorLoaderData, ArticleSummary } from './types';
+
+const EMPTY_CATEGORIES: BlogAuthorLoaderData['categories'] = [];
+const EMPTY_ARTICLES: ArticleSummary[] = [];
+
+export function BlogAuthorPage({
+  page,
+  author,
+  categories = EMPTY_CATEGORIES,
+  articles = EMPTY_ARTICLES,
+  cursor,
+}: BlogAuthorLoaderData) {
+  const { t } = useTranslation();
+  const { pathname, searchStr } = useLocation();
+  const nextCursorRef = useRef<string | null>(cursor?.next ?? null);
+
+  const loader = useCallback(async () => {
+    const nextUrl = nextCursorRef.current;
+    const cursorMatch = nextUrl?.match(/[?&]cursor=([^&]+)/);
+    const cursorValue = cursorMatch ? decodeURIComponent(cursorMatch[1]) : (nextUrl ?? undefined);
+
+    const result = await blog.articles.list({ author: String(page.id), cursor: cursorValue });
+    nextCursorRef.current = result.cursor?.next ?? null;
+
+    return {
+      items: result.data,
+      next: result.cursor?.next ?? null,
+    };
+  }, [page.id]);
+
+  if (articles.length === 0) {
+    return (
+      <div className="container mb-8 sm:mb-24">
+        <Breadcrumb page={page} />
+        <BlogListLayout categories={categories}>
+          <HookSlot name="blog:author.start" />
+          <NoContent icon="sicon-inbox" message={t('pages.blog_categories.no_articles')} />
+          <HookSlot name="blog:author.end" />
+        </BlogListLayout>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mb-8 sm:mb-24">
+      <Breadcrumb page={page} />
+
+      <BlogListLayout categories={categories}>
+        <HookSlot name="blog:author.start" />
+
+        <div className="mb-6">
+          <h1 className="font-bold text-xl">{author.name}</h1>
+        </div>
+
+        <ItemsList<ArticleSummary>
+          items={articles}
+          loader={cursor?.next ? loader : undefined}
+          mode={cursor?.next ? 'infinite' : 'static'}
+          pageUrl={pathname + searchStr}
+          className="s-blog-list"
+          itemsClassName="grid md:grid-cols-2 gap-2.5 md:gap-8"
+          empty={<NoContent icon="sicon-inbox" message={t('pages.blog_categories.no_articles')} />}
+          t={(key, fallback) => t(key, fallback || key)}
+        >
+          {(items) =>
+            items.map((article) => <BlogArticleCard key={article.id} article={article} />)
+          }
+        </ItemsList>
+
+        <HookSlot name="blog:author.end" />
+      </BlogListLayout>
+    </div>
+  );
+}

package/tailwind/routes/blog/BlogCategoryPage.tsx.txt

@@ -0,0 +1,84 @@
+import { useRef, useCallback } from 'react';
+import { ItemsList } from '@salla.sa/twilight-components-react';
+import { HookSlot } from '../../hooks';
+import { useTranslation } from '../../providers/I18nProvider';
+import { useLocation } from '../../providers/NavigationProvider';
+import { Breadcrumb, NoContent } from '../../components/common';
+import { blog } from '../../api/blog';
+import { BlogArticleCard, BlogListLayout } from './components';
+import type { BlogCategoryLoaderData, ArticleSummary } from './types';
+
+const EMPTY_CATEGORIES: BlogCategoryLoaderData['categories'] = [];
+const EMPTY_ARTICLES: ArticleSummary[] = [];
+
+export function BlogCategoryPage({
+  page,
+  blogCategory,
+  categories = EMPTY_CATEGORIES,
+  articles = EMPTY_ARTICLES,
+  cursor,
+}: BlogCategoryLoaderData) {
+  const { t } = useTranslation();
+  const { pathname, searchStr } = useLocation();
+  const nextCursorRef = useRef<string | null>(cursor?.next ?? null);
+
+  const loader = useCallback(async () => {
+    const nextUrl = nextCursorRef.current;
+    const cursorMatch = nextUrl?.match(/[?&]cursor=([^&]+)/);
+    const cursorValue = cursorMatch ? decodeURIComponent(cursorMatch[1]) : (nextUrl ?? undefined);
+
+    const result = await blog.articles.list({ category: blogCategory.id, cursor: cursorValue });
+    nextCursorRef.current = result.cursor?.next ?? null;
+
+    return {
+      items: result.data,
+      next: result.cursor?.next ?? null,
+    };
+  }, [blogCategory.id]);
+
+  if (articles.length === 0) {
+    return (
+      <div className="container mb-8 sm:mb-24">
+        <Breadcrumb page={page} />
+        <BlogListLayout categories={categories}>
+          <HookSlot name="blog:category.start" />
+          <NoContent icon="sicon-inbox" message={t('pages.blog_categories.no_articles')} />
+          <HookSlot name="blog:category.end" />
+        </BlogListLayout>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mb-8 sm:mb-24">
+      <Breadcrumb page={page} />
+
+      <BlogListLayout categories={categories}>
+        <HookSlot name="blog:category.start" />
+
+        <div className="mb-6">
+          <h1 className="font-bold text-xl">{blogCategory.name}</h1>
+        </div>
+
+        <ItemsList<ArticleSummary>
+          items={articles}
+          loader={cursor?.next ? loader : undefined}
+          mode={cursor?.next ? 'infinite' : 'static'}
+          pageUrl={pathname + searchStr}
+          className="s-blog-list"
+          itemsClassName="grid md:grid-cols-2 gap-2.5 md:gap-8"
+          empty={<NoContent icon="sicon-inbox" message={t('pages.blog_categories.no_articles')} />}
+          t={(key, fallback) => t(key, fallback || key)}
+        >
+          {(items) =>
+            items.map((article) => (
+              <BlogArticleCard key={article.id} article={article} showAuthor />
+            ))
+          }
+        </ItemsList>
+
+        <HookSlot name="blog:category.end" />
+      </BlogListLayout>
+    </div>
+  );
+}

package/tailwind/routes/blog/BlogPage.tsx.txt

@@ -0,0 +1,191 @@
+import { SallaSlider } from '@salla.sa/twilight-components-react/slider';
+import { HookSlot, useDate } from '../../hooks';
+import { useTranslation } from '../../providers/I18nProvider';
+import type { BlogPageProps, ArticleSummary } from './types';
+import { Breadcrumb, NoContent, Link, Image } from '../../components/common';
+import { BlogTags } from './BlogTags';
+
+const EMPTY_CATEGORIES: NonNullable<BlogPageProps['categories']> = [];
+const EMPTY_ARTICLES: ArticleSummary[] = [];
+const EMPTY_SLIDES: NonNullable<BlogPageProps['slides']> = [];
+
+export function BlogPage({
+  page,
+  categories = EMPTY_CATEGORIES,
+  articles = EMPTY_ARTICLES,
+  slides = EMPTY_SLIDES,
+}: BlogPageProps) {
+  const { t } = useTranslation();
+  const { format: formatDate } = useDate();
+
+  return (
+    <div className="container mb-8 sm:mb-24">
+      <div className="center-between">
+        <Breadcrumb page={page} />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-8 gap-8">
+        <nav aria-label="Sidebar" className="hidden lg:block lg:sticky shrink-0 top-24 col-span-2">
+          <h2 className="font-bold mb-3">{t('pages.blog_categories.categories')}</h2>
+          <ul>
+            {categories.map((category) => (
+              <li key={category.id} className={category.is_current ? 'text-primary' : ''}>
+                <Link className="py-3 block text-sm hover:text-primary" to={category.url}>
+                  {category.name}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+
+        <div className="main-content lg:col-span-6">
+          <HookSlot name="blog:start" />
+
+          {slides.length > 0 && (
+            <SallaSlider
+              id="blog-home-slider"
+              type="blog"
+              autoPlay
+              autoHeight
+              showControls={false}
+              pagination
+              className="blog-slider block rounded overflow-hidden mb-2.5 lg:mb-8"
+              sliderConfig={{ watchOverflow: true }}
+            >
+              <div slot="items">
+                {slides.map((article, index) => (
+                  <div
+                    key={article.id}
+                    className="swiper-slide has-overlay blog-slider__slide h-[300px] md:h-[400px] relative bg-border-color flex justify-center"
+                  >
+                    <Image
+                      className="object-cover h-full w-full"
+                      src={article.image}
+                      alt={article.name}
+                      aspectRatio="3/1"
+                      priority={index === 0}
+                    />
+                    <div className="absolute z-10 bottom-0 rtl:right-0 ltr:left-0 p-4 pb-10 rtl:lg:pr-10 ltr:lg:pl-10 lg:pb-20">
+                      <div className="blog-slider__content relative">
+                        <div className="z-20 w-full md:w-5/6 lg:w-6/12 text-white">
+                          <div className="block-slide-anime">
+                            <div className="mb-2.5 rounded-md inline-flex text-sm rtl:space-x-reverse space-x-5">
+                              <div className="flex items-center">
+                                <i className="sicon-calendar-date rtl:ml-1 ltr:mr-1"></i>
+                                <span className="whitespace-nowrap">
+                                  {formatDate(article.created_at)}
+                                </span>
+                              </div>
+                              <Link
+                                to={article.author?.url || '#'}
+                                className="flex items-center hover:underline"
+                              >
+                                <i className="sicon-user rtl:ml-1 ltr:mr-1"></i>
+                                <span className="whitespace-nowrap">{article.author?.name}</span>
+                              </Link>
+                            </div>
+                            <h3 className="text-sm font-bold leading-normal mb-4">
+                              <Link to={article.url}>{article.name}</Link>
+                            </h3>
+                          </div>
+                          <p className="line-clamp-2 block-slide-anime description">
+                            {article.description}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </SallaSlider>
+          )}
+
+          {!slides.length && (
+            <div className="sr-only lg:not-sr-only">
+              <h1 className="blog-category__title font-bold text-lg mb-8">
+                {t('blocks.footer.blog')}
+              </h1>
+            </div>
+          )}
+
+          {slides.length > 0 && <h1 className="sr-only">{t('blocks.footer.blog')}</h1>}
+
+          {articles.length > 0 ? (
+            <>
+              <HookSlot name="blog:items.start" />
+              <div className="grid md:grid-cols-2 gap-2.5 md:gap-8">
+                {articles.map((article) => (
+                  <div
+                    key={article.id}
+                    className="list-block post-entry relative h-full transition-shadow duration-500 bg-white hover:shadow-default rounded-lg justify-around overflow-hidden flex flex-col"
+                  >
+                    <Link
+                      to={article.url}
+                      className="post-entry__image relative overflow-hidden hover:opacity-90 w-full h-56 bg-border-color flex items-center justify-center"
+                    >
+                      <Image
+                        className="h-full w-full object-cover"
+                        src={article.image}
+                        alt={article.name}
+                        aspectRatio="16/9"
+                      />
+                    </Link>
+
+                    <div className="flex-1 px-5 pt-5 pb-7">
+                      <div className="mb-2.5 text-gray-500 rounded-md inline-flex text-sm rtl:space-x-reverse space-x-5">
+                        <div className="flex items-center">
+                          <i className="sicon-calendar-date rtl:ml-1 ltr:mr-1"></i>
+                          <span>{formatDate(article.created_at)}</span>
+                        </div>
+                        <Link
+                          to={article.author?.url || '#'}
+                          className="flex items-center hover:text-dark"
+                        >
+                          <i className="sicon-user rtl:ml-1 ltr:mr-1"></i>
+                          <span>{article.author?.name}</span>
+                        </Link>
+                      </div>
+
+                      <h3 className="post-entry__title text-sm font-bold text-gray-800 leading-6 mb-2.5">
+                        <Link to={article.url}>{article.name}</Link>
+                      </h3>
+                      <p className="text-sm text-gray-500 leading-6 mb-2.5">
+                        {article.description}
+                      </p>
+
+                      {((article.stats?.likes ?? 0) > 0 || (article.stats?.comments ?? 0) > 0) && (
+                        <div className="post-entry__icons flex items-center gap-2.5 text-gray-500 text-sm">
+                          {(article.stats?.likes ?? 0) > 0 && (
+                            <div className="flex items-center gap-1">
+                              <i className="sicon-thumbs-up"></i>
+                              {article.stats?.likes}
+                            </div>
+                          )}
+                          {(article.stats?.comments ?? 0) > 0 && (
+                            <div className="flex items-center gap-1">
+                              <i className="sicon-chat"></i>
+                              {article.stats?.comments}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+
+                    {article.tags && <BlogTags tags={article.tags} />}
+                  </div>
+                ))}
+              </div>
+              <HookSlot name="blog:items.end" />
+            </>
+          ) : (
+            !slides.length && (
+              <NoContent icon="sicon-inbox" message={t('pages.blog_categories.no_articles')} />
+            )
+          )}
+
+          <HookSlot name="blog:end" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/tailwind/routes/blog/BlogSinglePage.tsx.txt

@@ -0,0 +1,168 @@
+import { SallaComments } from '@salla.sa/twilight-components-react/comments';
+import { HookSlot, useAsset, useDate } from '../../hooks';
+import { useBlogLike } from '../../hooks/useBlogLike';
+import { useComments } from '../../hooks/useComments';
+import { useTranslation } from '../../providers/I18nProvider';
+import type { BlogSinglePageProps } from './types';
+import { Breadcrumb, Image, Link } from '../../components/common';
+import { useTwilight } from '../../providers/twilight-context';
+
+export function BlogSinglePage({ page, article, related = [] }: BlogSinglePageProps) {
+  const { t } = useTranslation();
+  const { store } = useTwilight();
+  const { cdn } = useAsset();
+  const { format: formatDate } = useDate();
+  const { active, count, toggle, loading } = useBlogLike(
+    Number(article.id) || 0,
+    article.stats?.likes ?? 0
+  );
+  const { commentsKey } = useComments();
+
+  return (
+    <div key={article.id} className="container mb-8 sm:mb-24">
+      <Breadcrumb page={page} />
+
+      <div className="md:flex items-start">
+        <div className="main-content blog-category md:w-96 flex-1 bg-white lg:p-8 rounded-md mb-10 md:mb-0">
+          <HookSlot name="blog:single.start" />
+
+          <h1 className="font-bold text-3xl mb-5 leading-10">{article.name}</h1>
+
+          <div className="mb-10 text-gray-500 rounded-md inline-flex text-sm rtl:space-x-reverse space-x-5">
+            <div className="flex items-center">
+              <i className="sicon-calendar-date rtl:ml-1 ltr:mr-1"></i>
+              <span>{formatDate(article.created_at)}</span>
+            </div>
+            <Link to={article.author?.url || '#'} className="flex items-center hover:text-dark">
+              <i className="sicon-user rtl:ml-1 ltr:mr-1"></i>
+              <span>{article.author?.name}</span>
+            </Link>
+          </div>
+
+          {article.image && (
+            <Image
+              src={article.image}
+              alt={article.name}
+              className="h-80 mb-10 w-full rounded-md"
+              aspectRatio="16/9"
+              priority
+              noWrapper
+            />
+          )}
+
+          {store.settings?.blog?.allow_likes_and_comments && (
+            <div className="flex items-center gap-2.5 text-gray-500 text-base mb-2">
+              <button
+                type="button"
+                id="blog-like"
+                data-blog-id={article.id}
+                className={`flex items-center gap-1 transition-colors ${active ? 'text-primary font-semibold liked' : ''}`}
+                onClick={toggle}
+                disabled={loading}
+              >
+                {loading ? (
+                  <span className="loader loader--small"></span>
+                ) : (
+                  <i className={`sicon-thumbs-up ${active ? 'text-primary' : ''}`}></i>
+                )}
+                <span>{count}</span>
+              </button>
+              {(article.stats?.comments ?? 0) > 0 && (
+                <div className="flex items-center gap-1">
+                  <i className="sicon-chat text-primary"></i>
+                  {article.stats?.comments}
+                </div>
+              )}
+            </div>
+          )}
+
+          <article
+            className="leading-7 text-sm mb-10"
+            dangerouslySetInnerHTML={{ __html: article.description?.replace(/&nbsp;/g, ' ') || '' }}
+          />
+
+          {article.tags && article.tags.length > 0 && (
+            <div className="p-4 flex flex-wrap items-center border-t border-gray-200">
+              {article.tags.map((tag) => (
+                <Link
+                  key={tag.id}
+                  to={tag.url}
+                  className="py-2 px-4 rounded-large inline-flex items-center text-gray-500 hover:text-dark justify-center text-sm"
+                >
+                  <i className="font-medium sicon-tag rtl:ml-1.5 ltr:mr-1.5"></i>
+                  <span className="fix-align whitespace-nowrap">{tag.name}</span>
+                </Link>
+              ))}
+            </div>
+          )}
+
+          {store.settings?.blog?.allow_likes_and_comments && (
+            <SallaComments
+              key={commentsKey}
+              itemId={Number(article.id) || 0}
+              type={'blog' as any}
+            />
+          )}
+
+          <HookSlot name="blog:single.end" />
+        </div>
+
+        <aside
+          aria-label="Sidebar"
+          className="sticky shrink-0 top-24 md:w-96 rtl:lg:mr-8 ltr:lg:ml-8 pb-11"
+        >
+          {related.length > 0 && (
+            <>
+              <h2 className="font-bold mb-3">{t('pages.blog_articles.related')}</h2>
+
+              <HookSlot name="blog:single.related.start" />
+
+              {related.map((relatedArticle) => (
+                <div
+                  key={relatedArticle.id}
+                  className="mt-5 flex items-center bg-white p-5 rounded-md"
+                >
+                  <div className="shrink-0">
+                    <Link
+                      to={relatedArticle.url}
+                      className="bg-border-color h-24 w-24 rounded-md overflow-hidden flex items-center justify-center"
+                    >
+                      <span className="sr-only">{relatedArticle.name}</span>
+                      {relatedArticle.image ? (
+                        <Image
+                          className="h-full w-full object-cover"
+                          src={relatedArticle.image}
+                          alt={relatedArticle.name}
+                          aspectRatio="1/1"
+                        />
+                      ) : (
+                        <Image
+                          className="sm:h-full w-10 object-contain opacity-60"
+                          src={cdn('/images/placeholder.png')}
+                          alt="post image"
+                        />
+                      )}
+                    </Link>
+                  </div>
+                  <div className="rtl:mr-3 ltr:ml-3">
+                    <div className="flex items-center text-sm text-gray-500 mb-2">
+                      <i className="sicon-calendar-date rtl:ml-1 ltr:mr-1 rtl:pl-px ltr:pr-px"></i>
+                      <time>{formatDate(relatedArticle.created_at)}</time>
+                    </div>
+                    <h3 className="text-sm font-bold text-gray-800 leading-6">
+                      <Link to={relatedArticle.url} className="hover:underline">
+                        {relatedArticle.name}
+                      </Link>
+                    </h3>
+                  </div>
+                </div>
+              ))}
+
+              <HookSlot name="blog:single.related.end" />
+            </>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}

package/tailwind/routes/blog/BlogTagPage.tsx.txt

@@ -0,0 +1,84 @@
+import { useRef, useCallback } from 'react';
+import { ItemsList } from '@salla.sa/twilight-components-react';
+import { HookSlot } from '../../hooks';
+import { useTranslation } from '../../providers/I18nProvider';
+import { useLocation } from '../../providers/NavigationProvider';
+import { Breadcrumb, NoContent } from '../../components/common';
+import { blog } from '../../api/blog';
+import { BlogArticleCard, BlogListLayout } from './components';
+import type { BlogTagLoaderData, ArticleSummary } from './types';
+
+const EMPTY_CATEGORIES: BlogTagLoaderData['categories'] = [];
+const EMPTY_ARTICLES: ArticleSummary[] = [];
+
+export function BlogTagPage({
+  page,
+  blogTag,
+  categories = EMPTY_CATEGORIES,
+  articles = EMPTY_ARTICLES,
+  cursor,
+}: BlogTagLoaderData) {
+  const { t } = useTranslation();
+  const { pathname, searchStr } = useLocation();
+  const nextCursorRef = useRef<string | null>(cursor?.next ?? null);
+
+  const loader = useCallback(async () => {
+    const nextUrl = nextCursorRef.current;
+    const cursorMatch = nextUrl?.match(/[?&]cursor=([^&]+)/);
+    const cursorValue = cursorMatch ? decodeURIComponent(cursorMatch[1]) : (nextUrl ?? undefined);
+
+    const result = await blog.articles.list({ tag: String(blogTag.id), cursor: cursorValue });
+    nextCursorRef.current = result.cursor?.next ?? null;
+
+    return {
+      items: result.data,
+      next: result.cursor?.next ?? null,
+    };
+  }, [blogTag.id]);
+
+  if (articles.length === 0) {
+    return (
+      <div className="container mb-8 sm:mb-24">
+        <Breadcrumb page={page} />
+        <BlogListLayout categories={categories}>
+          <HookSlot name="blog:tag.start" />
+          <NoContent icon="sicon-inbox" message={t('pages.blog_categories.no_articles')} />
+          <HookSlot name="blog:tag.end" />
+        </BlogListLayout>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mb-8 sm:mb-24">
+      <Breadcrumb page={page} />
+
+      <BlogListLayout categories={categories}>
+        <HookSlot name="blog:tag.start" />
+
+        <div className="mb-6">
+          <h1 className="font-bold text-xl">{blogTag.name}</h1>
+        </div>
+
+        <ItemsList<ArticleSummary>
+          items={articles}
+          loader={cursor?.next ? loader : undefined}
+          mode={cursor?.next ? 'infinite' : 'static'}
+          pageUrl={pathname + searchStr}
+          className="s-blog-list"
+          itemsClassName="grid md:grid-cols-2 gap-2.5 md:gap-8"
+          empty={<NoContent icon="sicon-inbox" message={t('pages.blog_categories.no_articles')} />}
+          t={(key, fallback) => t(key, fallback || key)}
+        >
+          {(items) =>
+            items.map((article) => (
+              <BlogArticleCard key={article.id} article={article} showAuthor />
+            ))
+          }
+        </ItemsList>
+
+        <HookSlot name="blog:tag.end" />
+      </BlogListLayout>
+    </div>
+  );
+}

package/tailwind/routes/blog/BlogTags.tsx.txt

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { Link } from '../../components/common';
+import { useTranslation } from '../../providers/I18nProvider';
+import type { BlogTag } from './types';
+
+/** Tags shown on a blog card before the rest fold behind a "+N" toggle. */
+export const BLOG_CARD_VISIBLE_TAGS = 3;
+
+interface BlogTagsProps {
+  tags: BlogTag[];
+  /** How many tags to show before folding the rest. */
+  visible?: number;
+}
+
+/**
+ * The tag row of a blog card. Articles can carry dozens of tags, which used to wrap into
+ * a wall of links and stretch the card; show the first few as compact chips and fold the
+ * rest behind a "+N" toggle that expands them in place (and "Show less" to fold back).
+ * Nothing folds when the tags fit.
+ */
+export function BlogTags({ tags, visible = BLOG_CARD_VISIBLE_TAGS }: BlogTagsProps) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+
+  if (tags.length === 0) return null;
+
+  const hiddenCount = Math.max(0, tags.length - visible);
+  const shown = expanded ? tags : tags.slice(0, visible);
+
+  return (
+    <div className="s-blog-tags p-4 flex flex-wrap items-center gap-2 border-t border-gray-200">
+      {shown.map((tag) => (
+        <Link
+          key={tag.id}
+          to={tag.url}
+          className="s-blog-tags-item py-1 px-3 rounded-full border border-gray-200 inline-flex items-center max-w-full text-gray-500 hover:text-dark hover:border-gray-300 text-xs"
+        >
+          <i className="font-medium sicon-tag rtl:ml-1.5 ltr:mr-1.5"></i>
+          <span className="fix-align truncate">{tag.name}</span>
+        </Link>
+      ))}
+      {hiddenCount > 0 && (
+        <button
+          type="button"
+          className="s-blog-tags-more py-1 px-3 rounded-full text-xs font-medium text-primary hover:opacity-80"
+          aria-expanded={expanded}
+          onClick={() => setExpanded((open) => !open)}
+        >
+          {expanded ? t('common.elements.show_less', 'Show less') : `+${hiddenCount}`}
+        </button>
+      )}
+    </div>
+  );
+}