create-landing-app 0.2.8 → 0.3.1

package/templates/nextjs/optional/sections/blog/files/components/navs/layout-blogs.tsx

@@ -0,0 +1,51 @@
+"use client";
+import { useRouter, usePathname } from "next/navigation";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+type Category = { slug: string; name: string };
+
+export default function LayoutBlogs({
+  categories,
+  children,
+}: {
+  categories: Category[];
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const pathName = usePathname();
+
+  // Extract current category from URL — last path segment after /blogs/
+  const currentCategory = pathName.split("/blogs/")[1]?.split("/")[0] ?? "all";
+
+  const handleTabChange = (category: string) => {
+    // Replace only the category segment, preserving the rest of the path (e.g. /en/blogs/all)
+    const base = pathName.substring(0, pathName.lastIndexOf("/blogs/"));
+    router.push(`${base}/blogs/${category}`);
+  };
+
+  return (
+    <div className="py-20 px-5">
+      <div className="mx-auto max-w-[1200px]">
+        {/* Page header */}
+        <div className="mb-12">
+          <h1 className="mb-4 text-4xl font-bold text-primary">Blog</h1>
+          <p className="text-lg text-muted-foreground">Insights, tutorials, and updates from our team.</p>
+        </div>
+
+        {/* Category tabs */}
+        <Tabs value={currentCategory} onValueChange={handleTabChange} className="mb-8">
+          <TabsList className="w-full justify-start overflow-x-auto">
+            <TabsTrigger value="all">All</TabsTrigger>
+            {categories.map((cat) => (
+              <TabsTrigger key={cat.slug} value={cat.slug}>
+                {cat.name}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+
+        {children}
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/optional/sections/blog/files/components/sections/blog-section-view.tsx

@@ -0,0 +1,171 @@
+"use client";
+import Link from "next/link";
+import { motion } from "motion/react";
+import { Button } from "@/components/ui/button";
+import type { Blog, BlogCategory } from "@/lib/blog-api";
+
+function formatDate(date: string) {
+  return new Date(date).toLocaleDateString("en-GB"); // DD/MM/YYYY
+}
+
+function CategoryBadges({ categoryIds, categories }: { categoryIds?: string[]; categories: BlogCategory[] }) {
+  if (!categoryIds?.length) return null;
+  return (
+    <div className="flex flex-wrap gap-1">
+      {categoryIds.map((id) => (
+        <Button key={id} className="h-[22px] w-fit rounded-[4px] bg-primary px-2 text-xs leading-[18px] tracking-[-0.24px] text-primary-foreground hover:bg-primary/80">
+          {categories.find((c) => c.id === id)?.name ?? id}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+function Thumbnail({ src, alt, className }: { src?: string; alt?: string; className: string }) {
+  return src ? (
+    <img src={src} className={`h-full w-full object-cover ${className}`} alt={alt ?? ""} loading="lazy" />
+  ) : (
+    <div className={`h-full w-full bg-muted ${className}`} />
+  );
+}
+
+// Desktop: featured left + 3 secondary right + optional related grid
+function BlogViewDesktop({ blogs, categories }: { blogs: Blog[]; categories: BlogCategory[] }) {
+  if (!blogs.length) return null;
+  const [featured, ...rest] = blogs;
+  return (
+    <motion.div
+      viewport={{ once: true }}
+      initial={{ opacity: 0, y: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 1.1 }}
+      className="flex flex-col gap-[128px] pb-20"
+    >
+      <div className="flex justify-between gap-[29px] max-lg:gap-5">
+        {/* Featured blog */}
+        <div className={`flex flex-col gap-2 ${rest.length === 0 ? "w-full" : "w-1/2"}`}>
+          <Link href={`/blogs/detail/${featured.slug}`} className={`w-full ${rest.length === 0 ? "h-[500px]" : "h-[320px]"}`}>
+            <Thumbnail src={featured.thumbnail} className="rounded-[16px]" />
+          </Link>
+          <div className="mt-1">
+            <CategoryBadges categoryIds={featured.categoryIds} categories={categories} />
+          </div>
+          <Link href={`/blogs/detail/${featured.slug}`} className="line-clamp-2 text-xl font-semibold leading-[24px] text-primary hover:underline">
+            {featured.name}
+          </Link>
+          <time dateTime={featured.publishedAt} className="text-sm leading-5 text-primary">
+            {formatDate(featured.publishedAt)}
+          </time>
+          <span className="mt-2 text-sm leading-5 text-primary">{featured.description}</span>
+        </div>
+
+        {/* Secondary blogs */}
+        {rest.length > 0 && (
+          <div className="flex w-1/2 flex-col gap-[30px]">
+            {rest.slice(0, 3).map((blog) => (
+              <Link key={blog.slug} href={`/blogs/detail/${blog.slug}`} className="flex gap-[30px] max-xl:gap-6 max-lg:gap-4">
+                <div className="h-[147px] w-[191px] flex-shrink-0 max-lg:h-[130px] max-lg:w-[169px]">
+                  <Thumbnail src={blog.thumbnail} className="rounded-[10px]" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <CategoryBadges categoryIds={blog.categoryIds} categories={categories} />
+                  <span className="text-xl font-semibold leading-[30px] text-primary hover:underline max-xl:text-lg max-lg:text-base">
+                    {blog.name}
+                  </span>
+                  <time dateTime={blog.publishedAt} className="text-sm leading-5 text-primary">
+                    {formatDate(blog.publishedAt)}
+                  </time>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Related: 4-col grid for blogs beyond index 4 */}
+      {blogs.length > 4 && (
+        <div className="flex flex-col gap-[32px]">
+          <span className="text-2xl font-semibold leading-8 text-primary">Related blogs</span>
+          <div className="grid grid-cols-4 gap-8">
+            {blogs.slice(4).map((blog) => (
+              <Link key={blog.slug} href={`/blogs/detail/${blog.slug}`} className="flex flex-col gap-[30px]">
+                <div className="h-[220px] w-full max-lg:h-[130px]">
+                  <Thumbnail src={blog.thumbnail} alt={blog.name} className="rounded-[16px]" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <CategoryBadges categoryIds={blog.categoryIds} categories={categories} />
+                  <span className="text-xl font-semibold leading-[30px] text-primary max-xl:text-lg max-lg:text-base">
+                    {blog.name}
+                  </span>
+                  <time dateTime={blog.publishedAt} className="text-sm leading-5 text-primary">
+                    {formatDate(blog.publishedAt)}
+                  </time>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </motion.div>
+  );
+}
+
+// Mobile: full-width featured + list of remaining
+function BlogViewMobile({ blogs, categories }: { blogs: Blog[]; categories: BlogCategory[] }) {
+  if (!blogs.length) return null;
+  const [featured, ...rest] = blogs;
+  return (
+    <motion.div
+      viewport={{ once: true }}
+      initial={{ opacity: 0, y: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 1.1 }}
+      className="flex flex-col gap-6 pb-20"
+    >
+      <div className="flex flex-col gap-2">
+        <Link href={`/blogs/detail/${featured.slug}`} className="h-[230px] w-full">
+          <Thumbnail src={featured.thumbnail} className="rounded-[16px]" />
+        </Link>
+        <div className="mt-1">
+          <CategoryBadges categoryIds={featured.categoryIds} categories={categories} />
+        </div>
+        <Link href={`/blogs/detail/${featured.slug}`} className="text-xl font-semibold leading-[30px] text-primary hover:underline max-lg:text-lg">
+          {featured.name}
+        </Link>
+        <time dateTime={featured.publishedAt} className="text-sm leading-5 text-primary">
+          {formatDate(featured.publishedAt)}
+        </time>
+        <span className="mt-2 text-sm leading-5 text-primary">{featured.description}</span>
+      </div>
+      <div className="flex flex-col gap-6">
+        {rest.map((blog) => (
+          <Link key={blog.slug} href={`/blogs/detail/${blog.slug}`} className="flex items-start gap-4">
+            <div className="h-[91px] w-[118px] flex-shrink-0">
+              <Thumbnail src={blog.thumbnail} className="rounded-[10px]" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <CategoryBadges categoryIds={blog.categoryIds} categories={categories} />
+              <span className="text-sm font-semibold leading-6 text-primary">{blog.name}</span>
+              <time dateTime={blog.publishedAt} className="text-sm leading-5 text-primary">
+                {formatDate(blog.publishedAt)}
+              </time>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </motion.div>
+  );
+}
+
+export function BlogSectionView({ blogs, categories = [] }: { blogs: Blog[]; categories?: BlogCategory[] }) {
+  return (
+    <>
+      <div className="hidden md:block">
+        <BlogViewDesktop blogs={blogs} categories={categories} />
+      </div>
+      <div className="block md:hidden">
+        <BlogViewMobile blogs={blogs} categories={categories} />
+      </div>
+    </>
+  );
+}

package/templates/nextjs/optional/sections/blog/files/components/sections/blog-section.tsx

@@ -1,175 +1,11 @@
-"use client";
 import Link from "next/link";
-import { motion } from "motion/react";
-import { Button } from "@/components/ui/button";
+import { getBlogs, getBlogCategories } from "@/lib/blog-api";
+import { BlogSectionView } from "./blog-section-view";
 
-type BlogPost = {
-  slug: string;
-  title: string;
-  description: string;
-  date: string;
-  category: string;
-  thumbnail?: string;
-};
+// Server component — fetches latest 4 blogs at render time (SSR/SSG)
+export default async function BlogSection() {
+  const [blogs, categories] = await Promise.all([getBlogs(4), getBlogCategories()]);
 
-// Replace with your CMS/API data
-const BLOG_POSTS: BlogPost[] = [
-  { slug: "post-1", title: "Getting started with our platform", description: "Learn how to set up your account and launch your first project in minutes.", date: "2024-01-15", category: "Product" },
-  { slug: "post-2", title: "Best practices for modern web apps", description: "A guide to building scalable, maintainable applications.", date: "2024-02-01", category: "Engineering" },
-  { slug: "post-3", title: "How we scaled to 10k users", description: "A behind-the-scenes look at the challenges and solutions.", date: "2024-02-20", category: "Growth" },
-  { slug: "post-4", title: "Designing for accessibility", description: "Why inclusive design benefits everyone and how to do it.", date: "2024-03-05", category: "Design" },
-  { slug: "post-5", title: "Our open-source journey", description: "What we learned shipping our first open-source library.", date: "2024-03-18", category: "Engineering" },
-  { slug: "post-6", title: "The future of edge computing", description: "How edge functions are changing how we think about latency.", date: "2024-04-01", category: "Product" },
-  { slug: "post-7", title: "Team rituals that actually work", description: "Async-first habits that helped our remote team stay aligned.", date: "2024-04-10", category: "Culture" },
-];
-
-function formatDate(date: string) {
-  return new Date(date).toLocaleDateString("en-GB"); // DD/MM/YYYY
-}
-
-function CategoryBadge({ label }: { label: string }) {
-  return (
-    <Button className="h-[22px] w-fit rounded-[4px] bg-primary text-xs leading-[18px] tracking-[-0.24px] text-primary-foreground hover:bg-primary/80">
-      {label}
-    </Button>
-  );
-}
-
-function Thumbnail({ src, alt, className }: { src?: string; alt?: string; className: string }) {
-  return src ? (
-    <img src={src} className={`h-full w-full object-cover ${className}`} alt={alt ?? ""} loading="lazy" />
-  ) : (
-    <div className={`h-full w-full bg-muted ${className}`} />
-  );
-}
-
-// Desktop: featured left + 3 secondary right + optional related grid
-function BlogViewDesktop({ posts }: { posts: BlogPost[] }) {
-  const [featured, ...rest] = posts;
-  return (
-    <motion.div
-      viewport={{ once: true }}
-      initial={{ opacity: 0, y: 40 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 1.1 }}
-      className="flex flex-col gap-[128px] pb-20"
-    >
-      <div className="flex justify-between gap-[29px] max-lg:gap-5">
-        {/* Featured post */}
-        <div className={`flex flex-col gap-2 ${rest.length === 0 ? "w-full" : "w-1/2"}`}>
-          <Link href={`/blog/${featured.slug}`} className={`w-full ${rest.length === 0 ? "h-[500px]" : "h-[320px]"}`}>
-            <Thumbnail src={featured.thumbnail} className="rounded-[16px]" />
-          </Link>
-          <div className="mt-1">
-            <CategoryBadge label={featured.category} />
-          </div>
-          <Link href={`/blog/${featured.slug}`} className="line-clamp-2 text-xl font-semibold leading-[24px] text-primary hover:underline">
-            {featured.title}
-          </Link>
-          <time dateTime={featured.date} className="text-sm leading-5 text-primary">
-            {formatDate(featured.date)}
-          </time>
-          <span className="mt-2 text-sm leading-5 text-primary">{featured.description}</span>
-        </div>
-
-        {/* Secondary posts */}
-        {rest.length > 0 && (
-          <div className="flex w-1/2 flex-col gap-[30px]">
-            {rest.slice(0, 3).map((post) => (
-              <Link key={post.slug} href={`/blog/${post.slug}`} className="flex gap-[30px] max-xl:gap-6 max-lg:gap-4">
-                <div className="h-[147px] w-[191px] flex-shrink-0 max-lg:h-[130px] max-lg:w-[169px]">
-                  <Thumbnail src={post.thumbnail} className="rounded-[10px]" />
-                </div>
-                <div className="flex flex-col gap-2">
-                  <CategoryBadge label={post.category} />
-                  <span className="text-xl font-semibold leading-[30px] text-primary hover:underline max-xl:text-lg max-lg:text-base">
-                    {post.title}
-                  </span>
-                  <time dateTime={post.date} className="text-sm leading-5 text-primary">
-                    {formatDate(post.date)}
-                  </time>
-                </div>
-              </Link>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Related: 4-col grid for posts beyond index 4 */}
-      {posts.length > 4 && (
-        <div className="flex flex-col gap-[32px]">
-          <span className="text-2xl font-semibold leading-8 text-primary">Related posts</span>
-          <div className="grid grid-cols-4 gap-8">
-            {posts.slice(4).map((post) => (
-              <Link key={post.slug} href={`/blog/${post.slug}`} className="flex flex-col gap-[30px]">
-                <div className="h-[220px] w-full max-lg:h-[130px]">
-                  <Thumbnail src={post.thumbnail} alt={post.title} className="rounded-[16px]" />
-                </div>
-                <div className="flex flex-col gap-2">
-                  <CategoryBadge label={post.category} />
-                  <span className="text-xl font-semibold leading-[30px] text-primary max-xl:text-lg max-lg:text-base">
-                    {post.title}
-                  </span>
-                  <time dateTime={post.date} className="text-sm leading-5 text-primary">
-                    {formatDate(post.date)}
-                  </time>
-                </div>
-              </Link>
-            ))}
-          </div>
-        </div>
-      )}
-    </motion.div>
-  );
-}
-
-// Mobile: full-width featured + horizontal list of remaining
-function BlogViewMobile({ posts }: { posts: BlogPost[] }) {
-  const [featured, ...rest] = posts;
-  return (
-    <motion.div
-      viewport={{ once: true }}
-      initial={{ opacity: 0, y: 40 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 1.1 }}
-      className="flex flex-col gap-6 pb-20"
-    >
-      <div className="flex flex-col gap-2">
-        <Link href={`/blog/${featured.slug}`} className="h-[230px] w-full">
-          <Thumbnail src={featured.thumbnail} className="rounded-[16px]" />
-        </Link>
-        <div className="mt-1">
-          <CategoryBadge label={featured.category} />
-        </div>
-        <Link href={`/blog/${featured.slug}`} className="text-xl font-semibold leading-[30px] text-primary hover:underline max-lg:text-lg">
-          {featured.title}
-        </Link>
-        <time dateTime={featured.date} className="text-sm leading-5 text-primary">
-          {formatDate(featured.date)}
-        </time>
-        <span className="mt-2 text-sm leading-5 text-primary">{featured.description}</span>
-      </div>
-      <div className="flex flex-col gap-6">
-        {rest.map((post) => (
-          <Link key={post.slug} href={`/blog/${post.slug}`} className="flex items-start gap-4">
-            <div className="h-[91px] w-[118px] flex-shrink-0">
-              <Thumbnail src={post.thumbnail} className="rounded-[10px]" />
-            </div>
-            <div className="flex flex-col gap-2">
-              <CategoryBadge label={post.category} />
-              <span className="text-sm font-semibold leading-6 text-primary">{post.title}</span>
-              <time dateTime={post.date} className="text-sm leading-5 text-primary">
-                {formatDate(post.date)}
-              </time>
-            </div>
-          </Link>
-        ))}
-      </div>
-    </motion.div>
-  );
-}
-
-export default function BlogSection() {
   return (
     <section id="blog" className="py-24">
       <div className="content-container">
@@ -179,11 +15,14 @@ export default function BlogSection() {
             Insights, tutorials, and updates from our team.
           </p>
         </div>
-        <div className="hidden md:block">
-          <BlogViewDesktop posts={BLOG_POSTS} />
-        </div>
-        <div className="block md:hidden">
-          <BlogViewMobile posts={BLOG_POSTS} />
+        <BlogSectionView blogs={blogs} categories={categories} />
+        <div className="mt-10 text-center">
+          <Link
+            href="/blogs/all"
+            className="inline-flex items-center gap-1 text-sm font-medium text-primary underline-offset-4 hover:underline"
+          >
+            View all blogs →
+          </Link>
         </div>
       </div>
     </section>

package/templates/nextjs/optional/sections/blog/files/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+"use client";
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== "undefined" && window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches
+  );
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return isMobile;
+}