[feat]: Add pinned posts

src/routes/Feed/PostList/PinnedPosts.tsx

@@ -0,0 +1,63 @@
+import PostCard from "src/routes/Feed/PostList/PostCard"
+import React, { useMemo } from "react"
+import usePostsQuery from "src/hooks/usePostsQuery"
+import styled from "@emotion/styled"
+import { filterPosts } from "./filterPosts"
+import { DEFAULT_CATEGORY } from "src/constants"
+
+type Props = {
+  q: string
+}
+
+const PinnedPosts: React.FC<Props> = ({ q }) => {
+  const data = usePostsQuery()
+
+  const filteredPosts = useMemo(() => {
+    const baseFiltered = filterPosts({
+      posts: data,
+      q,
+      category: DEFAULT_CATEGORY,
+      order: "desc",
+    })
+    return baseFiltered.filter((post) => post.tags?.includes("Pinned"))
+  }, [data, q])
+
+  if (filteredPosts.length === 0) return null
+
+  return (
+    <StyledWrapper>
+      <div className="wrapper">
+        <div className="header">📌 Pinned Posts</div>
+      </div>
+      <div className="my-2">
+        {filteredPosts.map((post) => (
+          <PostCard key={post.slug} data={post} />
+        ))}
+      </div>
+    </StyledWrapper>
+  )
+}
+
+export default PinnedPosts
+
+const StyledWrapper = styled.div`
+  position: relative;
+  .wrapper {
+    display: flex;
+    margin-bottom: 1rem;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid ${({ theme }) => theme.colors.gray6};
+  }
+  .header {
+    display: flex;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    gap: 0.25rem;
+    align-items: center;
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    font-weight: 700;
+    cursor: pointer;
+  }
+`

src/routes/Feed/PostList/filterPosts.tsx

@@ -0,0 +1,35 @@
+import { DEFAULT_CATEGORY } from "src/constants"
+import { TPost } from "src/types"
+
+interface FilterPostsParams {
+  posts: TPost[]
+  q: string
+  tag?: string
+  category?: string
+  order?: string
+}
+
+export function filterPosts({
+  posts,
+  q,
+  tag = undefined,
+  category = DEFAULT_CATEGORY,
+  order = "desc",
+}: FilterPostsParams): TPost[] {
+  return posts
+    .filter((post) => {
+      const tagContent = post.tags ? post.tags.join(" ") : ""
+      const searchContent = post.title + post.summary + tagContent
+      return (
+        searchContent.toLowerCase().includes(q.toLowerCase()) &&
+        (!tag || (post.tags && post.tags.includes(tag))) &&
+        (category === DEFAULT_CATEGORY ||
+          (post.category && post.category.includes(category)))
+      )
+    })
+    .sort((a, b) => {
+      const dateA = new Date(a.date.start_date).getTime()
+      const dateB = new Date(b.date.start_date).getTime()
+      return order === "desc" ? dateB - dateA : dateA - dateB
+    })
+}

src/routes/Feed/index.tsx

@@ -10,6 +10,7 @@ import ProfileCard from "./ProfileCard"
 import ServiceCard from "./ServiceCard"
 import ContactCard from "./ContactCard"
 import PostList from "./PostList"
+import PinnedPosts from "./PostList/PinnedPosts"
 
 const HEADER_HEIGHT = 73
 
@@ -30,6 +31,7 @@ const Feed: React.FC<Props> = () => {
       </div>
       <div className="mid">
         <MobileProfileCard />
+        <PinnedPosts q={q} />
         <SearchInput value={q} onChange={(e) => setQ(e.target.value)} />
         <div className="tags">
           <TagList />