diff --git a/components/Caption.tsx b/components/Caption.tsx new file mode 100644 index 00000000000..b31fad6ec6e --- /dev/null +++ b/components/Caption.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +interface CaptionProps { + children: React.ReactNode; +} + +/** + * @description This component displays textual captions. + * + * @param {CaptionProps} props - The props for the Caption component. + * @param {React.ReactNode} props.children - The content to be displayed as the caption. + */ +export default function Caption({ children } : CaptionProps) { + return ( +
+ {children} +
+ ); +}; diff --git a/components/FinancialSummary/AsyncAPISummary.tsx b/components/FinancialSummary/AsyncAPISummary.tsx new file mode 100644 index 00000000000..280a24b476f --- /dev/null +++ b/components/FinancialSummary/AsyncAPISummary.tsx @@ -0,0 +1,78 @@ +import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading'; +import { ParagraphTypeStyle } from '@/types/typography/Paragraph'; + +import Button from '../buttons/Button'; +import Heading from '../typography/Heading'; +import Paragraph from '../typography/Paragraph'; + +/** + * @description Component representing the AsyncAPI Financial Summary. + */ +export default function AsyncAPISummary() { + return ( +Gain insights into the allocation of funds across different categories through our Budget Analysis
+Expenses
+${totalAmount.toFixed(2)}
+{data.Category}
+${data.Amount.toFixed(2)}
+Click the bar to learn more
+{form.description}
+Tiers | +Amounts | +Benefits | +
---|---|---|
+ {tier.tier} + | ++ {tier.amount} + | ++ {tier.benefits} + | +
+ Thanks to financial support we can already see many
+
success stories in the project.
+
{story.description}
+ {story.linkText && story.linkUrl && ( +