rss icon added

app/(root)/blog/[slug]/page.tsx

@@ -2,7 +2,7 @@ import { client, urlFor } from "@/lib/sanity";
 import { PortableText, PortableTextComponents } from "@portabletext/react";
 import Image from "next/image";
 import Link from "next/link";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, Rss } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
 import { notFound } from "next/navigation";
 import { Metadata } from "next";
@@ -16,6 +16,7 @@ import CopyButton from "@/components/shared/copyButton";
 import "./_styles/prism-twilight.css";
 import "./_styles/prism.twilight.min.css";
 import PrismLoader from "@/components/loader/prismLoader";
+import { Button } from "@/components/ui/button";
 
 async function getData(slug: string) {
 	const query = `
@@ -145,13 +146,26 @@ export default async function BlogSlugArticle({
 	return (
 		<>
 			<section className="max-w-5xl container mx-auto py-8 md:py-28 flex flex-col items-center px-4">
-				<Link
-					href="/blog?page=1"
-					className="self-start mb-4 text-primary hover:text-green-300 transition-all flex items-center"
-				>
-					<ArrowLeft className="mr-2" />
-					Back to Blog
-				</Link>
+				<div className="w-full mx-auto flex-center">
+					<Link
+						href="/blog"
+						className="group text-primary transition-all flex items-center"
+					>
+						<Button variant={"ghost"} size={"lg"} className="mx-0 px-2 ">
+							<ArrowLeft className="mr-2 w-5 h-5 group-hover:translate-x-1 transition-all" />
+							Back
+						</Button>
+					</Link>
+					<Link href="/rss.xml" className="ml-auto">
+						<Button
+							variant={"link"}
+							size={"lg"}
+							className="mx-0 px-2 text-accent-foreground"
+						>
+							<Rss className="w-5 h-5 mr-1" /> Subscribe to RSS
+						</Button>
+					</Link>
+				</div>
 				<header className="text-start mb-8 w-full">
 					{data.titleImage && (
 						<div className="mb-2">

app/(root)/blog/page.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import { Metadata } from "next";
 import BlogCards from "@/components/cards/BlogCards";
+import { Rss } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
 export const metadata: Metadata = {
 	title: "Blog - SVRJS",
@@ -44,9 +47,17 @@ const BlogPage = async ({
 			id="blog"
 			className="wrapper container py-24 md:py-28 gap-2 flex-center flex-col"
 		>
-			<h1 className="text-3xl md:text-5xl mb-12 pb-1 md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+			<h1 className="text-3xl md:text-5xl mb-3 pb-1 md:pb-2 font-bold text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
 				SVRJS Blog Post
 			</h1>
+			<p className="text-muted-foreground flex-center mb-2">
+				Stay updated with our latest blog posts by subscribing to our
+				<Link href="/rss.xml">
+					<Button variant={"link"} className="mx-0 px-2">
+						<Rss className="w-5 h-5 mr-1" /> RSS feed
+					</Button>
+				</Link>
+			</p>
 			<BlogCards searchParams={searchParams} />
 		</section>
 	);