Init Data Page

package.json

@@ -16,6 +16,7 @@
     "@astrojs/rss": "^4.0.5",
     "@astrojs/sitemap": "^3.0.5",
     "@astrojs/tailwind": "^5.1.0",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@staticcms/core": "^4.1.2",

public/admin/config.yml

@@ -84,17 +84,17 @@ collections:
         label: Title
         widget: string
       - name: description
-
         label: Description
         widget: text
       - name: file
         i18n: duplicate
         label: File
         widget: file
+        public_folder: public/files
       - name: cat
         label: Category
         widget: select
-        options: [ 'Study Design', 'Questionnaire', 'Changes to Questionnaire', 'Code Book', 'Appendices' ]
+        options: [ 'Study Design', 'Questionnaire', 'Changes to Questionnaire', 'Codebook', 'Appendices' ]
   - name: graphs
     label: Graphs & Figures
     create: true

src/components/DataTable.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react"
+import * as Checkbox from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+interface DataTableProps {
+  allFiles: {
+    data: {
+      title: string
+      cat: string
+      file: string
+      description?: string
+    }
+  }[]
+}
+
+interface FileProps {
+  title: string
+  cat: string
+  file: string
+  description?: string
+  selected: boolean
+}
+
+const DataTable: React.FC<DataTableProps> = ({ allFiles }) => {
+  const initialFiles = allFiles.map((file) => {
+    const temp = file.data
+    return { ...temp, selected: false }
+  })
+  const [isCheckAll, setIsCheckAll] = useState(false)
+  const [files, setFiles] = useState<FileProps[]>(initialFiles)
+
+  const handleSelectAll = () => {
+    const newIsCheckAll = !isCheckAll // Toggle isCheckAll
+    setIsCheckAll(newIsCheckAll)
+    const filesClone = [...files]
+    filesClone.forEach((file) => {
+      file.selected = newIsCheckAll
+    })
+    setFiles([...filesClone])
+  }
+
+  const handleSelect = (selected: boolean, i: number) => {
+    const temp = files[i]
+    temp.selected = !selected
+    const filesClone = [...files]
+    filesClone[i] = temp
+    setFiles([...filesClone])
+  }
+
+  const selectedFiles = files.map(({ title, file, selected, cat, description }, i) => {
+    return (
+      <tr key={i}>
+        <td className="p-2">
+          <div className="flex">
+            <Checkbox.Root
+              name={file}
+              id={file}
+              className="mx-1 w-6 h-6 border"
+              checked={selected}
+              onClick={() => handleSelect(selected, i)}
+            >
+              <Checkbox.Indicator>
+                <CheckIcon />
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+            <p className="text-base"> {title}</p>
+          </div>
+        </td>
+        <td className="p-2">{cat}</td>
+        <td className="p-2">{description}</td>
+      </tr>
+    )
+  })
+
+  return (
+    <table className="table-fixed border-spacing-2">
+      <thead>
+        <tr className="bg-neutral-300 text-left">
+          <th className="flex w-[200px]">
+            <Checkbox.Root
+              name="selectAll"
+              id="selectAll"
+              className="mx-1 w-6 h-6 text-neutral-900"
+              onCheckedChange={handleSelectAll}
+            >
+              <Checkbox.Indicator>
+                <CheckIcon />
+              </Checkbox.Indicator>
+            </Checkbox.Root>
+            File Name
+          </th>
+          <th className="w-[200px]">Category</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+
+      <tbody>{selectedFiles}</tbody>
+    </table>
+  )
+}
+export default DataTable

src/components/DownloadModal.tsx

@@ -10,9 +10,9 @@ const DownloadModal = () => {
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
-        <button className="sm:inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
+        <button className="sm:inline-flex w-fit items-center rounded-lg text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
+          <span>Download data</span>
           <DownloadIcon />
-          <span className="sr-only">Download data</span>
         </button>
       </Dialog.Trigger>
       <Dialog.Portal>

src/content/config.ts

@@ -13,4 +13,13 @@ const news = defineCollection({
   }),
 })
 
-export const collections = { news }
+const files = defineCollection({
+  type: "content",
+  schema: z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    cat: z.string(),
+    file: z.string(),
+  }),
+})
+export const collections = { news: news, data: files }

src/content/data/life.md

@@ -0,0 +1,6 @@
+---
+title: LIFE
+description: test
+file: public/files/codebook_life.pdf
+cat: Codebook
+---

src/layouts/Layout.astro

@@ -1,5 +1,4 @@
 ---
-import type { CollectionEntry } from "astro:content"
 import BaseHead from "../components/BaseHead.astro"
 import Header from "../components/Header.astro"
 import Footer from "../components/Footer.astro"

src/pages/data.astro

@@ -1,11 +1,15 @@
 ---
 import Layout from "../layouts/Layout.astro"
 import DownloadModal from "../components/DownloadModal"
+import DataTable from "../components/DataTable"
+import { getCollection } from "astro:content"
+const files = await getCollection("data")
 ---
 
 <Layout title="Data" description="Data files and information">
-  <div class="flex">
-    <p>Download a File</p>
-    <DownloadModal client:only />
+  <div class="flex flex-col">
+    <p>Download</p>
+    <DataTable allFiles={files} client:only="react" />
+    <DownloadModal client:only="react" />
   </div>
 </Layout>

src/styles/global.css

@@ -107,6 +107,22 @@
         @apply self-stretch;
         @apply p-16;
     }
+
+    button[role="checkbox"] {
+        @apply bg-neutral-50;
+        @apply rounded;
+        @apply flex;
+        @apply items-center;
+        @apply justify-center;
+        @apply shadow-md;
+    }
+
+    th {
+        @apply font-bold;
+        @apply p-2;
+        @apply text-left;
+        @apply text-white;
+    }
 }
 
 @layer components {