Britton/next-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

too much time on responsive, on to hooking up cms

Browse Source
This commit is contained in:
Jason Jordan
2025-08-04 14:16:42 -04:00
parent 0e44bd53e6
commit 181be7e16c
12 changed files with 109 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DeductableProgressWidget.tsx
+14 -7
View File
@@ -4,6 +4,8 @@ import React, { useState } from 'react';
import classnames from 'classnames';
import DashboardPieChart from '@/components/DashboardPieChart';
import Button from '@/components/Button';
import { Schibsted_Grotesk } from 'next/font/google'
const font = Schibsted_Grotesk({ subsets: ['latin'] })
@@ -13,14 +15,19 @@ interface DeductableProgressWidgetProps {
const DeductableProgressWidget = () => {
return (
<div className="2xl:min-w-[32vw] xl:min-w-[30vw] min-w-[50vw] 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 className="w-full lg:h-full flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl z-1">
<div className="2xl:min-w-[32vw] xl:w-[27vw] lg:w-[27vw] md:w-[27vw] flex flex-col justify-center items-center p-2">
<div className="text-2xl">Deductable Progress</div>
<DashboardPieChart paid={1007.23} remaining={492.77} />
<div className={classnames("w-full flex font-semibold text-center", font.className)}>
<div className="w-[50vw] text-[#32CD32]">Paid</div>
<div className="w-[50vw]">Remaining</div>
</div>
<div className={classnames("w-full flex justify-end text-platinum font-semibold text-base")}>
<Button className="pr-4 underline hover:text-bronze">
View Details
</Button>
</div>
<p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
</div>
</div>
);