feat: codebooks subheadings

brown-ccv · Aug 7, 2024 · c3411dd · c3411dd
1 parent 7809f45
commit c3411dd
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/src/components/DocumentationTable.tsx b/src/components/DocumentationTable.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import Button from "./Button.tsx"
 
 interface DocumentationTableProps {
   allFiles: {
@@ -9,19 +10,25 @@ interface DocumentationTableProps {
       archivo?: string
       description?: string
       version?: string
+      codebookType?: string
     }
   }[]
   version?: boolean
+  showHeader?: boolean
 }
 
-const DocumentationTable: React.FC<DocumentationTableProps> = ({ allFiles, version }) => {
+const DocumentationTable: React.FC<DocumentationTableProps> = ({
+  allFiles,
+  version,
+  showHeader,
+}) => {
   const files = allFiles.map((file) => {
     return { ...file.data }
   })
   return (
     <div className="w-full overflow-x-scroll no-scrollbar">
       <table className="table-fixed border-spacing-4 w-full">
-        <thead>
+        <thead className={showHeader ? "" : "collapse"}>
           <tr className="text-xl bg-neutral-100 text-left text-neutral-900">
             <th className="w-1/4">File</th>
             <th>Description</th>
@@ -53,7 +60,7 @@ const DocumentationTable: React.FC<DocumentationTableProps> = ({ allFiles, versi
                         target="_blank"
                         href={archivo}
                       >
-                        es
+                        ea
                       </a>
                     )}
                     )

diff --git a/src/pages/documentation.astro b/src/pages/documentation.astro
@@ -8,6 +8,14 @@ import { getCollection } from "astro:content"
 const files = await getCollection("data")
 
 const codebooks = files.filter((file) => file.data.cat === "Codebook")
+const core = codebooks.filter((file) => file.data.codebookType === "MMP Core")
+const community = codebooks.filter(
+  (file) => file.data.codebookType === "Community Level Supplementary"
+)
+const state = codebooks.filter((file) => file.data.codebookType === "State Level Supplementary")
+const national = codebooks.filter(
+  (file) => file.data.codebookType === "National Level Supplementary"
+)
 const appendix = files.filter((file) => file.data.cat === "Appendices")
 const questionnaire = files.filter((file) => file.data.cat === "Questionnaire")
 ---
@@ -23,18 +31,24 @@ const questionnaire = files.filter((file) => file.data.cat === "Questionnaire")
       <span> Read the study design </span>
     </a>
   </section>
-  <section class="flex flex-col gap-6">
-    <div>
+  <section class="flex flex-col gap-8">
+    <div class="flex flex-col gap-4">
       <h2 class="pb-5">Codebooks</h2>
-      <DocumentationTable allFiles={codebooks} client:only="react" />
+      <DocumentationTable allFiles={core} showHeader />
+      <h3 class="font-semibold">Community Level Supplementary Files</h3>
+      <DocumentationTable allFiles={community} />
+      <h3 class="font-semibold">State Level Supplementary Files</h3>
+      <DocumentationTable allFiles={state} />
+      <h3 class="font-semibold">National Level Supplementary Files</h3>
+      <DocumentationTable allFiles={national} />
     </div>
     <div>
       <h2 class="pb-5">Appendices</h2>
-      <DocumentationTable allFiles={appendix} client:only="react" />
+      <DocumentationTable allFiles={appendix} showHeader />
     </div>
     <div>
       <h2 class="pb-5">Questionnaires</h2>
-      <DocumentationTable allFiles={questionnaire} version={true} client:only="react" />
+      <DocumentationTable allFiles={questionnaire} version showHeader />
     </div>
   </section>
 </Layout>