Merge pull request #248 from ANI2707/bug/mobilenavgap

Extra gap reduced between mobile nav and logo component
VanshKing30 · Jun 7, 2024 · ea11511 · ea11511
2 parents 3c63fc9 + 3ea1005
commit ea11511
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 17 deletions.
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -75,7 +75,9 @@ const Navbar = () => {
             exit={{ opacity: 0, y: -50 }}
             className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center"
           >
-            <div className="w-[100%] bg-[#282c34] px-[20%] pt-2 pb-3 space-y-1 mt-3 dark:bg-teal-900">
+
+            <div className="w-[100%] bg-[#282c34] px-[20%] pt-2 pb-3 space-y-1 mt-1 dark:bg-teal-900">
+
               <MobileNavItem to="/home">Home</MobileNavItem>
               <MobileNavItem to="/about">About us</MobileNavItem>
               <MobileNavItem to="/news">News</MobileNavItem>

diff --git a/src/components/NewsCard.jsx b/src/components/NewsCard.jsx
@@ -1,21 +1,40 @@
 import React from "react";
 
 function NewsCard({ article }) {
-    const { title, description, source, publishedAt, url, image } = article;
-
-    return (
-      <div className="bg-white p-4 shadow-lg rounded cursor-pointer transition-transform transform hover:-translate-y-2">
-        <div className="card-header">
-          <img src={image} alt="news-image" className="w-full h-40 object-cover" />
-        </div>
-        <div className="card-content">
-          <h3 className="text-xl font-semibold">{title}</h3>
-          <h6 className="text-gray-600 text-sm">{`${source.name} • ${new Date(publishedAt).toLocaleString()}`}</h6>
-          <p className="text-gray-700 mt-2">{description}</p>
-        </div>
-        <a href={url} target="_blank" rel="noopener noreferrer" className="absolute top-0 left-0 w-full h-full"></a>
+  const { title, description, source, publishedAt, url, image } = article;
+  console.log(image)
+
+  const defaultImage =
+    "https://images.7news.com.au/publication/C-14905251/b0baa6a78bc17d1185f03003c8f7989917db9b9f-16x9-x0y75w800h450.jpg?imwidth=1200";
+
+  return (
+    <div className="bg-white p-4 shadow-lg rounded cursor-pointer transition-transform transform hover:-translate-y-2">
+      <div className="card-header">
+
+          <img
+            src={image || defaultImage}
+            alt="news-image"
+            className="w-full h-40 object-cover"
+          />
+
+
+
+      </div>
+      <div className="card-content">
+        <h3 className="text-xl font-semibold">{title}</h3>
+        <h6 className="text-gray-600 text-sm">{`${source.name} • ${new Date(
+          publishedAt
+        ).toLocaleString()}`}</h6>
+        <p className="text-gray-700 mt-2">{description}</p>
       </div>
-    );
-  }
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="absolute top-0 left-0 w-full h-full"
+      ></a>
+    </div>
+  );
+}
 
-  export default NewsCard;
+export default NewsCard;