lumither/nocturne
1
0 Fork 0
mirror of https://github.com/Lumither/nocturne.git synced 2026-10-17 10:26:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(frontend) new tag filter, new landing page

Browse Source
This commit is contained in:
lumither committed 2025-10-13 02:59:21 -04:00
1 parent 314f5780fd
commit 02e7166fcb
18 files changed
+256 -427
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/app/(pages)/blog/BlogPostCard.tsx
+32 -11
View File
@@ -4,6 +4,8 @@ import { Chip } from '@nextui-org/react';
import Image from 'next/image';
import Link from 'next/link';
import { MdCalendarMonth, MdNorthEast } from 'react-icons/md';
import { HighlightSelector } from '@/app/(pages)/blog/post/components/AnimationPostList';
import TagChip from '@/app/(pages)/blog/TagChip';
interface Post {
id: string,
@@ -19,15 +21,20 @@ interface Post {
type Props = {
post: Post
highlightSelector: HighlightSelector,
}
function BlogPostCard({ post }: Props) {
function BlogPostCard({ post, highlightSelector }: Props) {
const highlightTags = highlightSelector?.tags;
return (
<div className={ `w-full` }>
<Card as={ Link } href={ `/blog/post/${ post.identifier }` }
className={ `group` }
isPressable
isHoverable
<Card
as={ Link } href={ `/blog/post/${ post.identifier }` }
className={ `group w-full` }
isPressable
isHoverable
>
{ post.header_img && <div className={ `w-full overflow h-80 relative` }>
@@ -63,12 +70,26 @@ function BlogPostCard({ post }: Props) {
<div className={ `flex flex-row flex-wrap justify-between w-full` }>
<div>
<ul className={ `flex flex-row flex-wrap` }>
{
post.tags.map((tag: string, key: any) => (
<li key={ key } className={ `mx-1 mb-1` }>
<Chip>{ tag }</Chip>
</li>
))
{/*highlight*/
post.tags
.filter((tag) => highlightTags?.includes(tag))
.sort()
.map((tag: string, key: any) => (
<li key={ key } className={ `mx-1 mb-1` }>
<TagChip tagName={ tag } isHighlighted={ true } />
</li>
))
}
{/*normal */
post.tags
.filter((tag) => !highlightTags?.includes(tag))
.sort()
.map((tag: string, key: any) => (
<li key={ key } className={ `mx-1 mb-1` }>
<TagChip tagName={ tag } isHighlighted={ false } />
</li>
))
}
</ul>
</div>