Modal component

.github/workflows/firebase-hosting-merge.yml

@@ -18,3 +18,5 @@ jobs:
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MMP_SITE_B1C9B }}'
           channelId: live
           projectId: mmp-site-b1c9b
+        env:
+          FIREBASE_CLI_EXPERIMENTS: webframeworks

.github/workflows/firebase-hosting-pull-request.yml

@@ -19,3 +19,5 @@ jobs:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MMP_SITE_B1C9B }}'
           projectId: mmp-site-b1c9b
+        env:
+          FIREBASE_CLI_EXPERIMENTS: webframeworks

.gitignore

@@ -20,4 +20,5 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 .idea
-*.log
+*.log
+*.cache

astro.config.mjs

@@ -1,11 +1,12 @@
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import sitemap from '@astrojs/sitemap';
-
+import { defineConfig } from "astro/config";
+import mdx from "@astrojs/mdx";
+import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
 
+import react from "@astrojs/react";
+
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://example.com',
-  integrations: [mdx(), sitemap(), tailwind()]
+  site: "https://example.com",
+  integrations: [mdx(), sitemap(), tailwind(), react()]
 });

firebase.json

@@ -1,6 +1,6 @@
 {
   "hosting": {
-    "public": "public",
+    "source": ".",
     "ignore": [
       "firebase.json",
       "**/.*",

package.json

@@ -12,13 +12,20 @@
   "dependencies": {
     "@astrojs/check": "^0.5.3",
     "@astrojs/mdx": "^2.1.1",
+    "@astrojs/react": "^3.1.0",
     "@astrojs/rss": "^4.0.5",
     "@astrojs/sitemap": "^3.0.5",
     "@astrojs/tailwind": "^5.1.0",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
     "@staticcms/core": "^4.1.2",
     "@staticcms/proxy-server": "^4.0.4",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
     "astro": "^4.3.6",
     "i": "^0.3.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   },

src/components/CustomInput.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+
+interface CustomInputProps {
+  label: string
+  placeholder: string
+}
+
+export const CustomInput: React.FC<CustomInputProps> = ({ label, placeholder }) => {
+  return (
+    <>
+      <input
+        name={label}
+        id={label}
+        className="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
+        placeholder={placeholder}
+        required
+      />
+    </>
+  )
+}

src/components/CustomTextarea.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+
+interface CustomTextareaProps {
+  label: string
+  placeholder: string
+}
+
+export const CustomTextarea: React.FC<CustomTextareaProps> = ({ label, placeholder }) => {
+  return (
+    <>
+      <textarea
+        rows={4}
+        id={label}
+        className="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
+        placeholder={placeholder}
+      />
+    </>
+  )
+}

src/components/DownloadModal.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+import * as Dialog from "@radix-ui/react-dialog"
+import { Cross2Icon, DownloadIcon, PlusIcon } from "@radix-ui/react-icons"
+import { CustomInput } from "./CustomInput.tsx"
+import { CustomTextarea } from "./CustomTextarea.tsx"
+
+const DownloadModal = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  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">
+          <DownloadIcon />
+          <span className="sr-only">Download data</span>
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          className="fixed top-0 left-0 right-0 bottom-0 bg-gray-500 bg-opacity-75 transition-opacity z-10 w-screen overflow-y-auto"
+          onClick={() => setIsOpen(false)}
+        />
+        <Dialog.Overlay className="fixed top-0 left-0 right-0 bottom-0 grid place-items-center z-10 w-screen overflow-y-auto">
+          <Dialog.Content className="rounded-lg text-left shadow-xl max-h-fit transition-all bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4 sm:my-8 sm:w-full sm:max-w-lg">
+            <div className="flex justify-end">
+              <Dialog.Close className="text-gray-400 bg-transparent  rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center hover:bg-gray-200 hover:text-gray-900">
+                <Cross2Icon />
+                <span className="sr-only">Close</span>
+              </Dialog.Close>
+            </div>
+            <Dialog.Title>Download Data</Dialog.Title>
+            <form className="p-4 md:p-5">
+              <div className="flex flex-col justify-center mb-4">
+                <CustomInput label={"name"} placeholder={"Your name"} />
+                <CustomInput label={"institution"} placeholder={"Your institution"} />
+                <CustomInput label={"email"} placeholder={"Your email"} />
+                <CustomTextarea label={"description"} placeholder={"Why you need this file"} />
+              </div>
+              <div className="flex flex-row gap-2">
+                <button className="flex items-center gap-2 rounded-lg px-5 py-2.5 bg-black text-white text-sm text-center font-medium hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500">
+                  <PlusIcon />
+                  <span className="pt-1">Validate Email</span>
+                </button>
+                <button
+                  type="submit"
+                  disabled
+                  className="flex items-center gap-2 rounded-lg px-5 py-2.5 bg-black text-white text-sm text-center font-medium hover:bg-gray-500 focus:ring-4 focus:outline-none focus:ring-gray-500 disabled:bg-gray-400"
+                >
+                  Download File
+                </button>
+              </div>
+            </form>
+          </Dialog.Content>
+        </Dialog.Overlay>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+export default DownloadModal