mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-06-06 01:02:04 +00:00
Message carousel in promotional carousel, also added youtube social link to message and about
This commit is contained in:
austinkelsay
parent
2e71310661
commit
cef5a53a4c
@ -4,8 +4,8 @@ import { useImageProxy } from "@/hooks/useImageProxy"
|
||||
import GenericButton from "@/components/buttons/GenericButton"
|
||||
import { useRouter } from "next/router"
|
||||
import useWindowWidth from "@/hooks/useWindowWidth"
|
||||
import NostrIcon from "../../../../public/images/nostr.png"
|
||||
import { useToast } from "@/hooks/useToast";
|
||||
import MessageCarousel from '@/components/content/carousels/MessagesCarousel';
|
||||
|
||||
// With current spacing the title can only be 1 line
|
||||
const promotions = [
|
||||
@ -216,70 +216,7 @@ const InteractivePromotionalCarousel = () => {
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
{isTabView ? (
|
||||
// todo: turn this into a stepper for multiple messages
|
||||
<div className={`${isMobile ? "min-w-full" : "w-[529px]" } flex flex-col bg-gray-800 p-4 rounded-lg shadow-lg`}>
|
||||
<p>Welcome! 👋</p>
|
||||
<p>Plebdevs is open source software and is still in early development. If you have any questions drop an issue on the Github repo, or reach out to me in the Community tab, cheers! - <span className="italic">Austin</span></p>
|
||||
<div className="flex flex-wrap gap-4 justify-center mt-2">
|
||||
<i
|
||||
className="pi pi-github text-gray-300 cursor-pointer text-xl hover:opacity-80"
|
||||
onClick={() => window.open('https://github.com/austinkelsay/plebdevs', '_blank')}
|
||||
title="Github"
|
||||
/>
|
||||
<i
|
||||
className="pi pi-twitter text-blue-400 rounded-full cursor-pointer text-xl hover:opacity-80"
|
||||
onClick={() => window.open('https://x.com/pleb_devs', '_blank')}
|
||||
title="X"
|
||||
/>
|
||||
<Image
|
||||
src={NostrIcon}
|
||||
alt="Nostr"
|
||||
width={22}
|
||||
height={22}
|
||||
className="cursor-pointer hover:opacity-80"
|
||||
onClick={() => window.open('https://nostr.com/plebdevs@plebdevs.com', '_blank')}
|
||||
title="Nostr"
|
||||
/>
|
||||
<i
|
||||
className="pi pi-bolt text-yellow-400 cursor-pointer text-xl hover:opacity-80"
|
||||
onClick={() => copyToClipboard("austin@bitcoinpleb.dev")}
|
||||
title="Donate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col bg-gray-800 p-4 rounded-lg shadow-lg">
|
||||
<p>Welcome! 👋</p>
|
||||
<p>Plebdevs is open source software and is still in early development. If you have any questions drop an issue on the Github repo, or reach out to me in the Community tab, cheers! - <span className="italic">Austin</span></p>
|
||||
<div className="flex flex-wrap gap-4 justify-center mt-2">
|
||||
<i
|
||||
className="pi pi-github text-gray-300 cursor-pointer text-xl hover:opacity-80"
|
||||
onClick={() => window.open('https://github.com/austinkelsay/plebdevs', '_blank')}
|
||||
title="Github"
|
||||
/>
|
||||
<i
|
||||
className="pi pi-twitter text-blue-400 rounded-full cursor-pointer text-xl hover:opacity-80"
|
||||
onClick={() => window.open('https://x.com/pleb_devs', '_blank')}
|
||||
title="X"
|
||||
/>
|
||||
<Image
|
||||
src={NostrIcon}
|
||||
alt="Nostr"
|
||||
width={22}
|
||||
height={22}
|
||||
className="cursor-pointer hover:opacity-80"
|
||||
onClick={() => window.open('https://nostr.com/plebdevs@plebdevs.com', '_blank')}
|
||||
title="Nostr"
|
||||
/>
|
||||
<i
|
||||
className="pi pi-bolt text-yellow-400 cursor-pointer text-xl hover:opacity-80"
|
||||
onClick={() => copyToClipboard("austin@bitcoinpleb.dev")}
|
||||
title="Donate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<MessageCarousel copyToClipboard={copyToClipboard} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
103
src/components/content/carousels/MessagesCarousel.js
Normal file
103
src/components/content/carousels/MessagesCarousel.js
Normal file
@ -0,0 +1,103 @@
|
||||
import React from 'react';
|
||||
import { Carousel } from 'primereact/carousel';
|
||||
import GenericButton from '@/components/buttons/GenericButton';
|
||||
import Image from "next/image";
|
||||
import NostrIcon from "../../../../public/images/nostr.png";
|
||||
|
||||
const MessageCarousel = ({ copyToClipboard }) => {
|
||||
|
||||
const messageTemplate = ({title, description, showGithub, showX, showNostr, showYoutube, showDonate, showFeedback}) => (
|
||||
<div className="flex flex-col justify-between bg-gray-800 p-4 rounded-lg shadow-lg min-h-[182px]">
|
||||
<p>{title}</p>
|
||||
<p>{description}</p>
|
||||
<div className="flex flex-wrap gap-4 justify-center">
|
||||
{showGithub && (
|
||||
<i
|
||||
className="pi pi-github text-gray-300 cursor-pointer text-xl hover:opacity-80"
|
||||
onClick={() => window.open('https://github.com/austinkelsay/plebdevs', '_blank')}
|
||||
title="Github"
|
||||
/>
|
||||
)}
|
||||
{showX && (
|
||||
<i
|
||||
className="pi pi-twitter text-blue-400 rounded-full cursor-pointer text-xl hover:opacity-80"
|
||||
onClick={() => window.open('https://x.com/pleb_devs', '_blank')}
|
||||
title="X"
|
||||
/>
|
||||
)}
|
||||
{showNostr && (
|
||||
<Image
|
||||
src={NostrIcon}
|
||||
alt="Nostr"
|
||||
width={22}
|
||||
height={22}
|
||||
className="cursor-pointer hover:opacity-80"
|
||||
onClick={() => window.open('https://nostr.com/plebdevs@plebdevs.com', '_blank')}
|
||||
title="Nostr"
|
||||
/>
|
||||
)}
|
||||
{showYoutube && (
|
||||
<i
|
||||
className="pi pi-youtube text-red-500 cursor-pointer text-[22px] hover:opacity-80"
|
||||
onClick={() => window.open('https://www.youtube.com/@plebdevs', '_blank')}
|
||||
title="Youtube"
|
||||
/>
|
||||
)}
|
||||
{showDonate && (
|
||||
<i
|
||||
className="pi pi-bolt text-yellow-400 cursor-pointer text-xl hover:opacity-80"
|
||||
onClick={() => copyToClipboard("austin@bitcoinpleb.dev")}
|
||||
title="Donate"
|
||||
/>
|
||||
)}
|
||||
{showFeedback && (
|
||||
<GenericButton
|
||||
label="Feedback"
|
||||
size="small"
|
||||
className="py-2"
|
||||
outlined
|
||||
onClick={() => window.open('https://docs.google.com/forms/d/e/1FAIpQLSd8PDBQ8PksBzO8zsMA-Gy6tdZtKWk10Ixa0EXgeTBOyjohpA/viewform?usp=sf_link', '_blank')}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const messages = [
|
||||
{
|
||||
title: "Welcome to the PlebDevs Platform testing phase! 👋",
|
||||
description: "During this testing phase all prices will be reduced by 10x but all purchases, subscriptions, and progress will be reset on launch. Thank you!",
|
||||
showGithub: false,
|
||||
showX: false,
|
||||
showNostr: false,
|
||||
showDonate: false,
|
||||
showFeedback: true,
|
||||
},
|
||||
{
|
||||
title: "PLEBDEVS 🤝👨💻🤝👩💻🤝🧑💻🤝",
|
||||
description: "Plebdevs is open source software and is still in early development. If you have any questions drop an issue on the Github repo, or reach out to me in the Community tab, cheers! - Austin",
|
||||
showGithub: true,
|
||||
showX: true,
|
||||
showNostr: true,
|
||||
showYoutube: true,
|
||||
showDonate: true,
|
||||
showFeedback: false,
|
||||
},
|
||||
{
|
||||
title: "More content coming soon 📺",
|
||||
description: "We are super excited to be working on more content in the coming months including a new PlebDevs Starter course for beginners and more tutorials! Keep an eye out!",
|
||||
showGithub: true,
|
||||
showX: true,
|
||||
showNostr: true,
|
||||
showYoutube: true,
|
||||
showDonate: true,
|
||||
showFeedback: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Carousel autoplayInterval={5000} showNavigators={false} value={messages} numVisible={1} numScroll={1} itemTemplate={messageTemplate} />
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageCarousel;
|
||||
@ -116,6 +116,13 @@ const AboutPage = () => {
|
||||
tooltip="Nostr"
|
||||
onClick={() => window.open('https://nostr.com/plebdevs@plebdevs.com', '_blank')}
|
||||
/>
|
||||
<GenericButton
|
||||
severity="danger"
|
||||
outlined
|
||||
icon="pi pi-youtube"
|
||||
tooltip="Youtube"
|
||||
onClick={() => window.open('https://www.youtube.com/@plebdevs', '_blank')}
|
||||
/>
|
||||
<GenericButton
|
||||
severity="warning"
|
||||
className="text-yellow-400"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user