saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 01:02:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert style changes on other tempaltes, remake video template

Browse Source
This commit is contained in:
austinkelsay 2024-10-13 20:10:10 -05:00
parent 5d559f772e
commit dfcf428f43
3 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/content/carousels/templates/CourseTemplate.js
View File

@ -79,7 +79,7 @@ export function CourseTemplate({ course }) {
</CardHeader> </CardHeader>
</div> </div>
<CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}> <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
<div className="flex flex-wrap gap-2 max-w-[50%]"> <div className="flex flex-wrap gap-2">
{course && course.topics && course.topics.map((topic, index) => ( {course && course.topics && course.topics.map((topic, index) => (
<Tag size="small" key={index} className="px-3 py-1 text-sm text-[#f8f8ff]"> <Tag size="small" key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
{topic} {topic}
@ -88,7 +88,7 @@ export function CourseTemplate({ course }) {
</div> </div>
<p className="font-bold text-gray-300 min-w-[5%]">{lessonCount} {lessonCount === 1 ? "lesson" : "lessons"}</p> <p className="font-bold text-gray-300 min-w-[5%]">{lessonCount} {lessonCount === 1 ? "lesson" : "lessons"}</p>
</CardContent> </CardContent>
<CardDescription className={`${isMobile ? "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-[50%]`} <CardDescription className={`${isMobile ? "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`}
style={{ style={{
overflow: "hidden", overflow: "hidden",
display: "-webkit-box", display: "-webkit-box",

4
src/components/content/carousels/templates/DocumentTemplate.js
View File

@ -68,7 +68,7 @@ export function DocumentTemplate({ document }) {
</CardHeader> </CardHeader>
</div> </div>
<CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}> <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
<div className="flex flex-wrap gap-2 max-w-[50%]"> <div className="flex flex-wrap gap-2">
{document?.topics?.map((topic, index) => ( {document?.topics?.map((topic, index) => (
<Tag size="small" key={index} className="px-3 py-1 text-sm text-[#f8f8ff]"> <Tag size="small" key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
{topic} {topic}
@ -77,7 +77,7 @@ export function DocumentTemplate({ document }) {
</div> </div>
<p className="font-bold text-gray-300 min-w-[5%]">{document?.readTime || "5 min"} read</p> <p className="font-bold text-gray-300 min-w-[5%]">{document?.readTime || "5 min"} read</p>
</CardContent> </CardContent>
<CardDescription className={`${isMobile ? "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-[50%]`} <CardDescription className={`${isMobile ? "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`}
style={{ style={{
overflow: "hidden", overflow: "hidden",
display: "-webkit-box", display: "-webkit-box",

25
src/components/content/carousels/templates/VideoTemplate.js
View File

@ -7,33 +7,32 @@ import { useZapsSubscription } from "@/hooks/nostrQueries/zaps/useZapsSubscripti
import { getTotalFromZaps } from "@/utils/lightning"; import { getTotalFromZaps } from "@/utils/lightning";
import { useImageProxy } from "@/hooks/useImageProxy"; import { useImageProxy } from "@/hooks/useImageProxy";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { nip19 } from "nostr-tools";
import { formatTimestampToHowLongAgo } from "@/utils/time"; import { formatTimestampToHowLongAgo } from "@/utils/time";
import useWindowWidth from "@/hooks/useWindowWidth"; import { nip19 } from "nostr-tools";
import { Tag } from "primereact/tag"; import { Tag } from "primereact/tag";
import { Message } from "primereact/message"; import { Message } from "primereact/message";
import useWindowWidth from "@/hooks/useWindowWidth";
import GenericButton from "@/components/buttons/GenericButton"; import GenericButton from "@/components/buttons/GenericButton";
import appConfig from "@/config/appConfig"; import appConfig from "@/config/appConfig";
export function VideoTemplate({ video }) { export function VideoTemplate({ video }) {
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: video }); const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: video });
const [zapAmount, setZapAmount] = useState(0);
const [nAddress, setNAddress] = useState(null); const [nAddress, setNAddress] = useState(null);
const [zapAmount, setZapAmount] = useState(0);
const router = useRouter(); const router = useRouter();
const windowWidth = useWindowWidth();
const { returnImageProxy } = useImageProxy(); const { returnImageProxy } = useImageProxy();
const windowWidth = useWindowWidth();
const isMobile = windowWidth < 768; const isMobile = windowWidth < 768;
useEffect(() => { useEffect(() => {
if (video && video?.pubkey && video?.kind && video?.id) { if (video && video?.id) {
const addr = nip19.naddrEncode({ const nAddress = nip19.naddrEncode({
pubkey: video.pubkey, pubkey: video.pubkey,
kind: video.kind, kind: video.kind,
identifier: video.id, identifier: video.id,
relayUrls: appConfig.defaultRelayUrls relayUrls: appConfig.defaultRelayUrls
}) });
setNAddress(addr); setNAddress(nAddress);
} }
}, [video]); }, [video]);
@ -51,7 +50,7 @@ export function VideoTemplate({ video }) {
<div className="relative h-48 sm:h-64"> <div className="relative h-48 sm:h-64">
<Image <Image
src={returnImageProxy(video.image)} src={returnImageProxy(video.image)}
alt="Video thumbnail" alt="Video background"
quality={100} quality={100}
layout="fill" 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"}`} className={`${router.pathname === "/content" ? "w-full h-full object-cover" : "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"}`}
@ -70,7 +69,7 @@ export function VideoTemplate({ video }) {
</CardHeader> </CardHeader>
</div> </div>
<CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}> <CardContent className={`${isMobile ? "px-3" : ""} pt-6 pb-2 w-full flex flex-row justify-between items-center`}>
<div className="flex flex-wrap gap-2 max-w-[50%]"> <div className="flex flex-wrap gap-2">
{video?.topics?.map((topic, index) => ( {video?.topics?.map((topic, index) => (
<Tag size="small" key={index} className="px-3 py-1 text-sm text-[#f8f8ff]"> <Tag size="small" key={index} className="px-3 py-1 text-sm text-[#f8f8ff]">
{topic} {topic}
@ -79,13 +78,13 @@ export function VideoTemplate({ video }) {
</div> </div>
<p className="font-bold text-gray-300 min-w-[5%]">{video?.duration || "5 min"} watch</p> <p className="font-bold text-gray-300 min-w-[5%]">{video?.duration || "5 min"} watch</p>
</CardContent> </CardContent>
<CardDescription className={`${isMobile ? "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-[50%]`} <CardDescription className={`${isMobile ? "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`}
style={{ style={{
overflow: "hidden", overflow: "hidden",
display: "-webkit-box", display: "-webkit-box",
WebkitBoxOrient: "vertical", WebkitBoxOrient: "vertical",
WebkitLineClamp: "2" WebkitLineClamp: "2"
}}> }}>
<div className="w-full flex flex-row justify-between items-start"> <div className="w-full flex flex-row justify-between items-start">
<p className="line-clamp-2">{(video.summary || video.description)?.split('\n').map((line, index) => ( <p className="line-clamp-2">{(video.summary || video.description)?.split('\n').map((line, index) => (
<span key={index}>{line}</span> <span key={index}>{line}</span>