feat: Modify the layout of news items Add the function of expanding or contracting after clicking on them

ui/app/globals.css

@@ -10,4 +10,12 @@
   .overflow-hidden-scrollable::-webkit-scrollbar {
     display: none;
   }
+  .line-clamp-3-5  {
+    display: -webkit-box;
+    -webkit-line-clamp: 4; 
+    -webkit-box-orient: vertical; 
+    overflow: hidden;
+  }
+  
 }
+

ui/components/ContextItem.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Image from "next/image";
 import { ReactMarkdown } from "@/components/Markdown";
-
 interface ContextItemProperties {
   item: {
     name: string;
@@ -22,49 +21,60 @@ interface ContextItemProperties {
     };
   };
 }
-
 const ContextItem: React.FC<ContextItemProperties> = ({ item }) => {
   return (
-    <div className="border p-4 rounded-lg mb-4 dark:border-gray-700">
+    <a
-      <h4 className="font-bold text-black dark:text-white">{item.name}</h4>
+      href={item.url}
-      {item.image && (
+      target="_blank"
-        <Image
+      rel="noopener noreferrer"
-          src={item.image.contentUrl}
+      className="block no-underline text-black dark:text-white "
-          alt={item.name}
+    >
-          width={item.image.thumbnail.width}
+      <div
-          height={item.image.thumbnail.height}
+        className="bg-gray-200 dark:bg-slate-900 rounded-lg px-6 py-2 ring-1 items-stretch h-56
-          className="my-2 rounded"
+      ring-slate-900/5 shadow-xl flex flex-row cursor-pointer hover:scale-95 transition-transform duration-300"
-        />
-      )}
-      <div className="text-black dark:text-white">
-        <ReactMarkdown text={item.description} />
-      </div>
-      <a
-        href={item.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-black dark:text-white hover:underline inline-block mt-2"
       >
-        Read more
+        <div className="w-40 h-40 flex-shrink-0">
-      </a>
+          {/* div for image if the link does not exist use the placeholder image */}
-      <div className="mt-2">
+          {!item.image && (
-        <div className="flex items-center text-sm text-gray-700 dark:text-gray-300">
+            <img
-          {item.provider[0].image && (
+              src={"https://via.placeholder.com/150"}
-            <Image
+              alt={"placeholder"}
-              src={item.provider[0].image.thumbnail.contentUrl}
+              className="rounded w-36 h-36 object-cover"
-              alt={`${item.provider[0].name} logo`}
-              width={16}
-              height={16}
-              className="mr-2"
             />
           )}
-          {item.provider[0].name}
+          {item.image && <img src={item.image.contentUrl} alt={item.name} className="rounded w-36 h-36 object-cover" />}
         </div>
-        <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+        <div className="flex flex-col items-stretch relative h-48">
-          {new Date(item.datePublished).toLocaleDateString()}
+          {/* div for other text info */}
+          <div className="flex justify-start max-w-xl">
+            <h4 className="font-bold text-white truncate">{item.name}</h4>
+          </div>
+
+          {/* Content container with controlled overflow */}
+          <div className="max-32">
+            <ReactMarkdown text={item.description} className="text-slate-500 dark:text-slate-40 line-clamp-3" />
+          </div>
+
+          {/* Absolute positioned provider info */}
+          <div className="absolute bottom-3 right-0 text-sm text-gray-700 dark:text-gray-300 flex items-end">
+            <div className="absolute right-40 top-0 bottom-0 w-40 bg-gradient-to-r from-transparent to-slate-900 pointer-events-none"></div>
+            {/* <div className="ml-auto text-sm text-gray-700 dark:text-gray-300 flex items-end"> */}
+            {item.provider[0].image && (
+              <Image
+                src={item.provider[0].image.thumbnail.contentUrl}
+                alt={`${item.provider[0].name} logo`}
+                width={16}
+                height={16}
+              />
+            )}
+            <span className="dark:bg-slate-900">{item.provider[0].name}</span>
+            <span className="ml-2 text-xs text-gray-500 dark:text-gray-400 dark:bg-slate-900">
+              {new Date(item.datePublished).toLocaleDateString()}
+            </span>
+          </div>
         </div>
       </div>
-    </div>
+    </a>
   );
 };
 

ui/components/ExpandableItems.tsx

@@ -0,0 +1,62 @@
+"use client";
+import React, { useState } from "react";
+import ContextItem from "./ContextItem";
+
+interface ContextItemType {
+  name: string;
+  url: string;
+  description: string;
+  provider: {
+    name: string;
+    image?: {
+      thumbnail: {
+        contentUrl: string;
+      };
+    };
+  }[];
+  datePublished: string;
+  image?: {
+    contentUrl: string;
+    thumbnail: {
+      contentUrl: string;
+      width: number;
+      height: number;
+    };
+  };
+  article?: string;
+  score?: number;
+}
+
+interface ExpandableItemsProperties {
+  context: ContextItemType[];
+}
+
+const ExpandableItems: React.FC<ExpandableItemsProperties> = ({ context }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const handleShowMore = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <div>
+      <button
+        onClick={handleShowMore}
+        className="transition duration-300 ease-in-out transform hover:scale-105  text-white font-bold py-2 px-4 rounded mb-4"
+      >
+        {expanded ? "Show Less" : `Show More (${context.length})`}
+      </button>
+      <div className="mb-4">
+        <ContextItem item={context[0]} />
+      </div>
+      {expanded &&
+        context.slice(1).map((item, index) => (
+          <div key={index} className="mb-4 last:mb-0">
+            <ContextItem item={item} />
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default ExpandableItems;

ui/components/NewsDetail.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ContextItem from "./ContextItem";
-
+import ExpandableItems from "./ExpandableItems";
 interface ContextItemType {
   name: string;
   url: string;
@@ -47,9 +47,7 @@ const NewsDetail: React.FC<NewsDetailProperties> = ({ news }) => {
           <p className="text-black dark:text-white">{section.content}</p>
           <div className="mt-4">
             <h3 className="text-black dark:text-white">Related Context:</h3>
-            {section.context.map((item, index_) => (
+            <ExpandableItems context={section.context} />
-              <ContextItem key={index_} item={item} />
-            ))}
           </div>
         </section>
       ))}