From 540556fd6291fe54fac3096f404bc37a4c395dbb Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Mon, 14 Oct 2024 10:27:23 -0500
Subject: [PATCH] Revert template styles to old template layout

---
 .../carousels/templates/CourseTemplate.js      | 14 +++++++++-----
 .../carousels/templates/DocumentTemplate.js    | 18 +++++++++++-------
 .../carousels/templates/VideoTemplate.js       | 14 +++++++++-----
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js
index ccfabf6..ff78f5e 100644
--- a/src/components/content/carousels/templates/CourseTemplate.js
+++ b/src/components/content/carousels/templates/CourseTemplate.js
@@ -57,13 +57,17 @@ export function CourseTemplate({ course }) {
 
   return (
     <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
-      <div className="relative h-48 sm:h-64">
+      <div
+        className="relative w-full h-0"
+        style={{ paddingBottom: "56.25%" }}
+      >
         <Image
+          alt="course thumbnail"
           src={returnImageProxy(course.image)}
-          alt="Course background"
           quality={100}
           layout="fill"
-          className={`${router.pathname === "/content" ? "w-full h-full object-cover" : "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"}`}
+          objectFit="cover"
+          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-2 py-1 rounded-full z-10">
@@ -96,8 +100,8 @@ export function CourseTemplate({ course }) {
           WebkitLineClamp: "2"
         }}>
         <div className="w-full flex flex-row justify-between items-start">
-          <p className="line-clamp-2 break-words">{(course.summary || course.description)?.split('\n').map((line, index) => (
-            <span className="break-words max-w-[70%]" key={index}>{line}</span>
+          <p className="line-clamp-2 text-wrap break-words">{(course.summary || course.description)?.split('\n').map((line, index) => (
+            <span className="text-wrap break-words" key={index}>{line}</span>
           ))}</p>
           <div className="flex flex-col items-end">
             {
diff --git a/src/components/content/carousels/templates/DocumentTemplate.js b/src/components/content/carousels/templates/DocumentTemplate.js
index e25468f..31fd022 100644
--- a/src/components/content/carousels/templates/DocumentTemplate.js
+++ b/src/components/content/carousels/templates/DocumentTemplate.js
@@ -45,14 +45,18 @@ export function DocumentTemplate({ document }) {
     if (zapsError) return <div>Error: {zapsError}</div>;
 
     return (
-        <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
-            <div className="relative h-48 sm:h-64">
+        <Card className="w-full 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%" }}
+            >
                 <Image
+                    alt="document thumbnail"
                     src={returnImageProxy(document.image)}
-                    alt="Document background"
                     quality={100}
                     layout="fill"
-                    className={`${router.pathname === "/content" ? "w-full h-full object-cover" : "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"}`}
+                    objectFit="cover"
+                    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">
@@ -84,9 +88,9 @@ export function DocumentTemplate({ document }) {
                     WebkitBoxOrient: "vertical",
                     WebkitLineClamp: "2"
             }}>
-                <div className="w-full flex flex-row justify-between items-start">
-                    <p className="line-clamp-2 break-words">{(document.summary || document.description)?.split('\n').map((line, index) => (
-                        <span className="break-words max-w-[70%]" key={index}>{line}</span>
+                <div className="w-full flex flex-row justify-between items-start break-words">
+                    <p className="line-clamp-2 text-wrap break-words overflow-hidden">{(document.summary || document.description)?.split('\n').map((line, index) => (
+                        <span className="text-wrap break-words overflow-hidden" key={index}>{line}</span>
                     ))}</p>
                     <div className="flex flex-col items-end">
                         {
diff --git a/src/components/content/carousels/templates/VideoTemplate.js b/src/components/content/carousels/templates/VideoTemplate.js
index 9320aee..11a8e01 100644
--- a/src/components/content/carousels/templates/VideoTemplate.js
+++ b/src/components/content/carousels/templates/VideoTemplate.js
@@ -47,13 +47,17 @@ export function VideoTemplate({ video }) {
 
     return (
         <Card className="overflow-hidden group hover:shadow-xl transition-all duration-300 bg-gray-800 m-2 border-none">
-            <div className="relative h-48 sm:h-64">
+            <div
+                className="relative w-full h-0"
+                style={{ paddingBottom: "56.25%" }}
+            >
                 <Image
+                    alt="video thumbnail"
                     src={returnImageProxy(video.image)}
-                    alt="Video background"
                     quality={100}
                     layout="fill"
-                    className={`${router.pathname === "/content" ? "w-full h-full object-cover" : "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"}`}
+                    objectFit="cover"
+                    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">
@@ -86,8 +90,8 @@ export function VideoTemplate({ video }) {
                     WebkitLineClamp: "2"
             }}>
                 <div className="w-full flex flex-row justify-between items-start">
-                    <p className="line-clamp-2 break-words max-w-[70%]">{(video.summary || video.description)?.split('\n').map((line, index) => (
-                        <span className="break-words" key={index}>{line}</span>
+                    <p className="line-clamp-2 text-wrap break-words">{(video.summary || video.description)?.split('\n').map((line, index) => (
+                        <span className="text-wrap break-words" key={index}>{line}</span>
                     ))}</p>
                     <div className="flex flex-col items-end">
                         {