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

Mobile view for interactive carousel, sorting content carousels by most recent

Browse Source
This commit is contained in:
austinkelsay 2024-09-14 18:36:46 -05:00
parent 7091da9ecd
commit 127e7d9029
6 changed files with 42 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/content/carousels/CoursesCarousel.js
View File

@ -33,8 +33,13 @@ export default function CoursesCarousel() {
try {
if (courses && courses.length > 0) {
const processedCourses = courses.map(course => parseCourseEvent(course));
// Sort courses by created_at in descending order (most recent first)
const sortedCourses = processedCourses.sort((a, b) => b.created_at - a.created_at);
setProcessedCourses(processedCourses);
console.log("Sorted courses:", sortedCourses);
setProcessedCourses(sortedCourses);
} else {
console.log('No courses fetched or empty array returned');
}

20
src/components/content/carousels/InteractivePromotionalCarousel.js
View File

@ -65,7 +65,7 @@ const InteractivePromotionalCarousel = () => {
const router = useRouter();
return (
<div className={`flex ${isMobileView ? 'flex-col' : 'flex-row'} bg-gray-900 text-white m-4 mx-14 rounded-lg ${isMobileView ? 'h-auto' : 'h-[620px]'}`}>
<div className={`flex ${isMobileView ? 'flex-col' : 'flex-row'} bg-gray-900 text-white m-4 mx-14 rounded-lg ${isMobileView ? 'h-auto' : 'h-[620px]'} ${isMobileView ? 'w-full mx-0 ml-0 mt-0' : null}`}>
<div className={isMobileView ? 'w-full' : 'lg:w-2/3 relative'}>
<Image
src={returnImageProxy(selectedPromotion.image)}
@ -81,37 +81,37 @@ const InteractivePromotionalCarousel = () => {
{selectedPromotion.title}
</h2>
<p className="text-lg text-white drop-shadow-md">{selectedPromotion.description}</p>
<div className="flex flex-row gap-2 mt-4">
<div className={`flex flex-row gap-2 mt-4 ${isMobileView ? 'flex-col' : ''}`}>
{
(() => {
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="primary" icon={<i className="pi pi-eye pr-2" />} label="View all content" className="py-2 font-semibold" size="small" outlined />
<GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="Learn More" className="w-fit 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="w-fit py-2 font-semibold" size="small" outlined />
<GenericButton onClick={() => router.push('/content?tag=all')} severity="primary" icon={<i className="pi pi-eye pr-2" />} label="View all content" className="w-fit 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 />
<GenericButton onClick={() => router.push('/content?tag=courses')} icon={<i className="pi pi-book pr-2 pb-1" />} label="View All Courses" className="w-fit 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 />
<GenericButton onClick={() => router.push('/content?tag=workshops')} icon={<i className="pi pi-video pr-2" />} label="View All Workshops" className="w-fit 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 />
<GenericButton onClick={() => router.push('/content?tag=resources')} icon={<i className="pi pi-file pr-2 pb-1" />} label="View All Resources" className="w-fit 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 />
<GenericButton onClick={() => router.push('/feed?channel=global')} icon={<i className="pi pi-users pr-2 pb-1" />} label="Open Community Feed" className="w-fit 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 />
<GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="w-fit py-2 font-semibold" size="small" outlined />
);
default:
return null;

9
src/components/content/carousels/ResourcesCarousel.js
View File

@ -33,8 +33,15 @@ export default function ResourcesCarousel() {
try {
if (resources && resources.length > 0) {
const processedResources = resources.map(resource => parseEvent(resource));
// Sort resources by created_at in descending order (most recent first)
const sortedResources = processedResources.sort((a, b) => b.created_at - a.created_at);
setProcessedResources(processedResources);
console.log("Sorted resources:", sortedResources);
setProcessedResources(sortedResources);
} else {
console.log('No resources fetched or empty array returned');
}
} catch (error) {
console.error('Error fetching resources:', error);

9
src/components/content/carousels/WorkshopsCarousel.js
View File

@ -32,10 +32,13 @@ export default function WorkshopsCarousel() {
const fetch = async () => {
try {
if (workshops && workshops.length > 0) {
console.log('workshops', workshops);
const processedWorkshops = workshops.map(workshop => parseEvent(workshop));
console.log('processedWorkshops', processedWorkshops);
setProcessedWorkshops(processedWorkshops);
// Sort workshops by created_at in descending order (most recent first)
const sortedWorkshops = processedWorkshops.sort((a, b) => b.created_at - a.created_at);
console.log('Sorted workshops:', sortedWorkshops);
setProcessedWorkshops(sortedWorkshops);
} else {
console.log('No workshops fetched or empty array returned');
}

11
src/components/profile/UserProfile.js
View File

@ -8,9 +8,12 @@ import { ProgressSpinner } from "primereact/progressspinner";
import PurchasedListItem from "@/components/profile/PurchasedListItem";
import { useNDKContext } from "@/context/NDKContext";
import { formatDateTime } from "@/utils/time";
import { Tooltip } from "primereact/tooltip";
import { nip19 } from "nostr-tools";
import Image from "next/image";
import SubscribeModal from "@/components/profile/subscription/SubscribeModal";
import useWindowWidth from "@/hooks/useWindowWidth";
import { useToast } from "@/hooks/useToast";
const UserProfile = () => {
const windowWidth = useWindowWidth();
@ -18,6 +21,7 @@ const UserProfile = () => {
const { data: session } = useSession();
const { returnImageProxy } = useImageProxy();
const { ndk, addSigner } = useNDKContext();
const { showToast } = useToast();
const menu = useRef(null);
useEffect(() => {
@ -31,14 +35,14 @@ const UserProfile = () => {
label: "Edit",
icon: "pi pi-pencil",
command: () => {
// Add your edit functionality here
showToast("warn", "Alert", "This feature is not yet implemented");
},
},
{
label: "Delete",
icon: "pi pi-trash",
command: () => {
// Add your delete functionality here
showToast("warn", "Alert", "This feature is not yet implemented");
},
},
];
@ -77,7 +81,8 @@ const UserProfile = () => {
{user.username || user?.email || "Anon"}
</h1>
<h2 className="text-center text-xl my-2 truncate max-tab:px-4 max-mob:px-4">
{user.pubkey}
<Tooltip target=".pubkey-tooltip" content={"this is your nostr npub"} />
{nip19.npubEncode(user.pubkey)} <i className="pi pi-question-circle text-xl pubkey-tooltip" />
</h2>
{user && (
<SubscribeModal user={user} />

5
src/components/profile/UserSettings.js
View File

@ -10,7 +10,9 @@ import useWindowWidth from "@/hooks/useWindowWidth";
import Image from "next/image";
import BitcoinConnectButton from "@/components/bitcoinConnect/BitcoinConnect";
import { Panel } from "primereact/panel";
import { nip19 } from "nostr-tools";
import { InputText } from "primereact/inputtext";
import { Tooltip } from "primereact/tooltip";
import { useToast } from "@/hooks/useToast";
const UserSettings = () => {
@ -162,7 +164,8 @@ const UserSettings = () => {
{user.username || user?.email || "Anon"}
</h1>
<h2 className="text-center text-xl my-2 truncate max-tab:px-4 max-mob:px-4">
{user.pubkey}
<Tooltip target=".pubkey-tooltip" content={"this is your nostr npub"} />
{nip19.npubEncode(user.pubkey)} <i className="pi pi-question-circle text-xl pubkey-tooltip" />
</h2>
<div className="flex flex-col w-1/2 mx-auto my-8 mb-12 justify-between items-center">
<h2 className="text-xl my-2">Connect Your Lightning Wallet</h2>