Remove RightToTrialActPage and implement domain-specific navigation

Deleted the RightToTrialActPage component and replaced static navigation links with dynamic domain-specific ones. Added configurations for dfda and wishonia domains, allowing tailored navigation setups for each, and updated related components to utilize the new navigation structure.

Took 24 minutes

Author: mikepsinn

app/dfda/components/DFDAFooter.tsx

@@ -1,9 +1,40 @@
-'use client'
+"use client"
 
-export default function DFDAFooter() {
+import Link from "next/link"
+import { NavItem } from "@/types"
+
+interface DFDAFooterProps {
+  navItems?: NavItem[]
+}
+
+export default function DFDAFooter({ navItems = [] }: DFDAFooterProps) {
   return (
     <footer className="mt-12 rounded-xl border-4 border-black bg-white p-4 text-center font-bold shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
-      <p>&copy; 2023 dFDA - Empowering patients, revolutionizing healthcare 🚀</p>
+      <div className="mb-4">
+        <ul className="flex flex-wrap justify-center gap-4">
+          {navItems.map((item, index) => (
+            <li key={index}>
+              {item.external ? (
+                <a
+                  href={item.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:underline"
+                >
+                  {item.title}
+                </a>
+              ) : (
+                <Link href={item.href} className="hover:underline">
+                  {item.title}
+                </Link>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+      <p>
+        &copy; 2023 dFDA - Empowering patients, revolutionizing healthcare 🚀
+      </p>
     </footer>
   )
-} 
+}

app/dfda/components/DfdaTopNavbar.tsx

@@ -5,28 +5,33 @@ import Link from "next/link"
 import { NavItem } from "@/types"
 import { User } from "next-auth"
 
-import { dfdaAvatarNav, generalDashboardTopNav } from "@/config/links"
+import { getNavigationForDomain } from "@/config/navigation"
 import { UserNavDisplay } from "@/components/user/user-nav-display"
+
 import { DfdaLogoNavMenu } from "./dfda-logo-nav"
 
 interface NavbarProps extends React.HTMLAttributes<HTMLDivElement> {
   user: Pick<User, "name" | "image" | "email">
+  domain?: string
   logoNavItems?: NavItem[]
   topNavItems?: NavItem[]
   avatarNavItems?: NavItem[]
 }
 
 export default function DfdaTopNavbar({
   user,
+  domain = "dfda.earth",
   logoNavItems,
   topNavItems,
   avatarNavItems,
 }: NavbarProps) {
+  const navigation = getNavigationForDomain(domain)
+
   if (!topNavItems) {
-    topNavItems = generalDashboardTopNav.data
+    topNavItems = navigation.topNav
   }
-  if(!avatarNavItems) {
-    avatarNavItems = dfdaAvatarNav.data
+  if (!avatarNavItems) {
+    avatarNavItems = navigation.avatarNav
   }
   return (
     <header className="select-none">

app/dfda/components/right-to-trial-act.tsx

@@ -1,17 +1,18 @@
 import React from "react"
 
+import { getNavigationForDomain } from "@/config/navigation"
 import { getCurrentUser } from "@/lib/session"
+
+import DFDAFooter from "./components/DFDAFooter"
 import DfdaTopNavbar from "./components/DfdaTopNavbar"
-import DFDAFooter from './components/DFDAFooter'
 
-interface DashboardLayoutProps {
+interface DFDALayoutProps {
   children: React.ReactNode
 }
 
-export default async function DashboardLayout({
-  children,
-}: DashboardLayoutProps) {
+export default async function DFDALayout({ children }: DFDALayoutProps) {
   const user = await getCurrentUser()
+  const navigation = getNavigationForDomain("dfda.earth")
 
   return (
     <div className="flex min-h-screen flex-col bg-gradient-to-br from-cyan-300 to-purple-400 p-4 font-mono text-black md:p-8">
@@ -21,13 +22,13 @@ export default async function DashboardLayout({
           image: user?.image,
           email: user?.email,
         }}
+        topNavItems={navigation.topNav}
+        avatarNavItems={navigation.avatarNav}
       />
-      <main className="flex-1">
-        {children}
-      </main>
+      <main className="flex-1">{children}</main>
       <div className="px-4 pb-4">
-        <DFDAFooter />
+        <DFDAFooter navItems={navigation.footerNav} />
       </div>
     </div>
   )
-}
+}

app/dfda/layout.tsx

@@ -1,11 +1,9 @@
-'use client';
-
-import React, { useState } from 'react';
-import { motion } from 'framer-motion';
-
-
+"use client"
 
+import React, { useState } from "react"
+import { motion } from "framer-motion"
 
+import CostSavingsTable from "../../components/CostSavingsTable"
 
 // First, let's define the interfaces
 interface Section {
@@ -47,11 +45,17 @@ const Header = () => (
     <h1 className="mb-4 text-5xl font-black uppercase tracking-tight">
       RIGHT TO TRIAL ACT 🧪💊
     </h1>
-    <p className="text-xl font-bold">Faster Cures, Lower Costs, Universal Access 🚀🏥</p>
+    <p className="text-xl font-bold">
+      Faster Cures, Lower Costs, Universal Access 🚀🏥
+    </p>
   </header>
 )
 
-const Navigation = ({ sections, activeSection, setActiveSection }: NavigationProps) => (
+const Navigation = ({
+  sections,
+  activeSection,
+  setActiveSection,
+}: NavigationProps) => (
   <nav className="mb-8 flex flex-wrap justify-center gap-4">
     {sections.map((section) => (
       <button
@@ -70,12 +74,14 @@ const Navigation = ({ sections, activeSection, setActiveSection }: NavigationPro
 )
 
 const Card = ({ title, items, bgColor }: CardProps) => (
-  <div className={`rounded-lg border-2 border-black ${bgColor} p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]`}>
+  <div
+    className={`rounded-lg border-2 border-black ${bgColor} p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]`}
+  >
     <h3 className="mb-4 text-xl font-bold">{title}</h3>
     <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
       {items.map((item, index) => (
-        <div 
-          key={index} 
+        <div
+          key={index}
           className="rounded-lg border-2 border-black bg-white p-4 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] transition-transform hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-none"
         >
           <div className="text-center">
@@ -89,7 +95,9 @@ const Card = ({ title, items, bgColor }: CardProps) => (
 )
 
 const ListCard = ({ title, items, bgColor }: ListCardProps) => (
-  <div className={`rounded-lg border-2 border-black ${bgColor} p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]`}>
+  <div
+    className={`rounded-lg border-2 border-black ${bgColor} p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]`}
+  >
     <h3 className="mb-4 text-xl font-bold">{title}</h3>
     <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
       {items.map((item, index) => (
@@ -113,8 +121,14 @@ const Overview = ({ problems, solutions }: OverviewProps) => (
   >
     <h2 className="mb-4 text-3xl font-black">Overview & Findings 📜</h2>
     <h3 className="mb-2 text-xl font-bold">Title 🏷️</h3>
-    <p className="mb-4 text-lg">This Act may be cited as the "Right to Trial Act" 📋</p>
-    <Card title="Core Problems This Act Solves 🛠️" items={problems} bgColor="bg-red-200" />
+    <p className="mb-4 text-lg">
+      This Act may be cited as the "Right to Trial Act" 📋
+    </p>
+    <Card
+      title="Core Problems This Act Solves 🛠️"
+      items={problems}
+      bgColor="bg-red-200"
+    />
     <Card title="The Solution 💡" items={solutions} bgColor="bg-green-200" />
     <ListCard
       title="Economic Impact 📈"
@@ -137,7 +151,9 @@ const OpenTrialPlatform = () => (
     transition={{ duration: 0.5 }}
     className="rounded-lg border-4 border-black bg-white p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]"
   >
-    <h2 className="mb-4 text-3xl font-black">Open Source Global Decentralized Trial Platform 🌐💻</h2>
+    <h2 className="mb-4 text-3xl font-black">
+      Open Source Global Decentralized Trial Platform 🌐💻
+    </h2>
     <div className="space-y-4">
       <ListCard
         title="Revolutionary Safety & Efficacy Testing 🔬"
@@ -210,6 +226,9 @@ const OpenTrialPlatform = () => (
         ]}
         bgColor="bg-blue-200"
       />
+      <section className="mt-12">
+        <CostSavingsTable />
+      </section>
     </div>
   </motion.section>
 )
@@ -221,7 +240,9 @@ const UniversalAccess = () => (
     transition={{ duration: 0.5 }}
     className="rounded-lg border-4 border-black bg-white p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]"
   >
-    <h2 className="mb-4 text-3xl font-black">Universal Access to Treatments 🚪</h2>
+    <h2 className="mb-4 text-3xl font-black">
+      Universal Access to Treatments 🚪
+    </h2>
     <div className="space-y-4">
       <ListCard
         title="Breaking Down All Barriers 🧱💥"
@@ -281,11 +302,17 @@ const FinancialIncentives = () => (
         bgColor="bg-green-200"
       />
       <div className="rounded-lg border-2 border-black bg-yellow-200 p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
-        <h3 className="mb-2 text-xl font-bold">Healthcare Savings Sharing Program 💰🤝</h3>
-        <p className="mb-2 font-bold text-lg">Win-Win: Manufacturers and Society Split Healthcare Savings 50/50</p>
-        
-        <div className="mb-4 p-3 bg-white rounded-lg border-2 border-black">
-          <p className="font-bold mb-2">Example: Age-Related Disease Prevention 🧬</p>
+        <h3 className="mb-2 text-xl font-bold">
+          Healthcare Savings Sharing Program 💰🤝
+        </h3>
+        <p className="mb-2 text-lg font-bold">
+          Win-Win: Manufacturers and Society Split Healthcare Savings 50/50
+        </p>
+
+        <div className="mb-4 rounded-lg border-2 border-black bg-white p-3">
+          <p className="mb-2 font-bold">
+            Example: Age-Related Disease Prevention 🧬
+          </p>
           <ul className="list-inside list-disc space-y-1">
             <li>Average lifetime healthcare costs: $1.2M per person 📊</li>
             <li>~80% of costs are from age-related diseases ($960k) 👴</li>
@@ -294,12 +321,15 @@ const FinancialIncentives = () => (
             <li>Total lifetime savings: $750 billion 💰</li>
             <li>Society keeps: $375 billion in savings 🏥</li>
             <li>Manufacturer receives: $375 billion in rewards 🎯</li>
-            <li>Additional savings from increased productivity and reduced care needs 📈</li>
+            <li>
+              Additional savings from increased productivity and reduced care
+              needs 📈
+            </li>
           </ul>
         </div>
 
-        <div className="mb-4 p-3 bg-white rounded-lg border-2 border-black">
-          <p className="font-bold mb-2">Massive Economic Benefits 📊</p>
+        <div className="mb-4 rounded-lg border-2 border-black bg-white p-3">
+          <p className="mb-2 font-bold">Massive Economic Benefits 📊</p>
           <ul className="list-inside list-disc space-y-1">
             <li>Government healthcare costs cut in half 📉</li>
             <li>Patients save thousands on treatment costs 💰</li>
@@ -310,7 +340,7 @@ const FinancialIncentives = () => (
         </div>
 
         <p className="mb-2 font-bold">This creates a virtuous cycle:</p>
-        <ul className="list-inside list-disc space-y-1 mb-4">
+        <ul className="mb-4 list-inside list-disc space-y-1">
           <li>Lower prices → More patients can afford treatment 💫</li>
           <li>More patients → Higher total savings generated 📈</li>
           <li>Higher savings → Bigger rewards for manufacturers 🎯</li>
@@ -319,7 +349,7 @@ const FinancialIncentives = () => (
         </ul>
 
         <p className="mb-2 font-bold">Eligible Treatments Include:</p>
-        <ul className="list-inside list-disc space-y-1 mb-4">
+        <ul className="mb-4 list-inside list-disc space-y-1">
           <li>Age reversal therapies 🧬</li>
           <li>Gene therapies 🧬</li>
           <li>Disease prevention treatments 🛡️</li>