fp/packages/next/app/goals/page.tsx

82 lines
3.1 KiB
TypeScript

import { getGoals } from "@/app/lib/pm";
import { getCampaign } from "@/app/lib/patreon";
interface IFundingStatusBadgeProps {
completedPercentage: number;
}
function FundingStatusBadge({ completedPercentage }: IFundingStatusBadgeProps) {
if (completedPercentage === 100) return <span className="tag is-success">Funded</span>;
return (
<span className="tag is-warning">
<span className="mr-1">
{completedPercentage}% Funded
</span>
</span>
);
}
// export interface IGoals {
// complete: IIssue[];
// inProgress: IIssue[];
// planned: IIssue[];
// featuredFunded: IIssue;
// featuredUnfunded: IIssue;
// }
export default async function Page() {
const { pledgeSum } = await getCampaign()
const goals = await getGoals(pledgeSum);
if (!goals) return <p>failed to get goals</p>
const { inProgress, planned, complete } = goals;
return (
<>
<div className="content">
<div className="block">
<div className="section">
<h1 className="title">Goals</h1>
<p className="subtitle">Shooting for the stars</p>
</div>
<div className="section">
<p className="title is-size-4">
<span>In Progress</span>
</p>
<ul className="">
{inProgress.map((goal) => (
<li key={goal.id}>
{goal.title} {(!!goal?.amountCents && !!goal.completedPercentage) && <FundingStatusBadge completedPercentage={goal.completedPercentage} />}
</li>
))}
</ul>
</div>
<div className="section">
<p className="title is-size-4">
Planned
</p>
<ul className="">
{planned.map((goal) => (
<li key={goal.id}>
{goal.title} {(!!goal?.amountCents && !!goal.completedPercentage) && <FundingStatusBadge completedPercentage={goal.completedPercentage} />}
</li>
))}
</ul>
</div>
<div className="section">
<p className="title is-size-4">
<span>Completed</span>
</p>
<ul className="">
{complete.map((goal) => (
<li key={goal.id}>
{goal.title} {(!!goal?.amountCents && !!goal.completedPercentage) && <FundingStatusBadge completedPercentage={goal.completedPercentage} />}
</li>
))}
</ul>
</div>
</div>
</div>
</>
)
}