89 lines
4.0 KiB
TypeScript
89 lines
4.0 KiB
TypeScript
|
|
import { getCampaign } from "@/lib/patreon";
|
|
import { getGoals, IGoals } from '@/lib/pm'
|
|
import Image from "next/legacy/image";
|
|
import React from 'react';
|
|
import Link from 'next/link'
|
|
|
|
|
|
|
|
export default async function FundingGoal(): Promise<React.JSX.Element> {
|
|
const campaignData = await getCampaign();
|
|
const { pledgeSum, patronCount } = campaignData;
|
|
|
|
const goals = await getGoals(pledgeSum);
|
|
if (!goals || !goals?.featuredFunded?.amountCents || !goals?.featuredUnfunded?.amountCents || !goals?.featuredFunded?.amountCents || !goals?.featuredUnfunded?.completedPercentage || !goals?.featuredFunded?.completedPercentage ) return <></>
|
|
|
|
return (
|
|
<>
|
|
{/* <p>
|
|
pledgeSum:{JSON.stringify(pledgeSum, null, 2)}
|
|
</p>
|
|
<p>
|
|
patronCount:{JSON.stringify(patronCount, null, 2)}
|
|
</p>
|
|
<p>featuredFunded:{JSON.stringify(goals.featuredFunded)}</p>
|
|
<p>featuredUnfunded:{JSON.stringify(goals.featuredUnfunded)}</p> */}
|
|
|
|
{/* <pre>
|
|
<code>
|
|
{JSON.stringify(goals, null, 2)}
|
|
</code>
|
|
</pre> */}
|
|
<div className="section">
|
|
|
|
|
|
<article className="message">
|
|
<div className="message-header">
|
|
Funding Goal
|
|
<figure className="image is-32x32 is-rounded">
|
|
<Link target="_blank" href="https://twitter.com/cj_clippy">
|
|
<Image
|
|
className="is-rounded"
|
|
src="https://futureporn-b2.b-cdn.net/cj_clippy.jpg"
|
|
alt="CJ_Clippy"
|
|
layout="fill" />
|
|
</Link>
|
|
</figure>
|
|
</div>
|
|
<div className="message-body has-text-centered">
|
|
<div className="columns">
|
|
{/* the most recently funded goal */}
|
|
<div className="column is-one-third">
|
|
{/* const { featuredFunded, featuredUnfunded } = goals;
|
|
if (!featuredFunded?.amountCents || !featuredFunded?.completedPercentage) return <></>
|
|
if (!featuredUnfunded?.amountCents || !featuredUnfunded?.completedPercentage) return <></> */}
|
|
|
|
<p className="subtitle">${(goals.featuredFunded.amountCents * (goals.featuredFunded.completedPercentage * 0.01) / 100)} of {goals.featuredFunded.amountCents / 100} ({goals.featuredFunded.completedPercentage}%)
|
|
</p>
|
|
<div className="mb-5 tag is-success has-text-white is-rounded" style={{ width: '100%' }}>
|
|
FUNDED
|
|
</div>
|
|
<p>{goals.featuredFunded.description}</p>
|
|
</div>
|
|
|
|
{/* the next unfunded goal */}
|
|
<div className="column is-two-thirds">
|
|
<p className="subtitle">${(goals.featuredUnfunded.amountCents * (goals.featuredUnfunded.completedPercentage * 0.01) / 100) | 0} of ${goals.featuredUnfunded.amountCents / 100} ({goals.featuredUnfunded.completedPercentage}%)</p>
|
|
<progress
|
|
className="progress is-info is-large"
|
|
value={goals.featuredUnfunded.completedPercentage}
|
|
max="100"
|
|
>
|
|
{goals.featuredUnfunded.completedPercentage}%
|
|
</progress>
|
|
<p>{goals.featuredUnfunded.description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="mt-3 subtitle is-4">
|
|
Thank you, <Link href="/patrons">Patrons!</Link>
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|