fix and polish the return button

ui/app/news/[id]/layout.tsx

@@ -1,10 +1,15 @@
 import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
 
-export default function NewsLayout({ children }: { children: React.ReactNode }) {
+export default function NewsDetailLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="max-w-4xl mx-auto p-4">
-      <Link href="/" className="text-blue-500 hover:underline mb-4 inline-block">
+      <Link
-        &larr; Back to News List
+        href="/news"
+        className="inline-flex items-center mb-4 text-sm font-medium text-black dark:text-white hover:underline"
+      >
+        <ArrowLeft className="w-4 h-4 mr-1" />
+        Back
       </Link>
       {children}
     </div>

ui/app/news/layout.tsx

@@ -1,12 +1,5 @@
-import { Metadata } from "next";
 import React from "react";
 
-export const metadata: Metadata = {
+export default function NewsLayout({ children }: { children: React.ReactNode }) {
-  title: "News - Perplexica",
+  return <div className="max-w-4xl mx-auto p-4">{children}</div>;
-};
+}
-
-const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <div>{children}</div>;
-};
-
-export default Layout;

ui/components/ContextItem.tsx

@@ -29,12 +29,12 @@ const ContextItem: React.FC<ContextItemProps> = ({ item }) => {
         />
       )}
       <p className="text-black dark:text-white">{item.description}</p>
-      <div className="text-sm text-gray-500 dark:text-gray-400 mt-2">
-        {item.provider[0].name} | {new Date(item.datePublished).toLocaleDateString()}
-      </div>
       <a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
         Read more
       </a>
+      <div className="text-sm text-gray-500 dark:text-gray-400 mt-2">
+        {item.provider[0].name} | {new Date(item.datePublished).toLocaleDateString()}
+      </div>
     </div>
   );
 };

ui/components/NewsPage.tsx

@@ -69,12 +69,12 @@ const NewsPage = () => {
             key={item.id}
             className="flex flex-col space-y-4 border-b border-white-200 dark:border-dark-200 py-6 lg:mx-4"
           >
-            <Link href={`/news/${item.id}`}>
+            <Link href={`/news/${item.id}`} className="cursor-pointer">
-              <h3 className="text-black dark:text-white lg:text-xl font-medium hover:underline cursor-pointer">
+              <h3 className="text-black dark:text-white lg:text-xl font-medium hover:underline">{item.title}</h3>
-                {item.title}
+              <p className="text-black/70 dark:text-white/70 text-sm hover:text-black dark:hover:text-white">
-              </h3>
+                {item.summary}
+              </p>
             </Link>
-            <p className="text-black/70 dark:text-white/70 text-sm">{item.summary}</p>
           </div>
         ))}
       </div>