Blog template

1"use client";
2 
3import { ArrowUpRight, Clock3, FileText, Search, X } from "lucide-react";
4import { useMemo, useState } from "react";
5 
6import { Button } from "@/components/ui/button";
7import { Input } from "@/components/ui/input";
8import { BLOG_POSTS } from "@/lib/blog-posts";
9 
10const TEMPLATE_THEME =
11  "[color-scheme:light] [--background:#fff5cc] [--secondary-background:#fff] [--foreground:#000] [--main-foreground:#000] [--main:#ffbe00] [--border:#000] [--ring:#000] [--box-shadow-x:0px] [--box-shadow-y:4px] [--reverse-box-shadow-x:0px] [--reverse-box-shadow-y:-4px] [--shadow:0px_4px_0px_0px_var(--border)] [--border-radius:10px] [--base-font-weight:500] [--heading-font-weight:700] dark:[color-scheme:dark] dark:[--background:#2c304c] dark:[--secondary-background:#222] dark:[--foreground:#ececec] dark:[--main:#ffbe00] dark:[--ring:#fff]";
12 
13type BlogTemplateProps = {
14  basePath?: string;
15};
16 
17function getPostHref(basePath: string, slug: string) {
18  return `${basePath.replace(/\/$/, "")}/${slug}`;
19}
20 
21export default function BlogTemplate({ basePath = "/blog" }: BlogTemplateProps) {
22  const [query, setQuery] = useState("");
23 
24  const filteredPosts = useMemo(() => {
25    const normalizedQuery = query.trim().toLowerCase();
26 
27    if (!normalizedQuery) return BLOG_POSTS;
28 
29    return BLOG_POSTS.filter((post) =>
30      [post.title, post.summary, post.topic].join(" ").toLowerCase().includes(normalizedQuery),
31    );
32  }, [query]);
33 
34  return (
35    <div
36      id="top"
37      className={`flex min-h-dvh flex-col bg-background text-foreground ${TEMPLATE_THEME}`}
38    >
39      <header className="border-b-2 border-border bg-secondary-background">
40        <div className="mx-auto flex h-12 max-w-3xl items-center justify-between px-4 sm:px-6">
41          <a
42            href="#top"
43            className="group flex items-center gap-2 font-heading"
44            aria-label="Worklog home"
45          >
46            <span className="grid size-7 place-items-center rounded-base border-2 border-border bg-main text-main-foreground shadow-shadow transition-[translate,box-shadow] duration-[140ms] ease-[ease] motion-reduce:transition-none group-hover:translate-x-pressX group-hover:translate-y-pressY group-hover:shadow-press group-focus-visible:translate-x-pressX group-focus-visible:translate-y-pressY group-focus-visible:shadow-press group-active:translate-x-boxShadowX group-active:translate-y-boxShadowY group-active:shadow-[0_0_0_0_var(--border)]">
47// … truncated