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

move purchases into settings, placeholder for progress data table on user profile

Browse Source
This commit is contained in:
austinkelsay 2024-09-22 15:19:40 -05:00
parent 96a6a29936
commit eb1b8675b9
4 changed files with 53 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/charts/GithubContributionChart.js
View File

@ -50,7 +50,7 @@ const GithubContributionChart = ({ username }) => {
const calendar = generateCalendar();
return (
<div className="mx-auto py-2 px-4 max-w-[900px] bg-gray-900 rounded-lg">
<div className="mx-auto py-2 px-4 max-w-[900px] bg-gray-800 rounded-lg">
{(isLoading || isFetching) && <p>Loading contribution data... ({totalCommits} commits fetched)</p>}
{!isLoading && !isFetching &&
<div className="flex justify-between items-center pr-1">
@ -68,7 +68,7 @@ const GithubContributionChart = ({ username }) => {
></div>
))}
</div>
<div className="mt-2 text-sm text-gray-500 flex items-center">
<div className="mt-2 text-sm text-gray-400 flex items-center">
<span className="mr-2">Less</span>
<div className="flex gap-1">
<div className="w-3 h-3 bg-gray-100 rounded-sm"></div>

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

@ -50,7 +50,7 @@ const UserProfile = () => {
const header = (
<div className="flex flex-wrap align-items-center justify-content-between gap-2">
<span className="text-xl text-900 font-bold text-[#f8f8ff]">Purchases</span>
<span className="text-xl text-900 font-bold text-[#f8f8ff]">Progress</span>
</div>
);
@ -92,7 +92,7 @@ const UserProfile = () => {
<div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
) : (
<DataTable
emptyMessage="No purchases"
emptyMessage="No Courses or Milestones completed"
value={session.user?.purchased}
header={header}
style={{ maxWidth: windowWidth < 768 ? "100%" : "90%", margin: "0 auto", borderRadius: "10px" }}

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

@ -8,6 +8,8 @@ import { ProgressSpinner } from "primereact/progressspinner";
import { useNDKContext } from "@/context/NDKContext";
import useWindowWidth from "@/hooks/useWindowWidth";
import Image from "next/image";
import PurchasedListItem from "@/components/profile/PurchasedListItem";
import { formatDateTime } from "@/utils/time";
import BitcoinConnectButton from "@/components/bitcoinConnect/BitcoinConnect";
import { Panel } from "primereact/panel";
import { nip19 } from "nostr-tools";
@ -136,13 +138,23 @@ const UserSettings = () => {
const PanelHeader = (options) => {
return (
<div className="w-full flex flex-row justify-between p-4 bg-gray-800 rounded-t-lg">
<p className="text-[#f8f8ff] text-xl font-bold">Relays</p>
<GenericButton onClick={options.onTogglerClick} icon="pi pi-plus" className="p-button-rounded p-button-success p-button-text" />
<div className="flex flex-row justify-between px-4 py-[6px] bg-gray-800 rounded-t-lg border-b border-gray-700">
<p className="text-[#f8f8ff] text-900 text-xl mt-2 h-fit font-bold">Relays</p>
<GenericButton
onClick={options.onTogglerClick}
icon={options.collapsed ? "pi pi-plus" : "pi pi-minus"}
className="p-button-rounded p-button-success p-button-text"
/>
</div>
);
};
const header = (
<div className="flex flex-wrap align-items-center justify-content-between gap-2">
<span className="text-xl text-900 font-bold text-[#f8f8ff]">Purchases</span>
</div>
);
return (
user && (
<div className="p-4">
@ -169,7 +181,7 @@ const UserSettings = () => {
<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">
<div className="flex flex-col w-1/2 mx-auto justify-between items-center">
<h2 className="text-xl my-2 max-mob:text-base max-tab:text-base">Connect Your Lightning Wallet</h2>
<BitcoinConnectButton />
</div>
@ -180,7 +192,8 @@ const UserSettings = () => {
{!session || !session?.user || !ndk ? (
<div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
) : (
<>
<div className="flex justify-between" style={{ flexDirection: windowWidth < 768 ? "column" : "row", gap: "1rem" }}>
<div className="flex flex-col" style={{ width: windowWidth < 768 ? "100%" : "49%" }}>
<Panel
headerTemplate={PanelHeader}
toggleable
@ -215,9 +228,35 @@ const UserSettings = () => {
>
<Column field={(url) => url} header="Relay URL"></Column>
<Column body={relayStatusBody} header="Status"></Column>
<Column body={relayActionsBody} header="Actions"></Column>
</DataTable>
</>
<Column body={relayActionsBody} header="Actions"></Column>
</DataTable>
</div>
<DataTable
emptyMessage="No purchases"
value={session.user?.purchased}
header={header}
style={{ width: windowWidth < 768 ? "100%" : "49%", borderRadius: "10px" }}
pt={{
wrapper: {
className: "rounded-lg rounded-t-none"
},
header: {
className: "rounded-t-lg"
}
}}
>
<Column field="amountPaid" header="Cost"></Column>
<Column
body={(rowData) => {
console.log("rowData", rowData);
return <PurchasedListItem eventId={rowData?.resource?.noteId || rowData?.course?.noteId} category={rowData?.course ? "courses" : "resources"} />
}}
header="Name"
></Column>
<Column body={session.user?.purchased?.some((item) => item.courseId) ? "course" : "resource"} header="Category"></Column>
<Column body={rowData => formatDateTime(rowData?.createdAt)} header="Date"></Column>
</DataTable>
</div>
)}
</div>
)

4
src/components/profile/progress/UserProgress.js
View File

@ -44,7 +44,7 @@ const UserProgress = () => {
];
return (
<div className="bg-gray-900 rounded-3xl p-6 w-[500px] mx-auto my-8">
<div className="bg-gray-800 rounded-3xl p-6 w-[500px] mx-auto my-8">
<h1 className="text-3xl font-bold text-white mb-2">Your Dev Journey</h1>
<p className="text-gray-400 mb-4">Track your progress from Pleb to Plebdev</p>
@ -78,7 +78,7 @@ const UserProgress = () => {
headerIcon: { className: 'hidden' },
}}
header={
<div className="bg-gray-900 flex items-center justify-between w-full font-normal">
<div className="bg-gray-800 flex items-center justify-between w-full font-normal">
<div className="flex items-center">
<div className="w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center mr-3">
<span className="text-white text-sm">{index + 1}</span>