29 lines
1.0 KiB
TypeScript
29 lines
1.0 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import classnames from 'classnames';
|
||
|
|
import DashboardPieChart from '@/components/DashboardPieChart';
|
||
|
|
|
||
|
|
import { Schibsted_Grotesk } from 'next/font/google'
|
||
|
|
const font = Schibsted_Grotesk({ subsets: ['latin'] })
|
||
|
|
|
||
|
|
interface DeductableProgressWidgetProps {
|
||
|
|
}
|
||
|
|
|
||
|
|
const DeductableProgressWidget = () => {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl z-1">
|
||
|
|
<div className="flex justify-between items-end px-4">
|
||
|
|
<p className={classnames("pb-18 text-[#32CD32] font-semibold", font.className)}>Paid</p>
|
||
|
|
<div className="flex flex-col items-center">
|
||
|
|
<DashboardPieChart paid={1007.23} remaining={492.77} />
|
||
|
|
<p className="text-2xl">Deductable Progress</p>
|
||
|
|
</div>
|
||
|
|
<p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default DeductableProgressWidget;
|