Normalize all thee templates to make thumbnails look like thumbnails despite image size

src/components/content/carousels/templates/CourseTemplate.js

@@ -1,78 +1,74 @@
-import React, {use, useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions";
 import { formatTimestampToHowLongAgo } from "@/utils/time";
 import { useImageProxy } from "@/hooks/useImageProxy";
 import { useNostr } from "@/hooks/useNostr";
-import {getSatAmountFromInvoice} from "@/utils/lightning";
+import { getSatAmountFromInvoice } from "@/utils/lightning";
 
 const CourseTemplate = (course) => {
-    const [zaps, setZaps] = useState([]);
-    const [zapAmount, setZapAmount] = useState(null);
-    const router = useRouter();
-    const { returnImageProxy } = useImageProxy();
-    const { width, height } = useResponsiveImageDimensions();
-    const { fetchZapsForEvent } = useNostr();
+  const [zaps, setZaps] = useState([]);
+  const [zapAmount, setZapAmount] = useState(null);
+  const router = useRouter();
+  const { returnImageProxy } = useImageProxy();
+  const { fetchZapsForEvent } = useNostr();
 
-    useEffect(() => {
-        const fetchZaps = async () => {
-            try {
-                const zaps = await fetchZapsForEvent(course.id);
-                setZaps(zaps);
-            } catch (error) {
-                console.error('Error fetching zaps:', error);
-            }
-        };
-        fetchZaps();
-    }, [fetchZapsForEvent, course]);
+  useEffect(() => {
+    const fetchZaps = async () => {
+      try {
+        const zaps = await fetchZapsForEvent(course.id);
+        setZaps(zaps);
+      } catch (error) {
+        console.error("Error fetching zaps:", error);
+      }
+    };
+    fetchZaps();
+  }, [fetchZapsForEvent, course]);
 
-    useEffect(() => {
-        if (zaps.length > 0) {
-            zaps.map((zap) => {
-                const bolt11Tag = zap.tags.find(tag => tag[0] === 'bolt11');
-                const invoice = bolt11Tag ? bolt11Tag[1] : null;
-
-                if (invoice) {
-                    const amount = getSatAmountFromInvoice(invoice);
-                    setZapAmount(zapAmount + amount);
-                }
-            })   
+  useEffect(() => {
+    if (zaps.length > 0) {
+      zaps.map((zap) => {
+        const bolt11Tag = zap.tags.find((tag) => tag[0] === "bolt11");
+        const invoice = bolt11Tag ? bolt11Tag[1] : null;
+        if (invoice) {
+          const amount = getSatAmountFromInvoice(invoice);
+          setZapAmount(zapAmount + amount);
         }
-    }, [zaps]);
+      });
+    }
+  }, [zaps]);
 
-    return (
-        <div style={{width: width < 768 ? "auto" : width}} onClick={() => router.push(`/details/${course.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg">
-            <div style={{maxWidth: width, minWidth: width}} className="max-tab:h-auto max-mob:h-auto">
-                <Image
-                    alt="resource thumbnail"
-                    src={returnImageProxy(course.image)}
-                    quality={100}
-                    width={width}
-                    height={height}
-                    className="w-full h-full object-cover object-center rounded-md"
-                />
-                <div className='flex flex-col justify-start'>
-                    <h4 className="mb-1 font-bold text-2xl font-blinker">{course.title}</h4>
-                    <p style={{
-                        display: '-webkit-box',
-                        WebkitBoxOrient: 'vertical',
-                        WebkitLineClamp: 3,
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'prewrap',
-                        font: '400 1rem/1.5 Blinker, sans-serif'
-                    }}>
-                        {course.summary}
-                    </p>
-                    <div className="flex flex-row justify-between w-full">
-                        <p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(course.published_at)}</p>
-                        <p className="pr-2"><i className="pi pi-bolt"></i> {zapAmount}</p>
-                    </div>
-                </div>
-            </div>
+  return (
+    <div
+      onClick={() => router.push(`/details/${course.id}`)}
+      className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"
+    >
+      <div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
+        <Image
+          alt="course thumbnail"
+          src={returnImageProxy(course.image)}
+          quality={100}
+          layout="fill"
+          objectFit="cover"
+          className="rounded-md"
+        />
+      </div>
+      <div className="flex flex-col justify-start w-full mt-4">
+        <h4 className="mb-1 font-bold text-lg font-blinker line-clamp-2">
+          {course.title}
+        </h4>
+        <p className="text-sm text-gray-500 line-clamp-2">{course.summary}</p>
+        <div className="flex flex-row justify-between items-center mt-2">
+          <p className="text-xs text-gray-400">
+            {formatTimestampToHowLongAgo(course.published_at)}
+          </p>
+          <p className="text-xs">
+            <i className="pi pi-bolt"></i> {zapAmount}
+          </p>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default CourseTemplate;

src/components/content/carousels/templates/ResourceTemplate.js

@@ -1,82 +1,74 @@
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions";
 import { formatTimestampToHowLongAgo } from "@/utils/time";
 import { useImageProxy } from "@/hooks/useImageProxy";
 import { useNostr } from "@/hooks/useNostr";
 import { getSatAmountFromInvoice } from "@/utils/lightning";
 
 const ResourceTemplate = (resource) => {
-    const [zaps, setZaps] = useState([]);
-    const [zapAmount, setZapAmount] = useState(null);
-    const router = useRouter();
-    const { returnImageProxy } = useImageProxy();
-    const { width, height } = useResponsiveImageDimensions();
+  const [zaps, setZaps] = useState([]);
+  const [zapAmount, setZapAmount] = useState(null);
+  const router = useRouter();
+  const { returnImageProxy } = useImageProxy();
+  const { fetchZapsForEvent } = useNostr();
 
-    const { fetchZapsForEvent } = useNostr();
+  useEffect(() => {
+    const fetchZaps = async () => {
+      try {
+        const zaps = await fetchZapsForEvent(resource.id);
+        setZaps(zaps);
+      } catch (error) {
+        console.error("Error fetching zaps:", error);
+      }
+    };
+    fetchZaps();
+  }, [fetchZapsForEvent, resource]);
 
-    useEffect(() => {
-        const fetchZaps = async () => {
-            try {
-                const zaps = await fetchZapsForEvent(resource.id);
-                setZaps(zaps);
-            } catch (error) {
-                console.error('Error fetching zaps:', error);
-            }
-        };
-        fetchZaps();
-    }, [fetchZapsForEvent, resource]);
-
-    useEffect(() => {
-        if (zaps.length > 0) {
-            zaps.map((zap) => {
-                const bolt11Tag = zap.tags.find(tag => tag[0] === 'bolt11');
-                const invoice = bolt11Tag ? bolt11Tag[1] : null;
-
-                if (invoice) {
-                    const amount = getSatAmountFromInvoice(invoice);
-                    setZapAmount(zapAmount + amount);
-                }
-            })
+  useEffect(() => {
+    if (zaps.length > 0) {
+      zaps.map((zap) => {
+        const bolt11Tag = zap.tags.find((tag) => tag[0] === "bolt11");
+        const invoice = bolt11Tag ? bolt11Tag[1] : null;
+        if (invoice) {
+          const amount = getSatAmountFromInvoice(invoice);
+          setZapAmount(zapAmount + amount);
         }
-    }, [zaps]);
+      });
+    }
+  }, [zaps]);
 
-    return (
-        <div style={{ width: width < 768 ? "auto" : width }} onClick={() => router.push(`/details/${resource.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md">
-            <div style={{ maxWidth: width, minWidth: width }} className="max-tab:h-auto max-mob:h-auto">
-                <Image
-                    alt="resource thumbnail"
-                    src={returnImageProxy(resource.image)}
-                    quality={100}
-                    width={width}
-                    height={height}
-                    className="w-full object-cover object-center rounded-md"
-                />
-                <div className='flex flex-col justify-start min-h-max'>
-                    <h4 className="mb-1 font-bold text-2xl font-blinker">{resource.title}</h4>
-                    <div style={{ height: '90px', display: 'flex', alignItems: 'flex-start' }}>
-                        <p style={{
-                            display: '-webkit-box',
-                            WebkitBoxOrient: 'vertical',
-                            WebkitLineClamp: 3,
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'normal',
-                            font: '400 1rem/1.5 Blinker, sans-serif',
-                            flexGrow: 1
-                        }}>
-                            {resource.summary}
-                        </p>
-                    </div>
-                    <div className="flex flex-row justify-between w-full">
-                        <p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(resource.published_at)}</p>
-                        <p className="pr-2"><i className="pi pi-bolt"></i> {zapAmount}</p>
-                    </div>
-                </div>
-            </div>
+  return (
+    <div
+      onClick={() => router.push(`/details/${resource.id}`)}
+      className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"
+    >
+      <div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
+        <Image
+          alt="resource thumbnail"
+          src={returnImageProxy(resource.image)}
+          quality={100}
+          layout="fill"
+          objectFit="cover"
+          className="rounded-md"
+        />
+      </div>
+      <div className="flex flex-col justify-start w-full mt-4">
+        <h4 className="mb-1 font-bold text-lg font-blinker line-clamp-2">
+          {resource.title}
+        </h4>
+        <p className="text-sm text-gray-500 line-clamp-2">{resource.summary}</p>
+        <div className="flex flex-row justify-between items-center mt-2">
+          <p className="text-xs text-gray-400">
+            {formatTimestampToHowLongAgo(resource.published_at)}
+          </p>
+          <p className="text-xs">
+            <i className="pi pi-bolt"></i> {zapAmount}
+          </p>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default ResourceTemplate;

src/components/content/carousels/templates/WorkshopTemplate.js

@@ -1,79 +1,74 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions";
 import { formatTimestampToHowLongAgo } from "@/utils/time";
 import { useImageProxy } from "@/hooks/useImageProxy";
 import { useNostr } from "@/hooks/useNostr";
-import {getSatAmountFromInvoice} from "@/utils/lightning";
+import { getSatAmountFromInvoice } from "@/utils/lightning";
 
 const WorkshopTemplate = (workshop) => {
-    const [zaps, setZaps] = useState([]);
-    const [zapAmount, setZapAmount] = useState(null);
-    const router = useRouter();
-    const { returnImageProxy } = useImageProxy();
-    const { width, height } = useResponsiveImageDimensions();
+  const [zaps, setZaps] = useState([]);
+  const [zapAmount, setZapAmount] = useState(null);
+  const router = useRouter();
+  const { returnImageProxy } = useImageProxy();
+  const { fetchZapsForEvent } = useNostr();
 
-    const { fetchZapsForEvent } = useNostr();
+  useEffect(() => {
+    const fetchZaps = async () => {
+      try {
+        const zaps = await fetchZapsForEvent(workshop.id);
+        setZaps(zaps);
+      } catch (error) {
+        console.error("Error fetching zaps:", error);
+      }
+    };
+    fetchZaps();
+  }, [fetchZapsForEvent, workshop]);
 
-    useEffect(() => {
-        const fetchZaps = async () => {
-            try {
-                const zaps = await fetchZapsForEvent(workshop.id);
-                setZaps(zaps);
-            } catch (error) {
-                console.error('Error fetching zaps:', error);
-            }
-        };
-        fetchZaps();
-    }, [fetchZapsForEvent, workshop]);
-
-    useEffect(() => {
-        if (zaps.length > 0) {
-            zaps.map((zap) => {
-                const bolt11Tag = zap.tags.find(tag => tag[0] === 'bolt11');
-                const invoice = bolt11Tag ? bolt11Tag[1] : null;
-
-                if (invoice) {
-                    const amount = getSatAmountFromInvoice(invoice);
-                    setZapAmount(zapAmount + amount);
-                }
-            })   
+  useEffect(() => {
+    if (zaps.length > 0) {
+      zaps.map((zap) => {
+        const bolt11Tag = zap.tags.find((tag) => tag[0] === "bolt11");
+        const invoice = bolt11Tag ? bolt11Tag[1] : null;
+        if (invoice) {
+          const amount = getSatAmountFromInvoice(invoice);
+          setZapAmount(zapAmount + amount);
         }
-    }, [zaps]);
+      });
+    }
+  }, [zaps]);
 
-    return (
-        <div style={{width: width < 768 ? "auto" : width}} onClick={() => router.push(`/details/${workshop.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg">
-            <div style={{maxWidth: width, minWidth: width}} className="max-tab:h-auto max-mob:h-auto">
-                <Image
-                    alt="workshop thumbnail"
-                    src={returnImageProxy(workshop.image)}
-                    quality={100}
-                    width={width}
-                    height={height}
-                    className="w-full h-full object-cover object-center rounded-md"
-                />
-                <div className='flex flex-col justify-start'>
-                    <h4 className="mb-1 font-bold text-2xl font-blinker">{workshop.title}</h4>
-                    <p style={{
-                        display: '-webkit-box',
-                        WebkitBoxOrient: 'vertical',
-                        WebkitLineClamp: 3,
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'prewrap',
-                        font: '400 1rem/1.5 Blinker, sans-serif'
-                    }}>
-                        {workshop.summary}
-                    </p>
-                    <div className="flex flex-row justify-between w-full">
-                        <p className="text-sm mt-1 text-gray-400">Published: {formatTimestampToHowLongAgo(workshop.published_at)}</p>
-                        <p className="pr-2"><i className="pi pi-bolt"></i> {zapAmount}</p>
-                    </div>
-                </div>
-            </div>
+  return (
+    <div
+      onClick={() => router.push(`/details/${workshop.id}`)}
+      className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md"
+    >
+      <div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
+        <Image
+          alt="workshop thumbnail"
+          src={returnImageProxy(workshop.image)}
+          quality={100}
+          layout="fill"
+          objectFit="cover"
+          className="rounded-md"
+        />
+      </div>
+      <div className="flex flex-col justify-start w-full mt-4">
+        <h4 className="mb-1 font-bold text-lg font-blinker line-clamp-2">
+          {workshop.title}
+        </h4>
+        <p className="text-sm text-gray-500 line-clamp-2">{workshop.summary}</p>
+        <div className="flex flex-row justify-between items-center mt-2">
+          <p className="text-xs text-gray-400">
+            {formatTimestampToHowLongAgo(workshop.published_at)}
+          </p>
+          <p className="text-xs">
+            <i className="pi pi-bolt"></i> {zapAmount}
+          </p>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default WorkshopTemplate;