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

Small styling fixes on interactive carousel and tempaltes, added correct buttons fixed up subscribe page a bit

Browse Source
This commit is contained in:
austinkelsay 2024-09-13 11:57:38 -05:00
parent 3fc44821d0
commit c8b3cd79d1
5 changed files with 99 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,8 +49,8 @@ export function CourseTemplate({ course }) {
<ZapDisplay zapAmount={zapAmount} event={course} zapsLoading={zapsLoading && zapAmount === 0} />
</div>
<CardHeader className="absolute bottom-[-8px] left-0 right-0 text-white bg-gray-800/70 w-fit rounded-lg rounded-bl-none rounded-tl-none rounded-br-none p-4 max-w-[70%] max-h-[60%]">
<div className="flex items-start gap-4">
<BookOpen className="w-10 h-10 mt-1 text-neutral-50 dark:text-neutral-900" />
<div className="flex items-center justify-center gap-4">
<i className="pi pi-book text-2xl text-[#f8f8ff]"></i>
<div>
<CardTitle className="text-2xl sm:text-3xl mb-2">{course.name || course.title}</CardTitle>
</div>

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

@ -41,8 +41,8 @@ export function DocumentTemplate({ document }) {
<ZapDisplay zapAmount={zapAmount} event={document} zapsLoading={zapsLoading && zapAmount === 0} />
</div>
<CardHeader className="absolute bottom-[-8px] left-0 right-0 text-white bg-gray-800/70 w-fit rounded-lg rounded-bl-none rounded-tl-none rounded-br-none p-4 max-w-[70%] max-h-[60%]">
<div className="flex items-start gap-4">
<FileText className="w-10 h-10 mt-1 text-neutral-50 dark:text-neutral-900" />
<div className="flex items-center justify-center gap-4">
<i className="pi pi-file text-2xl text-[#f8f8ff]"></i>
<div>
<CardTitle className="text-2xl sm:text-3xl mb-2">{document.title}</CardTitle>
</div>

4
src/components/content/carousels/newTemplates/VideoTemplate.js
View File

@ -41,8 +41,8 @@ export function VideoTemplate({ video }) {
<ZapDisplay zapAmount={zapAmount} event={video} zapsLoading={zapsLoading && zapAmount === 0} />
</div>
<CardHeader className="absolute bottom-[-8px] left-0 right-0 text-white bg-gray-800/70 w-fit rounded-lg rounded-bl-none rounded-tl-none rounded-br-none p-4 max-w-[70%] max-h-[60%]">
<div className="flex items-start gap-4">
<PlayCircle className="w-10 h-10 mt-1 text-neutral-50 dark:text-neutral-900" />
<div className="flex items-center justify-center gap-4">
<i className="pi pi-video text-2xl text-[#f8f8ff]"></i>
<div>
<CardTitle className="text-2xl sm:text-3xl mb-2">{video.title}</CardTitle>
</div>

41
src/components/interactive-news-carousel.jsx
View File

@ -2,7 +2,7 @@ import Image from "next/image"
import { useState } from "react"
import { useImageProxy } from "@/hooks/useImageProxy"
import GenericButton from "@/components/buttons/GenericButton"
import { useRouter } from "next/router"
const promotions = [
{
id: 1,
@ -57,6 +57,7 @@ const promotions = [
export function InteractivePromotionalCarousel() {
const [selectedPromotion, setSelectedPromotion] = useState(promotions[0])
const { returnImageProxy } = useImageProxy();
const router = useRouter();
return (
<div className="flex flex-col lg:flex-row bg-gray-900 text-white m-4 mx-14 rounded-lg h-[620px]">
@ -76,8 +77,42 @@ export function InteractivePromotionalCarousel() {
</h2>
<p className="text-lg text-white drop-shadow-md">{selectedPromotion.description}</p>
<div className="flex flex-row gap-2 mt-4">
<GenericButton severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="Learn More" className="py-2 font-semibold" size="small" outlined />
<GenericButton severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="py-2 font-semibold" size="small" outlined />
{
(() => {
switch (selectedPromotion.category) {
case "PLEBDEVS":
return (
<>
<GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="Learn More" className="py-2 font-semibold" size="small" outlined />
<GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="py-2 font-semibold" size="small" outlined />
<GenericButton onClick={() => router.push('/content?tag=all')} severity="help" icon={<i className="pi pi-eye pr-2" />} label="View all content" className="py-2 font-semibold" size="small" outlined />
</>
);
case "COURSES":
return (
<GenericButton onClick={() => router.push('/content?tag=courses')} icon={<i className="pi pi-book pr-2 pb-1" />} label="View All Courses" className="py-2 font-semibold" size="small" outlined />
);
case "WORKSHOPS":
return (
<GenericButton onClick={() => router.push('/content?tag=workshops')} icon={<i className="pi pi-video pr-2" />} label="View All Workshops" className="py-2 font-semibold" size="small" outlined />
);
case "RESOURCES":
return (
<GenericButton onClick={() => router.push('/content?tag=resources')} icon={<i className="pi pi-file pr-2 pb-1" />} label="View All Resources" className="py-2 font-semibold" size="small" outlined />
);
case "COMMUNITY":
return (
<GenericButton onClick={() => router.push('/feed?channel=global')} icon={<i className="pi pi-users pr-2 pb-1" />} label="Open Community Feed" className="py-2 font-semibold" size="small" outlined />
);
case "LIGHTNING / NOSTR":
return (
<GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="py-2 font-semibold" size="small" outlined />
);
default:
return null;
}
})()
}
</div>
</div>
</div>

68
src/pages/subscribe.js
View File

@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
import { useToast } from '@/hooks/useToast';
import axios from 'axios';
import { Card } from 'primereact/card';
import { Message } from 'primereact/message';
import useWindowWidth from '@/hooks/useWindowWidth';
import { Menu } from "primereact/menu";
import GenericButton from '@/components/buttons/GenericButton';
@ -21,6 +22,19 @@ const Subscribe = () => {
const [subscriptionExpiredAt, setSubscriptionExpiredAt] = useState(null);
const menu = useRef(null);
useEffect(() => {
if (session && session?.user) {
setSubscribed(session?.user.role.subscribed);
const subscribedAt = new Date(session?.user.role.lastPaymentAt);
const subscribedUntil = new Date(subscribedAt.getTime() + 31 * 24 * 60 * 60 * 1000);
setSubscribedUntil(subscribedUntil);
if (session?.user.role.subscriptionExpiredAt) {
const expiredAt = new Date(session?.user.role.subscriptionExpiredAt)
setSubscriptionExpiredAt(expiredAt);
}
}
}, [session, session?.user]);
const handleSubscriptionSuccess = async (paymentResponse) => {
setIsProcessing(true);
try {
@ -92,7 +106,7 @@ const Subscribe = () => {
},
];
const subscriptionCardTitle = (
const subscriptionCardTitleAndButton = (
<div className="w-full flex flex-row justify-between items-center">
<span className="text-xl text-900 font-bold text-white">Plebdevs Subscription</span>
<i
@ -103,6 +117,12 @@ const Subscribe = () => {
</div>
);
const subscriptionCardTitle = (
<div className="w-full flex flex-row justify-between items-center">
<span className="text-xl text-900 font-bold text-white">Plebdevs Subscription</span>
</div>
);
return (
<div className="p-4">
{
@ -110,20 +130,42 @@ const Subscribe = () => {
<h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
)
}
<Card title={subscriptionCardTitle} className="mb-6">
<p className='mb-4 text-xl'>
The plebdevs subscription is a monthly subscription that unlocks all of the paid content, grants you access to the plebdevs 1:1 calendar for tutoring, support, and mentorship, and gives you an exclusive invite to the pleblab bitcoin hackerspace community.
</p>
{session && session?.user ? (
<Card title={subscriptionCardTitleAndButton} className="mb-6">
{subscribed && (
<div className="flex flex-col">
<Message className="w-fit" severity="success" text="Subscribed!" />
<p className="mt-4">Thank you for your support 🎉</p>
<p className="text-sm text-gray-400">Pay-as-you-go subscription will renew on {subscribedUntil.toLocaleDateString()}</p>
</div>
)}
{(!subscribed && !subscriptionExpiredAt) && (
<div className="flex flex-col">
<Message className="w-fit" severity="info" text="You currently have no active subscription" />
</div>
)}
{subscriptionExpiredAt && (
<div className="flex flex-col">
<Message className="w-fit" severity="warn" text={`Your subscription expired on ${subscriptionExpiredAt.toLocaleDateString()}`} />
</div>
)}
</Card>
) : (
<Card title={subscriptionCardTitle} className="mb-6">
<p className='mb-4 text-xl'>
The plebdevs subscription is a monthly subscription that unlocks all of the paid content, grants you access to the plebdevs 1:1 calendar for tutoring, support, and mentorship, and gives you an exclusive invite to the pleblab bitcoin hackerspace community.
</p>
<p className='text-xl'>
The plebdevs subscription is Lightning only and you can subscribe a month at a time with the pay as you go option or easily setup an auto recurring monthly subscription using Nostr Wallet Connect.
</p>
<p className='text-xl'>
The plebdevs subscription is Lightning only and you can subscribe a month at a time with the pay as you go option or easily setup an auto recurring monthly subscription using Nostr Wallet Connect.
</p>
<div className='flex flex-col w-fit mt-4 bg-gray-900 p-4 rounded-lg'>
<p className='text-xl pb-8'>Login to start your subscription</p>
<GenericButton label="Login" onClick={() => router.push('/auth/signin')} className='text-[#f8f8ff] w-fit' size="small" rounded icon="pi pi-user" />
</div>
</Card>
<div className='flex flex-col w-fit mt-4 bg-gray-900 p-4 rounded-lg'>
<p className='text-xl pb-8'>Login to start your subscription</p>
<GenericButton label="Login" onClick={() => router.push('/auth/signin')} className='text-[#f8f8ff] w-fit' size="small" rounded icon="pi pi-user" />
</div>
</Card>
)}
<Card title="Subscribe to PlebDevs" className="mb-6">
{isProcessing ? (