Feat/tailwind

astro.config.mjs

@@ -1,8 +1,9 @@
 import { defineConfig } from "astro/config";
-
 import react from "@astrojs/react";
 
+import tailwind from "@astrojs/tailwind";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [react()],
+  integrations: [react(), tailwind()],
 });

package.json

@@ -31,12 +31,14 @@
     "@astrojs/check": "^0.5.6",
     "@astrojs/react": "^3.1.0",
     "@astrojs/rss": "^4.0.5",
+    "@astrojs/tailwind": "^5.1.0",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "astro": "^4.4.15",
     "firebase": "^10.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.3",
     "typescript": "5.4"
   },
   "devDependencies": {

src/admin-portal/components/EpisodeForm.tsx

@@ -71,7 +71,10 @@ export function EpisodeForm({
 
   return (
     <>
-      <form onSubmit={doSubmit}>
+      <form
+        onSubmit={doSubmit}
+        className="flex flex-col gap-4 content-center items-center py-4 rounded-md bg-slate-100 dark:bg-slate-900"
+      >
         <TextInput
           label="Episode Title"
           value={editedEpisodeData.title}
@@ -91,16 +94,6 @@ export function EpisodeForm({
             }));
           }}
         />
-        {/* <NumberInput
-          label="Season"
-          value={editedEpisodeData.season}
-          setValue={(season) => {
-            setEditedEpisodeData((existingData) => ({
-              ...existingData,
-              season,
-            }));
-          }}
-        /> */}
         <NumberInput
           label="Episode"
           value={editedEpisodeData.episode}
@@ -155,7 +148,12 @@ export function EpisodeForm({
             }));
           }}
         />
-        <button type="submit">{submitLabel}</button>
+        <button
+          type="submit"
+          className="rounded-md bg-sky-700 dark:bg-sky-800  hover:bg-sky-900 text-slate-100 px-4 py-1"
+        >
+          {submitLabel}
+        </button>
       </form>
       {error !== "" ? <p>{error}</p> : undefined}
     </>

src/admin-portal/components/FormInputs/Base.tsx

@@ -11,8 +11,13 @@ export function Base({
   children,
 }: React.PropsWithChildren<BaseProps>): JSX.Element {
   return (
-    <div>
-      <label htmlFor={inputId}>{label}</label>
+    <div className="flex flex-col gap-0">
+      <label
+        htmlFor={inputId}
+        className="text-sm text-slate-500 dark:text-slate-400"
+      >
+        {label}
+      </label>
       {children}
     </div>
   );

src/admin-portal/components/FormInputs/CheckboxInput.tsx

@@ -21,7 +21,7 @@ export function CheckboxInput({
         id={inputId}
         type="checkbox"
         checked={value}
-        onChange={(event) => {
+        onChange={() => {
           setValue(!value);
         }}
       />

src/admin-portal/components/FormInputs/FileInput.tsx

@@ -27,6 +27,7 @@ export function FileInput({
           }
         }}
         accept={accept}
+        className="w-96 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-sky-100 file:text-sky-700 hover:file:bg-sky-200 text-sm"
       />
     </Base>
   );

src/admin-portal/components/FormInputs/NumberInput.tsx

@@ -25,6 +25,7 @@ export function NumberInput({
           const value = Number(event.target.value);
           if (!isNaN(value)) setValue(value);
         }}
+        className="py-1 px-2 rounded-md w-96 dark:text-slate-950"
       />
     </Base>
   );

src/admin-portal/components/FormInputs/ParagraphInput.tsx

@@ -23,7 +23,11 @@ export function ParagraphInput({
         onChange={(event) => {
           setValue(event.target.value);
         }}
+        className="py-2 px-2 rounded-md w-96 h-64 dark:text-slate-950 font-mono"
       />
+      <span className="mt-1 text-xs italic text-slate-500 dark:text-slate-400">
+        This field supports Markdown input!
+      </span>
     </Base>
   );
 }

src/admin-portal/components/FormInputs/SelectInput.tsx

@@ -25,6 +25,7 @@ export function SelectInput({
         onChange={(event) => {
           setValue(event.target.value);
         }}
+        className="py-1 px-2 rounded-md w-96 dark:text-slate-950 bg-white"
       >
         <option disabled>~~Choose One~~</option>
         {values.map((opt) => {

src/admin-portal/components/FormInputs/TextInput.tsx

@@ -26,6 +26,7 @@ export function TextInput({
         onChange={(event) => {
           setValue(event.target.value);
         }}
+        className="py-1 px-2 rounded-md w-96 dark:text-slate-950"
       />
     </Base>
   );

src/admin-portal/index.tsx

@@ -21,23 +21,28 @@ export function AdminPortal(): JSX.Element {
       ) : undefined}
       {credentials !== undefined ? (
         <>
-          <div>
-            <a
-              onClick={() => {
-                if (page !== "EPISODES") setPage("EPISODES");
-              }}
-              aria-disabled={page === "EPISODES"}
-            >
-              View Episodes
-            </a>
-            <a
-              onClick={() => {
-                if (page !== "UPLOAD") setPage("UPLOAD");
-              }}
-              aria-disabled={page === "UPLOAD"}
-            >
-              Upload
-            </a>
+          <div className="w-full flex flex-row gap-2">
+            <h1 className="text-xl flex-1">Podcast Admin</h1>
+            {page !== "EPISODES" ? (
+              <button
+                onClick={() => {
+                  setPage("EPISODES");
+                }}
+                className="rounded-md bg-sky-700 dark:bg-sky-800 hover:bg-sky-900 text-slate-100 px-4 py-1"
+              >
+                View Episodes
+              </button>
+            ) : undefined}
+            {page !== "UPLOAD" ? (
+              <button
+                onClick={() => {
+                  setPage("UPLOAD");
+                }}
+                className="rounded-md bg-sky-700 dark:bg-sky-800  hover:bg-sky-900 text-slate-100 px-4 py-1"
+              >
+                Upload
+              </button>
+            ) : undefined}
           </div>
           {page === "EPISODES" ? (
             <EpisodeView

src/admin-portal/views/EditEpisode.tsx

@@ -39,7 +39,7 @@ export function EditEpisode({ id }: EditEpisodeProps): JSX.Element {
 
   return (
     <>
-      <h1>Edit Episode</h1>
+      <h1 className="text-lg">Edit Episode</h1>
       {error !== "" ? <p>{error}</p> : undefined}
       {episode !== undefined ? (
         <EpisodeForm

src/admin-portal/views/EpisodeView.tsx

@@ -39,22 +39,25 @@ export function EpisodeView({ goToEpisode }: EpisodeViewProps): JSX.Element {
 
   return (
     <>
-      <h1>Episodes</h1>
-      <ul>
+      <h1 className="text-lg">Episodes</h1>
+      <ul role="list" className="list-disc pl-4">
         {episodes.map((episode) => (
-          <li>
+          <li className="list-item">
             <a
               href="#"
               onClick={() => {
                 goToEpisode(episode.id);
               }}
+              className="text-sky-700 hover:text-sky-800 dark:text-sky-200 hover:dark:text-sky-300 underline"
             >
               {episode.id}
             </a>
           </li>
         ))}
       </ul>
-      {error !== "" ? <span>{error}</span> : undefined}
+      {error !== "" ? (
+        <span className="text-red-700 dark:text-red-400">{error}</span>
+      ) : undefined}
     </>
   );
 }

src/admin-portal/views/Login.tsx

@@ -40,17 +40,29 @@ export function Login({ setCredentials }: LoginProps): JSX.Element {
 
   return (
     <>
-      <form onSubmit={doLogin}>
+      <form
+        onSubmit={doLogin}
+        className="flex flex-col gap-4 content-center items-center py-4 rounded-md bg-slate-100 dark:bg-slate-900"
+      >
         <TextInput label="Email" value={email} setValue={setEmail} />
         <TextInput
           label="Password"
           value={password}
           setValue={setPassword}
           password
         />
-        <button type="submit">Login</button>
+        <button
+          type="submit"
+          className="rounded-md bg-sky-700 dark:bg-sky-800  hover:bg-sky-900 text-slate-100 px-4 py-1"
+        >
+          Login
+        </button>
+        {error !== "" ? (
+          <p role="note" className="text-red-700 dark:text-red-400">
+            {error}
+          </p>
+        ) : undefined}
       </form>
-      {error !== "" ? <p>{error}</p> : undefined}
     </>
   );
 }

src/admin-portal/views/Upload.tsx

@@ -182,8 +182,11 @@ export function Upload(): JSX.Element {
 
   return (
     <>
-      <h1>Upload an Episode</h1>
-      <form onSubmit={submit}>
+      <h1 className="text-lg">Upload an Episode</h1>
+      <form
+        onSubmit={submit}
+        className="flex flex-col gap-4 content-center items-center py-4 rounded-md bg-slate-100 dark:bg-slate-900"
+      >
         <TextInput label="Episode Title" value={title} setValue={setTitle} />
         <SeasonSelect
           value={seasonNumber}
@@ -220,7 +223,12 @@ export function Upload(): JSX.Element {
           value={description}
           setValue={setDescription}
         />
-        <button type="submit">Upload</button>
+        <button
+          type="submit"
+          className="rounded-md bg-sky-700 dark:bg-sky-800  hover:bg-sky-900 text-slate-100 px-4 py-1"
+        >
+          Upload
+        </button>
       </form>
       {error !== "" ? <p>{error}</p> : undefined}
     </>

src/components/Footer.astro

@@ -0,0 +1,6 @@
+---
+---
+<footer class="bg-slate-700 text-sky-100 p-4 flex flex-col items-center text-sm">
+    <p>Website by Anna Murphy</p>
+    <p>Find the game at <a href="https://seasidesepulchre.itch.io/capes-in-the-dark">itch.io</a>.</p>
+</footer>

src/components/Nav.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+
+function makeNavItemClassList(key: string) {
+    return ["p-2", "rounded-lg", title === key ? "bg-slate-700 text-sky-50" : false];
+}
+---
+<nav class="flex justify-around bg-slate-200 dark:bg-slate-800 p-2 font-sans text-lg">
+    <a href="/" class:list={[...makeNavItemClassList("Home"), "text-xl"]}><h1>Capes</h1></a>
+    <a href="/" class:list={makeNavItemClassList("Game")}><h2>Game</h2></a>
+    <a href="/admin" class:list={makeNavItemClassList("Admin")}><h2>Admin</h2></a>
+</nav>