Instagram posts are side by side and proper look

crank-fan-sites · Apr 10, 2024 · 27d1efa · 27d1efa
1 parent 266d7ca
commit 27d1efa
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 81 deletions.
diff --git a/components/front_page/instagram-post.tsx b/components/front_page/instagram-post.tsx
@@ -1,22 +1,23 @@
 import type { NextPage } from "next";
 
 const InstagramPost: NextPage = (props) => {
-  const { date, url, picture, text } = props;
+  const { url, picture, text } = props;
+  const hasText = text && text.trim().length > 0;
   return (
-    <div>
-      <div className="relative w-[300px] h-[200px]">
-        <a href={url}>
+    <div className="relative h-auto">
+      <div className="relative h-[200px] overflow-hidden">
+        <a href={url} className="block w-full h-full" target="_blank">
           <img
             src={picture}
             alt="Instagram Post"
-            layout="fill"
-            objectFit="cover"
-            className=""
+            className="object-cover w-full h-full"
           />
         </a>
       </div>
-      <span>{date}</span>
-      <span>{text}</span>
+      {/* Only render this div if there is text */}
+      {hasText && (
+        <div className="block overflow-y-auto h-[100px] mb-2">{text}</div>
+      )}
     </div>
   );
 };

diff --git a/components/front_page/instagram.tsx b/components/front_page/instagram.tsx
@@ -18,11 +18,10 @@ const InstagramPosts: NextPage = () => {
   }, []);
 
   return (
-    <div>
+    <div className="flex flex-wrap -m-2">
       {media.map((item, index) => (
-        <div>
+        <div key={index} className="w-full p-2 sm:w-1/2 md:w-1/3 lg:w-1/4">
           <InstagramPost
-            date={item.date}
             url={item.url}
             text={item.text}
             picture={item.picture}

diff --git a/components/front_page/youtube-playlist.tsx b/components/front_page/youtube-playlist.tsx
@@ -41,60 +41,3 @@ const YoutubePlaylist: NextPage = () => {
 };
 
 export default YoutubePlaylist;
-
-// const YoutubePlaylist: NextPage = () => {
-//   const router = useRouter();
-//   const yt = useRef(null); // Initialize the ref
-//   const channelID = "UC7u4D4F6H1itVNM9wHe6PCw";
-//   var reqURL = "https://www.youtube.com/feeds/videos.xml?channel_id=";
-
-//   async function getYTJson() {
-//     try {
-//       const reqURL = "https://www.youtube.com/feeds/videos.xml?channel_id=";
-//       const channelID = "UC7u4D4F6H1itVNM9wHe6PCw";
-//       const response = await fetch(
-//         `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(
-//           reqURL + channelID
-//         )}`
-//       );
-//       if (!response.ok) {
-//         throw new Error(`HTTP error! status: ${response.status}`);
-//       }
-//       const responseJson = await response.json();
-//       console.log("Response JSON:", responseJson); // Debug: Log the response JSON
-
-//       if (responseJson.items && responseJson.items.length > 0) {
-//         const link = responseJson.items[0].link;
-//         const id = link.substr(link.indexOf("=") + 1);
-//         console.log("Video ID:", id); // Debug: Log the video ID
-
-//         if (yt.current) {
-//           yt.current.src = `https://youtube.com/embed/${id}?controls=0&showinfo=0&rel=0`;
-//         }
-//       } else {
-//         console.error("No items found in the response");
-//       }
-//     } catch (error) {
-//       console.error("getYTJson error:", error);
-//     }
-//   }
-
-//   // Call getYTJson when the component mounts
-//   useEffect(() => {
-//     getYTJson();
-//   }, []);
-
-//   return (
-//     <iframe
-//       ref={yt} // Assign the ref to the iframe
-//       id="youtube_video"
-//       width="600"
-//       height="340"
-//       frameBorder="0"
-//       allowFullScreen
-//       title="Unelectable Latest YouTube Video"
-//     ></iframe>
-//   );
-// };
-
-// export default YoutubePlaylist;
diff --git a/next.config.js b/next.config.js
@@ -10,26 +10,27 @@ const nextConfig = {
     ignoreBuildErrors: true,
   },
   images: {
+    domains: ["scontent-lga3-2.cdninstagram.com"],
     remotePatterns: [
       {
-        protocol: 'http',
-        hostname: 'localhost',
-        port: '1337',
-        pathname: '/uploads/**',
+        protocol: "http",
+        hostname: "localhost",
+        port: "1337",
+        pathname: "/uploads/**",
       },
       {
-        protocol: 'https',
-        hostname: 'buddyhead-app-xvgeb.ondigitalocean.app',
-        port: '1337',
-        pathname: '/**',
+        protocol: "https",
+        hostname: "buddyhead-app-xvgeb.ondigitalocean.app",
+        port: "1337",
+        pathname: "/**",
       },
       {
-        protocol: 'https',
-        hostname: 'live.staticflickr.com',
+        protocol: "https",
+        hostname: "live.staticflickr.com",
       },
       {
-        protocol: 'https',
-        hostname: 'live.amazonaws.com',
+        protocol: "https",
+        hostname: "live.amazonaws.com",
       },
     ],
   },