Stage 22: Add tags card

app/blog/page.tsx

@@ -1,7 +1,9 @@
 import { posts } from "#site/content";
 import { PostItem } from "@/components/post-item";
 import { QueryPagination } from "@/components/query-pagination";
-import { sortPosts } from "@/lib/utils";
+import { Tag } from "@/components/tag";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getAllTags, sortPosts, sortTagsByCount } from "@/lib/utils";
 import { Metadata } from "next";
 
 //SEO
@@ -28,6 +30,9 @@ export default async function BlogPage({ searchParams }: BlogPageProps) {
     POSTS_PER_PAGE * currentPage,
   );
 
+  const tags = getAllTags(posts);
+  const sortedTags = sortTagsByCount(tags);
+
   return (
     <div className="container max-w-4xl py-6 lg:py-10">
       <div className="flex flex-col items-start gap-4 md:flex-row md:justify-between md:gap-8">
@@ -36,28 +41,45 @@ export default async function BlogPage({ searchParams }: BlogPageProps) {
           <p className="text xl text-muted-foreground">Diverse tech blogging</p>
         </div>
       </div>
-      <hr className="mt-8" />
-      {displayPosts?.length > 0 ? (
-        <ul className="flex flex-col">
-          {displayPosts.map((post) => {
-            const { slug, date, title, description, tags } = post;
-            return (
-              <li key={slug}>
-                <PostItem
-                  slug={slug}
-                  date={date}
-                  title={title}
-                  description={description}
-                  tags={tags}
-                />
-              </li>
-            );
-          })}
-        </ul>
-      ) : (
-        <p>Ikke noe innhold her</p>
-      )}
-      <QueryPagination totalPages={totalPages} className="justify-end mt-4" />
+      <div className="grid grid-cols-12 gap-3 mt-8">
+        <div className="col-span-12 col-start-1 sm:col-span-8">
+          <hr />
+          {displayPosts?.length > 0 ? (
+            <ul className="flex flex-col">
+              {displayPosts.map((post) => {
+                const { slug, date, title, description, tags } = post;
+                return (
+                  <li key={slug}>
+                    <PostItem
+                      slug={slug}
+                      date={date}
+                      title={title}
+                      description={description}
+                      tags={tags}
+                    />
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <p>Ikke noe innhold her</p>
+          )}
+          <QueryPagination
+            totalPages={totalPages}
+            className="justify-end mt-4"
+          />
+        </div>
+        <Card className="col-span-12 row-start-3 h-fit sm:col-span-4 sm:col-start-9 sm:row-start-1">
+          <CardHeader>
+            <CardTitle>Tags</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-wrap gap-2">
+            {sortedTags?.map((tag) => (
+              <Tag tag={tag} key={tag} count={tags[tag]} />
+            ))}
+          </CardContent>
+        </Card>
+      </div>
     </div>
   );
 }

components/tag.tsx

@@ -17,7 +17,7 @@ export function Tag({ tag, current, count }: TagProps) {
       })}
       href={`/tags/${slug(tag)}`}
     >
-      {tag}
+      {tag} {count ? `(${count})` : null}
     </Link>
   );
 }

components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

lib/utils.ts

@@ -22,3 +22,18 @@ export function sortPosts(posts: Array<Post>) {
     return 0;
   });
 }
+
+export function getAllTags(posts: Array<Post>) {
+  const tags: Record<string, number> = {};
+  posts.forEach((post) => {
+    post.tags?.forEach((tag) => {
+      tags[tag] = (tags[tag] ?? 0) + 1;
+    });
+  });
+
+  return tags;
+}
+
+export function sortTagsByCount(tags: Record<string, number>) {
+  return Object.keys(tags).sort((a, b) => tags[b] - tags[a]);
+}