mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 10:51:20 +00:00
Created reusable more info component that takes place of info tooltips / modals on profile for right now
This commit is contained in:
austinkelsay
parent
a42fd60add
commit
e740b8e4ef
40
src/components/MoreInfo.js
Normal file
40
src/components/MoreInfo.js
Normal file
@ -0,0 +1,40 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { Tooltip } from 'primereact/tooltip';
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
|
||||
const MoreInfo = ({ tooltip, modalTitle, modalBody, className = '' }) => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const windowWidth = useWindowWidth();
|
||||
const isMobile = windowWidth < 768;
|
||||
|
||||
return (
|
||||
<>
|
||||
<i
|
||||
className={`pi pi-question-circle cursor-pointer ${className}`}
|
||||
onClick={() => setVisible(true)}
|
||||
data-pr-tooltip={tooltip}
|
||||
data-pr-position="right"
|
||||
data-pr-at="right+5 top"
|
||||
data-pr-my="left center-2"
|
||||
/>
|
||||
{!isMobile && <Tooltip target=".pi-question-circle" />}
|
||||
|
||||
<Dialog
|
||||
header={modalTitle}
|
||||
visible={visible}
|
||||
onHide={() => setVisible(false)}
|
||||
className="max-w-3xl"
|
||||
breakpoints={{ '960px': '75vw', '641px': '90vw' }}
|
||||
>
|
||||
{typeof modalBody === 'string' ? (
|
||||
<p className="text-gray-200">{modalBody}</p>
|
||||
) : (
|
||||
modalBody
|
||||
)}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MoreInfo;
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { Tooltip } from 'primereact/tooltip';
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
import MoreInfo from '@/components/MoreInfo';
|
||||
|
||||
const ActivityContributionChart = ({ session }) => {
|
||||
const [contributionData, setContributionData] = useState({});
|
||||
@ -167,9 +168,21 @@ const ActivityContributionChart = ({ session }) => {
|
||||
<div className="w-full mx-2 bg-gray-800 rounded-lg border border-gray-700 shadow-md h-[330px] max-lap:mx-0 max-lap:mt-2">
|
||||
<div className="flex flex-row justify-between items-center p-4">
|
||||
<h1 className="text-2xl font-bold text-gray-200">Activity</h1>
|
||||
<i className="pi pi-question-circle text-2xl cursor-pointer text-gray-200"
|
||||
data-pr-tooltip="Total number of learning activities on the platform" />
|
||||
<Tooltip target=".pi-question-circle" position="left" />
|
||||
<MoreInfo
|
||||
tooltip="Total number of learning activities on the platform"
|
||||
modalTitle="Learning Activities"
|
||||
modalBody={
|
||||
<div className="space-y-4">
|
||||
<p>This chart shows your learning activities over the past year, including:</p>
|
||||
<ul className="list-disc pl-4">
|
||||
<li>Courses started and completed</li>
|
||||
<li>Lessons opened and completed</li>
|
||||
</ul>
|
||||
<p>The darker the green, the more activities completed on that day.</p>
|
||||
</div>
|
||||
}
|
||||
className="text-2xl text-gray-200"
|
||||
/>
|
||||
</div>
|
||||
<div className={`${getScaleClass(windowWidth)}`}>
|
||||
<div className="min-w-[910px] p-4">
|
||||
|
||||
@ -3,6 +3,7 @@ import { useFetchGithubCommits } from '@/hooks/githubQueries/useFetchGithubCommi
|
||||
import { Tooltip } from 'primereact/tooltip';
|
||||
import { formatDateTime } from "@/utils/time";
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
import MoreInfo from '@/components/MoreInfo';
|
||||
|
||||
const CombinedContributionChart = ({ session }) => {
|
||||
const [contributionData, setContributionData] = useState({});
|
||||
@ -226,9 +227,26 @@ const CombinedContributionChart = ({ session }) => {
|
||||
<div className="w-full mx-2 bg-gray-800 rounded-lg border border-gray-700 shadow-md h-[330px] max-lap:mx-0 max-lap:mt-2">
|
||||
<div className="flex flex-row justify-between items-center p-4">
|
||||
<h1 className="text-2xl font-bold text-gray-200">Activity</h1>
|
||||
<i className="pi pi-question-circle text-2xl cursor-pointer text-gray-200"
|
||||
data-pr-tooltip="Combined total of GitHub commits and learning activities (starting/completing courses and lessons)" />
|
||||
<Tooltip target=".pi-question-circle" position="left" />
|
||||
<MoreInfo
|
||||
tooltip="Combined total of GitHub commits and learning activities"
|
||||
modalTitle="Activity Tracking"
|
||||
modalBody={
|
||||
<div className="space-y-4">
|
||||
<p>This chart combines two types of activities:</p>
|
||||
<ul className="list-disc pl-4">
|
||||
<li>GitHub Commits: Your code contributions on GitHub</li>
|
||||
<li>Learning Activities:
|
||||
<ul className="list-disc pl-4 mt-2">
|
||||
<li>Starting and completing courses</li>
|
||||
<li>Opening and completing lessons</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>The darker the green, the more combined activities on that day.</p>
|
||||
</div>
|
||||
}
|
||||
className="text-2xl text-gray-200"
|
||||
/>
|
||||
</div>
|
||||
<div className={`${getScaleClass(windowWidth)}`}>
|
||||
<div className="min-w-[910px] p-4">
|
||||
|
||||
@ -185,7 +185,6 @@ const InteractivePromotionalCarousel = () => {
|
||||
case "PLEBDEVS":
|
||||
return (
|
||||
<div className="flex flex-row gap-4 mt-4">
|
||||
{/* <GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="About" 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="All content" className="py-2 font-semibold" size="small" outlined />
|
||||
<GenericButton onClick={() => copyToClipboard()} icon={<i className="pi pi-bolt pr-2" />} label="Donate" className={`py-2 font-semibold text-yellow-300 ${yellowFocusOutlineStyle}`} size="small" outlined />
|
||||
|
||||
@ -7,6 +7,7 @@ import { useImageProxy } from '@/hooks/useImageProxy';
|
||||
import { useToast } from '@/hooks/useToast';
|
||||
import UserBadges from '@/components/profile/UserBadges';
|
||||
import useWindowWidth from '@/hooks/useWindowWidth';
|
||||
import MoreInfo from '@/components/MoreInfo';
|
||||
|
||||
const UserProfileCard = ({ user }) => {
|
||||
const [showBadges, setShowBadges] = useState(false);
|
||||
@ -80,8 +81,12 @@ const UserProfileCard = ({ user }) => {
|
||||
{nip19.npubEncode(user.pubkey)}
|
||||
</p>
|
||||
</div>
|
||||
<Tooltip target=".pubkey-tooltip" content={"this is your account pubkey"} />
|
||||
<i className="pi pi-question-circle pubkey-tooltip text-xs cursor-pointer shrink-0" />
|
||||
<MoreInfo
|
||||
tooltip="Your Nostr Public Key"
|
||||
modalTitle="Public Key Information"
|
||||
modalBody="Your public key is a unique identifier for your Nostr account. If you logged in with email, anon, or github this was generated for you by plebdevs and is used to link your account to the wider Nostr network."
|
||||
className="text-xs shrink-0"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -102,9 +107,12 @@ const UserProfileCard = ({ user }) => {
|
||||
<h4 >
|
||||
<span className="font-bold">Lightning Address:</span> None
|
||||
</h4>
|
||||
{/* todo: add tooltip */}
|
||||
<Tooltip target=".lightning-address-tooltip" content={"this is your account lightning address"} />
|
||||
<i className="pi pi-question-circle lightning-address-tooltip text-xs cursor-pointer" />
|
||||
<MoreInfo
|
||||
tooltip="PlebDevs Lightning Address Info"
|
||||
modalTitle="PlebDevs Lightning Address"
|
||||
modalBody="This is a placeholder for your PlebDevs issued Lightning Address (claimable through subscription). A lightning address is a way to receive Bitcoin payments through the Lightning Network. It works similar to an email address but for receiving Bitcoin payments."
|
||||
className="text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{user?.nip05 ? (
|
||||
@ -116,9 +124,12 @@ const UserProfileCard = ({ user }) => {
|
||||
<h4>
|
||||
<span className="font-bold">NIP-05:</span> None
|
||||
</h4>
|
||||
{/* todo: add tooltip */}
|
||||
<Tooltip target=".nip05-tooltip" content={"this is your account nip05"} />
|
||||
<i className="pi pi-question-circle nip05-tooltip text-xs cursor-pointer" />
|
||||
<MoreInfo
|
||||
tooltip="NIP-05 Info"
|
||||
modalTitle="What is NIP-05?"
|
||||
modalBody="This is a placeholder for your NIP-05 (claimable through subscription). NIP-05 is a a vanity name and verification standard in Nostr that links your identity to a domain name, similar to how Twitter verifies accounts. It helps prove ownership of your identity."
|
||||
className="text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col justify-center min-w-[140px] px-2">
|
||||
@ -166,8 +177,12 @@ const UserProfileCard = ({ user }) => {
|
||||
<p className="truncate">
|
||||
{nip19.npubEncode(user.pubkey).slice(0, 12)}...
|
||||
</p>
|
||||
<Tooltip target=".pubkey-tooltip" content={"this is your account pubkey"} />
|
||||
<i className="pi pi-question-circle pubkey-tooltip text-xs cursor-pointer" />
|
||||
<MoreInfo
|
||||
tooltip="Your Nostr Public Key"
|
||||
modalTitle="Public Key Information"
|
||||
modalBody="Your public key is a unique identifier for your Nostr account. If you logged in with email, anon, or github this was generated for you by plebdevs and is used to link your account to the wider Nostr network."
|
||||
className="text-xs shrink-0"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -188,9 +203,12 @@ const UserProfileCard = ({ user }) => {
|
||||
<h4 >
|
||||
<span className="font-bold">Lightning Address:</span> None
|
||||
</h4>
|
||||
{/* todo: add tooltip */}
|
||||
<Tooltip target=".lightning-address-tooltip" content={"this is your account lightning address"} />
|
||||
<i className="pi pi-question-circle lightning-address-tooltip text-xs cursor-pointer" />
|
||||
<MoreInfo
|
||||
tooltip="Lightning Address Info"
|
||||
modalTitle="Lightning Address"
|
||||
modalBody="A Lightning address allows you to receive Bitcoin payments through the Lightning Network. It works similar to an email address but for Bitcoin transactions."
|
||||
className="text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{user?.nip05 ? (
|
||||
@ -202,9 +220,12 @@ const UserProfileCard = ({ user }) => {
|
||||
<h4>
|
||||
<span className="font-bold">NIP-05:</span> None
|
||||
</h4>
|
||||
{/* todo: add tooltip */}
|
||||
<Tooltip target=".nip05-tooltip" content={"this is your account nip05"} />
|
||||
<i className="pi pi-question-circle nip05-tooltip text-xs cursor-pointer" />
|
||||
<MoreInfo
|
||||
tooltip="NIP-05 Info"
|
||||
modalTitle="What is NIP-05?"
|
||||
modalBody="NIP-05 is a verification standard in Nostr that links your identity to a domain name, similar to how Twitter verifies accounts. It helps prove ownership of your identity."
|
||||
className="text-xs"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
|
||||
@ -8,6 +8,7 @@ import GenericButton from '@/components/buttons/GenericButton';
|
||||
import UserProgressFlow from './UserProgressFlow';
|
||||
import { Tooltip } from 'primereact/tooltip';
|
||||
import RepoSelector from '@/components/profile/RepoSelector';
|
||||
import MoreInfo from '@/components/MoreInfo';
|
||||
|
||||
const allTasks = [
|
||||
{
|
||||
@ -191,8 +192,12 @@ const UserProgress = () => {
|
||||
<div className="bg-gray-800 rounded-lg p-4 pb-0 m-2 w-full border border-gray-700 shadow-md max-lap:mx-0">
|
||||
<div className="flex flex-row justify-between items-center">
|
||||
<h1 className="text-3xl font-bold text-white mb-2">Dev Journey</h1>
|
||||
<i className="pi pi-question-circle journey-tooltip text-2xl cursor-pointer text-gray-200" />
|
||||
<Tooltip target=".journey-tooltip" position="left" className="w-[300px]" content="This is an optional Dev Journey that will walk you through the primary course materials and help you learn how to code, gain the required experience to Build Bitcoin/Lightning/Nostr Apps, and set you up to go through the rest of the free workshops and other content on the platform." />
|
||||
<MoreInfo
|
||||
tooltip="Learn about the Dev Journey"
|
||||
modalTitle="Dev Journey"
|
||||
modalBody="This is an optional Dev Journey that will walk you through the primary course materials and help you learn how to code, gain the required experience to Build Bitcoin/Lightning/Nostr Apps, and set you up to go through the rest of the free workshops and other content on the platform."
|
||||
className="text-2xl text-gray-200"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-gray-400 mb-4">Track your progress through the courses, showcase your GitHub contributions, submit projects, and earn badges!</p>
|
||||
|
||||
@ -278,11 +283,12 @@ const UserProgress = () => {
|
||||
{subTask.status}
|
||||
</span>
|
||||
{subTask.status === 'Connect your GitHub account' && (
|
||||
<>
|
||||
<i className="pi pi-question-circle github-tooltip ml-2 text-sm cursor-pointer text-gray-200"
|
||||
data-pr-tooltip="Connect your GitHub account to track your progress and submit projects" />
|
||||
<Tooltip target=".github-tooltip" position="right" />
|
||||
</>
|
||||
<MoreInfo
|
||||
tooltip="GitHub Connection Info"
|
||||
modalTitle="Connect GitHub Account"
|
||||
modalBody="Connect your GitHub account to track your progress and submit projects. This allows us to verify your project submissions and track your development journey."
|
||||
className="ml-2 text-sm text-gray-200"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{subTask.status.includes('repository') && !subTask.completed && (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user