From 789356a5d6db46ffb3c1bf82eb734c357ac24f80 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Wed, 20 Nov 2024 18:49:31 -0600
Subject: [PATCH] Improved templates

---
 .../carousels/templates/CourseTemplate.js     | 23 ++++++++-----------
 .../carousels/templates/DocumentTemplate.js   | 21 ++++++++---------
 .../carousels/templates/VideoTemplate.js      | 21 ++++++++---------
 3 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index 2d25bde..735393f 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -64,7 +64,7 @@ export function CourseTemplate({ course, showMetaTags = true }) {
 
   return (
     <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
-      <div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
+      <div className="relative w-full h-0 hover:opacity-70 cursor-pointer" style={{ paddingBottom: "56.25%" }} onClick={() => router.push(`/course/${nAddress}`)}>
         <Image
           alt="video thumbnail"
           src={returnImageProxy(course.image)}
@@ -74,24 +74,17 @@ export function CourseTemplate({ course, showMetaTags = true }) {
           className="rounded-md"
         />
         <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50" />
-        <div className="absolute top-4 right-4 flex items-center gap-1 bg-black/50 text-white px-3 py-1 rounded-full">
-          <ZapDisplay zapAmount={zapAmount} event={course} zapsLoading={zapsLoading && zapAmount === 0} />
-        </div>
       </div>
       <CardHeader className="flex flex-row justify-between items-center p-4 border-b border-gray-700">
         <div className="flex items-center gap-4">
           <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">{course.name}</CardTitle>
         </div>
-        <div>
-          {course?.price && course?.price > 0 ? (
-            <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${course.price} sats`} />
-          ) : (
-            <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
-          )}
+        <div className="text-[#f8f8ff]">
+          <ZapDisplay zapAmount={zapAmount} event={course} zapsLoading={zapsLoading && zapAmount === 0} />
         </div>
       </CardHeader>
-      <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full`}>
-        <div className="flex flex-wrap gap-2 mb-4">
+      <CardContent className={`${isMobile ? "px-3" : ""} pt-4 pb-2 w-full flex flex-row justify-between items-center`}>
+        <div className="flex flex-wrap gap-2 max-w-[65%]">
           {course && course.topics && course.topics.map((topic, index) => (
             shouldShowMetaTags(topic) && (
               <Tag size="small" key={index} className="px-2 py-1 text-sm text-[#f8f8ff]">
@@ -100,7 +93,11 @@ export function CourseTemplate({ course, showMetaTags = true }) {
             )
           ))}
         </div>
-        <p className="font-bold text-gray-300 mb-2">{lessonCount} {lessonCount === 1 ? "lesson" : "lessons"}</p>
+        {course?.price && course?.price > 0 ? (
+          <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${course.price} sats`} />
+        ) : (
+          <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
+        )}
       </CardContent>
       <CardDescription className={`${isMobile ? "w-full p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
                 style={{
diff --git a/src/components/content/carousels/templates/DocumentTemplate.js b/src/components/content/carousels/templates/DocumentTemplate.js
index 5542ce7..0bd2719 100644
--- a/src/components/content/carousels/templates/DocumentTemplate.js
+++ b/src/components/content/carousels/templates/DocumentTemplate.js
@@ -52,7 +52,7 @@ export function DocumentTemplate({ document, isLesson, showMetaTags }) {
 
     return (
         <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
-            <div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
+            <div className="relative w-full h-0 hover:opacity-70 cursor-pointer" style={{ paddingBottom: "56.25%" }} onClick={() => router.push(`/details/${nAddress}`)}>
                 <Image
                     alt="document thumbnail"
                     src={returnImageProxy(document.image)}
@@ -62,23 +62,16 @@ export function DocumentTemplate({ document, isLesson, showMetaTags }) {
                     className="rounded-md"
                 />
                 <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50" />
-                <div className="absolute top-4 right-4 flex items-center gap-1 bg-black/50 text-white px-3 py-1 rounded-full">
-                    <ZapDisplay zapAmount={zapAmount} event={document} zapsLoading={zapsLoading && zapAmount === 0} />
-                </div>
             </div>
             <CardHeader className="flex flex-row justify-between items-center p-4 border-b border-gray-700">
                 <div className="flex items-center gap-4">
                     <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">{document.title}</CardTitle>
                 </div>
-                <div>
-                    {document?.price && document?.price > 0 ? (
-                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${document.price} sats`} />
-                    ) : (
-                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
-                    )}
+                <div className="text-[#f8f8ff]"> 
+                    <ZapDisplay zapAmount={zapAmount} event={document} zapsLoading={zapsLoading && zapAmount === 0} />
                 </div>
             </CardHeader>
-            <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
+            <CardContent className={`${isMobile ? "px-3" : ""} pt-4 pb-2 w-full flex flex-row justify-between items-center`}>
                 <div className="flex flex-wrap gap-2 max-w-[65%]">
                     {document?.topics?.map((topic, index) => (
                         shouldShowMetaTags(topic) && (
@@ -89,7 +82,11 @@ export function DocumentTemplate({ document, isLesson, showMetaTags }) {
                     ))}
                     {isLesson && showMetaTags && <Tag size="small" className="px-2 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
                 </div>
-                <p className="font-bold text-gray-300">{document?.readTime || "5 min"} read</p>
+                    {document?.price && document?.price > 0 ? (
+                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${document.price} sats`} />
+                    ) : (
+                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
+                    )}
             </CardContent>
             <CardDescription className={`${isMobile ? "w-full p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}
                 style={{
diff --git a/src/components/content/carousels/templates/VideoTemplate.js b/src/components/content/carousels/templates/VideoTemplate.js
index a2e1815..fa61fab 100644
--- a/src/components/content/carousels/templates/VideoTemplate.js
+++ b/src/components/content/carousels/templates/VideoTemplate.js
@@ -53,7 +53,7 @@ export function VideoTemplate({ video, isLesson, showMetaTags }) {
 
     return (
         <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
-            <div className="relative w-full h-0" style={{ paddingBottom: "56.25%" }}>
+            <div className="relative w-full h-0 hover:opacity-70 cursor-pointer" style={{ paddingBottom: "56.25%" }} onClick={() => router.push(`/details/${nAddress}`)}>
                 <Image
                     alt="video thumbnail"
                     src={returnImageProxy(video.image)}
@@ -63,23 +63,16 @@ export function VideoTemplate({ video, isLesson, showMetaTags }) {
                     className="rounded-md"
                 />
                 <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50" />
-                <div className="absolute top-4 right-4 flex items-center gap-1 bg-black/50 text-white px-3 py-1 rounded-full">
-                    <ZapDisplay zapAmount={zapAmount} event={video} zapsLoading={zapsLoading && zapAmount === 0} />
-                </div>
             </div>
             <CardHeader className="flex flex-row justify-between items-center p-4 border-b border-gray-700">
                 <div className="flex items-center gap-4">
                     <CardTitle className="text-xl sm:text-2xl text-[#f8f8ff]">{video.title}</CardTitle>
                 </div>
-                <div>
-                    {video?.price && video?.price > 0 ? (
-                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${video.price} sats`} />
-                    ) : (
-                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
-                    )}
+                <div className="text-[#f8f8ff]">
+                    <ZapDisplay zapAmount={zapAmount} event={video} zapsLoading={zapsLoading && zapAmount === 0} />
                 </div>
             </CardHeader>
-            <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-start`}>
+            <CardContent className={`${isMobile ? "px-3" : ""} pt-4 pb-2 w-full flex flex-row justify-between items-center`}>
                 <div className="flex flex-wrap gap-2 max-w-[65%]">
                     {video?.topics?.map((topic, index) => (
                         shouldShowMetaTags(topic) && (
@@ -90,7 +83,11 @@ export function VideoTemplate({ video, isLesson, showMetaTags }) {
                     ))}
                     {isLesson && showMetaTags && <Tag size="small" className="px-2 py-1 text-sm text-[#f8f8ff]" value="lesson" />}
                 </div>
-                <p className="font-bold text-gray-300">{video?.duration || "5 min"} watch</p>
+                {video?.price && video?.price > 0 ? (
+                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock" severity="info" text={`${video.price} sats`} />
+                    ) : (
+                        <Message className={`${isMobile ? "py-1 text-xs" : "py-2"} whitespace-nowrap`} icon="pi pi-lock-open" severity="success" text="Free" />
+                    )}
             </CardContent>
 
             <CardDescription className={`${isMobile ? "w-full p-3" : "p-6"} py-2 pt-0 text-base text-neutral-50/90 dark:text-neutral-900/90 overflow-hidden min-h-[4em] flex items-center max-w-[100%]`}