// // BogPostCategoryPostsGroup. // import React from "react"; import { CMSCategoryResolution } from "../../cms/entities/cms.entity.catgory"; import { FLPath } from "../../models/route/model.route"; import { CMSCategoryIconFactory } from "../CMS/CMSCategoryIcon"; import Link from "next/link"; import RiMore from "remixicon-react/MoreLineIcon"; /* * * Interfaces. * */ interface Props { category: CMSCategoryResolution; maxPostsEachThreshold: number; } /* * * Components. * */ export const BogPostCategoryPostsGroup = (props: Props) => { const { category, maxPostsEachThreshold } = props; const { posts } = category; if (posts.length === 0) { return null; } const url = `${FLPath.Categories}/${category.slug.current}`; const Icon = CMSCategoryIconFactory({ variant: category.slug.current }); return (

{posts.slice(0, 4).map((p, i) => (

{Array.from({ length: 2 }, (_, i) => ( ))} ))} {posts.length >= 5 && ( )}

{category.title}

{category.posts.length} {category.posts.length === maxPostsEachThreshold ? "+" : ""}{" "} {category.posts.length === 1 ? "post" : "posts"}

); };

All categories

Cloud

Net & Web

Progressive Web Apps

Databases

Science

React.js

Typescript & Javascript

Personal

Algorithms & data structures

UI & UX

Machine Learning

Svelte & SvelteKit

Functional Programming

Learning

Native Apps

Virtual Reality

Coding Guides

Tools & Development

Around the Web

Linux & OSS