layouts and components, oh my!

src/components/DeductableProgressWidget.tsx

@@ -0,0 +1,29 @@
+"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;