feat: rss feed links on the site

design is my passion vai miten se meni

app/syslog/page.tsx

@@ -6,17 +6,25 @@ import { Footer } from '@/components/Footer/Footer';
 import { PostsGrid } from '@/components/PostsGrid/PostsGrid';
 import { H2 } from '@/components/Title/Title';
 import { CapsuleButton } from '@/components/Button/CapsuleButton';
+import { FaRss } from "react-icons/fa";
 import MorePosts from './MorePosts';
 import posts from '@/utils/posts';
 import Separator from '@/components/Separator/Separator';
 import { Metadata } from 'next';
+import { NavigateLink } from '@/components/NavigateLink/NavigateLink';
 
 const perPage = 10;
 
 export const metadata: Metadata = {
   title: "Syslog",
   description: "Testausserverin jäsenten kirjoittamia artikkeleja teknologiasta"
 }
+
+function RssIcon() {
+  return (
+    <FaRss size={16}/>
+  )
+}
 export default async function Page() {
   const list = await posts.list(0, perPage - 1);
   const { posts: basePosts } = list;
@@ -40,7 +48,10 @@ export default async function Page() {
           <H2>Testausauton uusimmat</H2>
           <PostsGrid posts={testausautoRecentPosts}/>
         </Content>
-
+        <Content>
+          <NavigateLink href="https://testausserveri.fi/syslog/rss.xml"><RssIcon /> Syslogin RSS-syöte</NavigateLink>
+          <NavigateLink href="https://testausauto.fi/rss"><RssIcon /> Testausauton RSS-syöte</NavigateLink>
+        </Content>
       <Footer />
     </div>
   )

components/NavigateLink/NavigateLink.module.css

@@ -6,15 +6,15 @@
     margin-bottom: 1em;
 }
 
-.navigatelink svg {
+.navigatelink svg:nth-last-child(1) {
     vertical-align: middle;
     font-size: 1.4em;
     margin-left: 0.4em;
     transform: translateY(-1.5px);
     transition: margin-left 0.2s ease-out;
 }
 
-.navigatelink:hover svg {
+.navigatelink:hover svg:nth-last-child(1) {
     margin-left: 0.8em !important;
     color: white;
 }

components/NavigateLink/NavigateLink.tsx

@@ -1,15 +1,16 @@
 import Link from 'next/link';
 import styles from './NavigateLink.module.css'
 import { HiOutlineArrowNarrowRight } from "react-icons/hi";
-import { PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
 type NavigateLinkProps = PropsWithChildren<{
-    href: string
+    href: string,
+    CustomIcon?: FC
 }>
 
-export function NavigateLink({ href, children }: NavigateLinkProps) {
+export function NavigateLink({ href, CustomIcon, children }: NavigateLinkProps) {
     return <Link href={href} className={styles.navigatelink}>
         {children}
-        <HiOutlineArrowNarrowRight />
+        {CustomIcon ? <CustomIcon /> : <HiOutlineArrowNarrowRight />}
     </Link>;
 }