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
Dockerfile.dev
+1 -1
View File
@@ -8,7 +8,7 @@ WORKDIR /usr/src/app
COPY package*.json ./
# Install dependencies
RUN npm install
RUN npm install --legacy-peer-deps
# Copy the rest of your application code
COPY . .
package-lock.json
Generated
+39
View File
@@ -8,6 +8,7 @@
"name": "britton-site",
"version": "2.0.0",
"dependencies": {
"fluid-tailwind": "^1.0.4",
"next": "15.3.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
@@ -3824,6 +3825,18 @@
"node": ">=8"
}
},
"node_modules/filter-obj": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
"integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
"license": "MIT",
"engines": {
"node": ">=14.16"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/find-up": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -3862,6 +3875,20 @@
"dev": true,
"license": "ISC"
},
"node_modules/fluid-tailwind": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/fluid-tailwind/-/fluid-tailwind-1.0.4.tgz",
"integrity": "sha512-jO1+4l4r3kE/5We3kYRl3o4JsbFA2zoluEwJG3VrytlKuCfK4aTv5QHqXgOaw0YQd9HKjOVIFYsVvhG8sxIh5w==",
"license": "MIT",
"dependencies": {
"filter-obj": "^5.1.0",
"map-obj": "^5.0.2",
"picocolors": "^1.0.0"
},
"peerDependencies": {
"tailwindcss": "^3.2.0"
}
},
"node_modules/for-each": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -5079,6 +5106,18 @@
"@jridgewell/sourcemap-codec": "^1.5.0"
}
},
"node_modules/map-obj": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-5.0.2.tgz",
"integrity": "sha512-K6K2NgKnTXimT3779/4KxSvobxOtMmx1LBZ3NwRxT/MDIR3Br/fQ4Q+WCX5QxjyUR8zg5+RV9Tbf2c5pAWTD2A==",
"license": "MIT",
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/math-intrinsics": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
src/app/(informational)/employers/index.tsx
+2 -2
View File
@@ -1,5 +1,5 @@
import LandingPage from '../../components/LandingPage';
import InlineLink from "../../components/InlineLink";
import LandingPage from '../../../components/LandingPage';
import InlineLink from "../../../components/InlineLink";
// import TextImage50 from "../../components/TextImage50-50";
export default function Members() {
src/app/dashboard/layout.tsx
+2 -2
View File
@@ -21,7 +21,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
<Script src={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_PLACES_API_KEY}&libraries=places`} strategy="beforeInteractive" />
<div className="absolute bottom-0 right-0 flex flex-col justify-end items-end w-full h-full">
<div className="w-full -mb-[2px] flex justify-start">
<div className="w-23/24 h-20 border-b-2 border-copper z-2" />
<div className="w-[87vw] sm:w-[91vw] md:w-[93vw] lg:w-[94.5vw] xl:w-[95.5vw] h-20 border-b-2 border-copper z-2" />
</div>
<div className="w-[60px] h-full flex justify-start">
<div className="w-[32.5px] flex flex-col">
@@ -37,7 +37,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
bgColor="bg-atmosphere"
navItems={pageNavItems}
/>
<div className="w-full min-w-[89vw] max-w-[95vw] flex flex-col items-end">
<div className="w-full min-w-[87vw] max-w-[94vw] lg:min-w-[89vw] lg:max-w-[95vw] flex flex-col items-end">
<div className="w-[90.15vw] h-20 flex justify-between items-center">
<div className={classnames('flex items-center')}>
<div className="-ml-8.5 z-2">
src/app/dashboard/member/indexold.tsx
-44
View File
@@ -51,29 +51,6 @@ export default function Member() {
</div>
</div>
<div className="w-full h-full flex justify-start">
{/* <div className="relative w-31 h-full flex flex-col text-deepcove text-center bg-atmosphere divide-y divide-bluetang">
<a href="#" className="w-full h-20 flex justify-center items-center bg-bluetang text-platinum">
Dashboard
</a>
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
My Plan & Benefits
</a>
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
Plan Utilization
</a>
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
Claims & Authorizations
</a>
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
Providers & Services
</a>
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum">
Insurance Card
</a>
<a href="#" className="w-full h-20 flex justify-center items-center hover:text-platinum border-b border-bluetang">
Benefits Documents
</a>
</div> */}
<SideNav
maxWidth="max-w-31"
bgColor="bg-atmosphere"
@@ -280,27 +257,6 @@ export default function Member() {
</div>
</div>
</div>
{/* <div className="flex space-x-4">
<div className="flex flex-col justify-center items-center text-xl border border-6 border-bluetang rounded-4xl">
<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={758.72} remaining={741.28} />
<p className="text-2xl">Deductable Progress</p>
</div>
<p className={classnames("pb-18 font-semibold", font.className)}>Remaining</p>
</div>
</div>
<div className="flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-copper rounded-4xl">
<div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
<FaRegIdCard size={150} className="text-bronze" />
<div className={classnames("w-full flex justify-evenly items-center space-x-1", font.className)}>
<div className="hover:text-bronze">View</div>
<p>|</p>
<div className="hover:text-bronze">Download</div>
</div>
</div>
</div> */}
</div>
<div className="w-2/5 flex flex-col justify-start items-center px-4 py-3 text-xl border border-6 border-platinum rounded-4xl">
<p className="text-3xl underline py-2">Benefits At A Glance</p>
src/app/dashboard/member/page.tsx
+2 -2
View File
@@ -14,9 +14,9 @@ export default function Member() {
userDisplayName="Robert La'Blah"
/>
<div className="flex w-full pr-23">
<div className={classnames("w-full flex flex-col xl:flex-row justify-stretch pt-4 z-2 space-x-4 space-y-4 xl:space-y-0")}>
<div className={classnames("w-full flex flex-col xl:flex-row pt-4 z-2 space-x-4 space-y-4 xl:space-y-0")}>
<div className="flex flex-col space-y-4">
<div className="flex space-x-4">
<div className="flex flex-col w-full h-full xl:h-auto lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4">
<DeductableProgressWidget />
<InsuranceCardWidget />
</div>
src/components/DashboardPieChart.tsx
+22 -21
View File
@@ -63,27 +63,28 @@ const DashboardPieChart: React.FC<DashboardPieChartProps> = ({paid, remaining})
{ name: 'Deductable Remaining', value: remaining },
];
return (
<div className="w-full h-full">
<PieChart width={250} height={140} title="Deductable Progress">
<Pie
data={data}
startAngle={180}
endAngle={0}
cx="50%"
cy="100%"
labelLine={false}
label={renderCustomizedLabel}
outerRadius={120}
fill="#2A4B6F"
dataKey="value"
stroke="#04153E"
strokeWidth={2}
>
{data.map((entry, index) => (
<Cell key={`cell-${entry.name}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
</PieChart>
<div className="w-full min-h-[135px]">
<ResponsiveContainer width="100%" height="100%">
<PieChart title="Deductable Progress">
<Pie
data={data}
startAngle={180}
endAngle={0}
cx="50%"
cy="100%"
labelLine={false}
label={renderCustomizedLabel}
fill="#2A4B6F"
dataKey="value"
stroke="#04153E"
strokeWidth={2}
>
{data.map((entry, index) => (
<Cell key={`cell-${entry.name}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
</PieChart>
</ResponsiveContainer>
</div>
);
};
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>
);
src/components/DynamicIcon.tsx
-1
View File
@@ -25,7 +25,6 @@ const iconMap: iconMapType = {
type DynamicIconProps = IconBaseProps & {
iconName: string;
size?: number;
};
// interface DynamicIconProps {
src/components/InsuranceCard.tsx
+8 -4
View File
@@ -10,10 +10,14 @@ const font = Schibsted_Grotesk({ subsets: ['latin'] })
const InsuranceCardWidget = () => {
return (
<div className="2xl:min-w-[16vw] xl:min-w-[15vw] flex flex-col justify-center items-center px-4 py-3 text-xl border border-6 border-atmosphere rounded-4xl z-1">
<div className="text-deepcove -mb-11 z-3 font-semibold">My Card</div>
<FaRegIdCard size={150} className="text-bluemana" />
<div className={classnames("w-full 2xl:min-w-[9vw] xl:min-w-[11vw] flex justify-between items-center space-x-1", font.className)}>
<div className="2xl:min-w-[16vw] xl:min-w-[15vw] w-full h-full flex lg:flex-col justify-center items-center text-xl space-x-10 lg:space-x-0 border border-6 border-atmosphere rounded-4xl z-1">
<div className="flex flex-col justify-end items-center">
<div className="z-3 flex items-end">
<div className="text-deepcove -mb-11 font-semibold">My Card</div>
</div>
<FaRegIdCard size={150} className="text-bluemana" />
</div>
<div className={classnames("flex justify-between items-center space-x-1", font.className)}>
<Button className="hover:text-bronze">
View
</Button>
src/components/SideNav.tsx
+3 -3
View File
@@ -34,8 +34,8 @@ const SideNav: React.FC<SideNavProps> = (
"relative h-full flex flex-col text-deepcove text-center transition-all duration-500",
bgColor,
{
"w-[5vw]" : !isSidebarOpen,
"w-[11vw]" : isSidebarOpen
"w-[6vw] lg:w-[5vw]" : !isSidebarOpen,
"w-[13vw] lg:w-[11vw]" : isSidebarOpen
}
)}>
@@ -49,7 +49,7 @@ const SideNav: React.FC<SideNavProps> = (
<div className="flex flex-col divide-y divide-bluetang">
{navItems.map((navItem, index) => (
<a href={navItem.url} className={classnames(
"w-full h-20 flex justify-center items-center font-semibold hover:text-platinum",
"w-full h-20 flex justify-center items-center px-1 text-xs md:text-sm lg:text-base font-semibold hover:text-platinum",
{"bg-bluetang text-platinum" : index == 0}
)}>
{isSidebarOpen ? (
tailwind.config.ts
+15
View File
@@ -1,5 +1,20 @@
import fluid, { extract, screens, fontSize } from 'fluid-tailwind'
module.exports = {
// Define content paths for Tailwind CSS to scan for classes
content: {
files: [
'./src/components/**/*.{tsx}',
'./src/app/**/*.{tsx}',
],
extract, // Use the extract function from fluid-tailwind
},
theme: {
extend: {},
screens, // Integrate fluid-tailwind's screens for responsive breakpoints
fontSize, // Integrate fluid-tailwind's font sizes for fluid typography
},
plugins: [
fluid, // Include the fluid-tailwind plugin
],
};