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> </> ); };