Merge pull request #70 from brown-ccv/feat-pubs-styling

feat: pubs page styling

src/components/DownloadModal.tsx

@@ -3,9 +3,9 @@ import * as Dialog from "@radix-ui/react-dialog"
 import * as Form from "@radix-ui/react-form"
 import { Cross2Icon, DownloadIcon, PlusIcon } from "@radix-ui/react-icons"
 import { useForm, Controller, type SubmitHandler } from "react-hook-form"
-import { CustomInput } from "./CustomInput.tsx"
-import { CustomTextarea } from "./CustomTextarea.tsx"
+import { Textarea } from "./Textarea.tsx"
 import Button from "./Button.tsx"
+import { Input } from "./Input.tsx"
 
 export interface Inputs {
   name: string
@@ -65,41 +65,44 @@ const DownloadModal: React.FC<DownloadModalProps> = ({ filesToDownload }) => {
               name="name"
               control={control}
               render={() => (
-                <CustomInput label="Name" placeholder="Heather Yu" {...register("name")} />
+                <Input label="Name" placeholder="Heather Yu" {...register("name")} required />
               )}
             />
             <Controller
               name="institution"
               control={control}
               render={() => (
-                <CustomInput
+                <Input
                   label="Institution"
                   placeholder="Brown University"
                   {...register("institution")}
+                  required
                 />
               )}
             />
             <Controller
               name="email"
               control={control}
               render={() => (
-                <CustomInput
+                <Input
                   label="Email"
                   placeholder="[email protected]"
                   match="typeMismatch"
                   errorMessage="Please provide a valid email"
                   {...register("email")}
+                  required
                 />
               )}
             />
             <Controller
               name="description"
               control={control}
               render={() => (
-                <CustomTextarea
+                <Textarea
                   label="Description"
                   placeholder="Why you need this file..."
                   {...register("description")}
+                  required
                 />
               )}
             />

src/components/Header.astro

@@ -1,6 +1,6 @@
 ---
-import HeaderLink from "./HeaderLink.astro"
 import { SITE_TITLE, LINKS } from "../consts"
+import HeaderLink from "./HeaderLink.astro"
 
 const { isHidden = true } = Astro.props
 const pathname = Astro.url.pathname

src/components/Input.tsx

@@ -0,0 +1,34 @@
+import * as Form from "@radix-ui/react-form"
+import React, { type ReactNode } from "react"
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string
+  name: string
+  icon?: ReactNode
+  match?: Form.FormMessageProps["match"]
+  errorMessage?: string
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ label, name, icon, match, errorMessage, ...delegated }: InputProps, ref) => {
+    return (
+      <Form.Field name={name} className="flex flex-col gap-2">
+        <Form.Label>{label}</Form.Label>
+        <Form.Control asChild>
+          <div className="flex items-center gap-2 bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5 focus-within:shadow-inner-focus">
+            <span className="text-neutral-300 w-5 h-5">{icon}</span>
+            <input {...delegated} ref={ref} />
+          </div>
+        </Form.Control>
+        <Form.Message className="text-primary-300" match="valueMissing">
+          Please enter your {label}
+        </Form.Message>
+        {match !== undefined && (
+          <>
+            <Form.Message match={match}>{errorMessage}</Form.Message>
+          </>
+        )}
+      </Form.Field>
+    )
+  }
+)

src/components/Publications.tsx

@@ -1,8 +1,11 @@
 import React, { useState } from "react"
 import Select from "react-select"
 import type { InferEntrySchema } from "astro:content"
+import { Form } from "@radix-ui/react-form"
 import type { Classification } from "../content/config.ts"
 import PubPlaceholder from "./svg/PubPlaceholder.tsx"
+import { Input } from "./Input.tsx"
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
 
 interface PubProps {
   publications: InferEntrySchema<"publications">[]
@@ -32,77 +35,87 @@ const PublicationSection: React.FC<PubProps> = ({ publications }) => {
       classificationFilter.map((item) => item.value).includes(pub.classification) &&
       pub.citation.toLowerCase().includes(searchInput.toLowerCase())
   )
+
   return (
     <>
-      <section className="flex flex-col lg:flex-row gap-4 py-14">
+      <Form className="flex flex-col lg:flex-row gap-4 justify-center mb-24">
         <div>
-          <label className="pl-1">Search for a Publication</label>
-          <input
-            type="text"
-            placeholder="🔍 Search here"
-            onChange={handleChange}
+          <Input
+            label="Search for a publication"
+            name="pubQuery"
+            icon={<MagnifyingGlassIcon className="h-full w-full" />}
+            placeholder="Durand, Jorge..."
             value={searchInput}
-            className="min-w-[460px]"
+            onChange={handleChange}
+            className="min-w-96"
           />
         </div>
-        <div>
-          <label className="pl-1">Show</label>
+        <div className="space-y-2">
+          <label className="pl-1" htmlFor="classification">
+            Show
+          </label>
           <Select
+            id="classification"
             options={classificationOptions}
             isMulti
             isSearchable={false}
             closeMenuOnSelect={false}
             defaultValue={classificationOptions}
+            unstyled
+            className="cursor-pointer"
+            classNames={{
+              container: () =>
+                "cursor-pointer bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5",
+              placeholder: () => "cursor-pointer text-neutral-300",
+              indicatorsContainer: () => "cursor-pointer text-neutral-300 hover:bg-neutral-200",
+              multiValueRemove: () => "hover:bg-neutral-100",
+              valueContainer: () => "gap-2 cursor-pointer",
+              multiValue: () =>
+                "cursor-pointer flex items-center gap-2 text-primary-500 bg-neutral-50 px-2 rounded-lg",
+              menu: () => "cursor-pointr rounded-lg bg-white p-2",
+              // See CSS file for other overrides
+              option: () => "rounded-sm p-1 hover:text-primary-500 hover:bg-neutral-50",
+            }}
             styles={{
-              control: (baseStyles) => ({
-                ...baseStyles,
-                minWidth: "526px",
-                borderRadius: "9999px",
-                background: "#FAFAFA",
-                boxShadow:
-                  "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
-                paddingTop: ".75rem",
-                paddingBottom: ".75rem",
-                paddingLeft: "2rem",
-                paddingRight: "2rem",
-              }),
+              control: (baseStyles) => ({ ...baseStyles, minHeight: 0 }),
+              option: (baseStyles) => ({ ...baseStyles, cursor: "pointer" }),
             }}
             onChange={(option) => setClassificationFilter(option)}
           />
         </div>
-      </section>
+      </Form>
 
       {shownPubs && (
         <section className="flex flex-col gap-6">
           {classificationOptions.map((option) => {
             return (
               <article key={option.value}>
-                <h2 className="py-2">{option.label}</h2>
-                <div className="grid grid-cols-1 lg:grid-cols-2  gap-12">
+                <h2 className="mb-10">{option.label}</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                   {shownPubs.map((publication, i) => {
                     if (publication.classification === option.value) {
                       return (
-                        <div key={i} className="grid grid-cols-1 md:grid-cols-2 gap-2">
-                          <div className="hidden md:block drop-shadow-md">
+                        <div key={i} className="flex gap-8 content-start">
+                          <div className="flex-none hidden md:block shadow-book-shadow w-40 h-72">
                             {publication.image ? (
                               <img
-                                className="drop-shadow-md object-cover w-48 h-72"
+                                className="flex-none object-cover h-full w-full"
                                 src={publication.image}
                               />
                             ) : (
                               <PubPlaceholder />
                             )}
                           </div>
 
-                          <div className="flex flex-col gap-8 ">
-                            <p>{publication.citation}</p>
+                          <div className="flex flex-col gap-8">
+                            <p className="font-bold">{publication.citation}</p>
                             {publication.pdf && (
-                              <button
-                                className="bg-neutral-500 text-neutral-50 rounded-full py-3 px-7 w-2/3"
-                                onClick={() => window.open(`${publication.pdf}`, "_blank")}
+                              <a
+                                className="no-underline bg-neutral-500 text-neutral-50 rounded-full py-3 px-7 w-max"
+                                href={publication.pdf}
                               >
                                 View PDF
-                              </button>
+                              </a>
                             )}
                           </div>
                         </div>

src/components/Textarea.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import * as Form from "@radix-ui/react-form"
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label: string
+  name: string
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ name, label, ...delegated }, ref) => (
+    <Form.Field name={name} className="flex flex-col gap-2">
+      <Form.Label>{label}</Form.Label>
+      <Form.Control asChild>
+        <textarea
+          rows={4}
+          className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full"
+          {...delegated}
+          ref={ref}
+        />
+      </Form.Control>
+      <Form.Message className="text-primary-300" match="valueMissing">
+        Please enter your {label}
+      </Form.Message>
+    </Form.Field>
+  )
+)