refactor: only show name, title, and university

brown-ccv · Jun 26, 2024 · 3602200 · 3602200
1 parent 796baa3
commit 3602200
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 98 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -5,14 +5,10 @@ interface CardProps {
   image?: string
   title: string
   name: string
-  address?: string
-  phone?: string
-  email?: string
+  institution: string
 }
 
-const Card: React.FC<CardProps> = ({ position, image, title, name, address, phone, email }) => {
-  const [showDetails, setShowDetails] = React.useState(false)
-
+const Card: React.FC<CardProps> = ({ position, image, title, name, institution }) => {
   // strip 'public/' from the avatar string since astro's public folder is available without this in the link
   const link = image?.replace("/public", "")
   return (
@@ -29,30 +25,11 @@ const Card: React.FC<CardProps> = ({ position, image, title, name, address, phon
         </div>
       )}
       <div>
-        <div>
-          <a className="text-xl font-semibold underline text-neutral-900" href="#">
-            {name}
-          </a>
-          <p className="text-neutral-700 italic">{title}</p>
-        </div>
-        {showDetails ? (
-          <div>
-            <button onClick={() => setShowDetails(false)}>- Contact info</button>
-            <div className="flex flex-wrap gap-x-12">
-              {Boolean(phone) && <p className="text-base">{phone}</p>}
-              {Boolean(email) && (
-                <a className="hover:text-neutral-300 text-base" href={`mailto:${email}`}>
-                  {email}
-                </a>
-              )}
-              {Boolean(address) && <p className="text-base">{address}</p>}
-            </div>
-          </div>
-        ) : (
-          <button className="text-neutral-700" onClick={() => setShowDetails(true)}>
-            + Contact info
-          </button>
-        )}
+        <a className="text-xl font-semibold underline text-neutral-900" href="#">
+          {name}
+        </a>
+        <p className="text-neutral-700 italic">{title}</p>
+        <p className="small">{institution}</p>
       </div>
     </div>
   )

diff --git a/src/components/CardContainer.astro b/src/components/CardContainer.astro
@@ -7,9 +7,7 @@ interface PersonProps {
     title: string
     name: string
     avatar?: string
-    email?: string
-    address?: string
-    phone?: string
+    institution: string
   }
 }
 ---
@@ -27,9 +25,7 @@ interface PersonProps {
               title={person.data.title}
               name={person.data.name}
               image={person.data.avatar}
-              email={person.data.email}
-              phone={person.data.phone}
-              address={person.data.address}
+              institution={person.data.institution}
             />
           </>
         )

diff --git a/src/components/CustomInput.tsx b/src/components/CustomInput.tsx
@@ -7,14 +7,9 @@ interface CustomInputProps {
 
 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
-      />
-    </>
+    <div className="flex flex-col gap-3">
+      <label htmlFor={label}>{label}</label>
+      <input name={label} id={label} placeholder={placeholder} required />
+    </div>
   )
 }
diff --git a/src/components/DownloadModal.tsx b/src/components/DownloadModal.tsx
@@ -21,20 +21,25 @@ const DownloadModal = () => {
           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>
+          <Dialog.Content className="flex flex-col gap-12 rounded-lg text-left shadow-xl max-h-fit transition-all bg-neutral-50 px-4 pb-4 pt-5 sm:p-6 sm:pb-4 sm:my-8 sm:w-full sm:max-w-lg">
+            <div>
+              <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>
+              <p>
+                By downloading these data, you agree to the <a href="#">usage guidelines</a>
+              </p>
             </div>
-            <Dialog.Title>Download Data</Dialog.Title>
-            <form className="p-4 md:p-5">
+            <form>
               <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"} />
+                <CustomInput label="Name" placeholder="Heather Yu" />
+                <CustomInput label="Institution" placeholder="Brown University" />
+                <CustomInput label="Email" placeholder="[email protected]" />
+                <CustomTextarea label="Reason for access" 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">

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -30,9 +30,7 @@ const people = defineCollection({
     name: z.string(),
     title: z.string(),
     avatar: z.string().optional(),
-    email: z.string().optional(),
-    phone: z.string().optional(),
-    address: z.string().optional(),
+    institution: z.string(),
   }),
 })
 export const collections = { news: news, data: files, people: people }
diff --git a/src/content/people/advisor.md b/src/content/people/advisor.md
@@ -3,12 +3,7 @@ type: Leadership
 name: David Lindstrom
 title: Advisor
 avatar: /public/images/david-lindstrom-1-.jpg
-org: Brown University
-address: |-
-  206 Maxcy Hall
-  Providence, Rhode Island 02912-1916
-phone: (401) 863-3765
-email: [email protected]
+institution: Brown University
 startDate: "2024"
 endDate: "2024"
 ---
diff --git a/src/content/people/co-director-1.md b/src/content/people/co-director-1.md
@@ -3,10 +3,7 @@ type: Leadership
 name: Douglas S. Massey
 title: Co-Director
 avatar: /public/images/douglasmassey.jpeg
-org: Princeton University
-address: Princeton, NJ 08544
-phone: 609-258-4949
-email: [email protected]
+institution: Princeton University
 startDate: "2024"
 endDate: "2024"
 ---
diff --git a/src/content/people/co-director.md b/src/content/people/co-director.md
@@ -3,13 +3,7 @@ type: Leadership
 name: Jorge Durand Arp-Nisen
 title: Co-Director
 avatar: /public/images/jorgedurand.jpg
-org: Universidad de Guadalajara
-address: |-
-  Av. Maestros y Alcalde, Puerta Num. 1
-  Guadalajara, CP 44269
-  Jalisco, México
-phone: 333-819-3327
-email: [email protected]
+institution: Universidad de Guadalajara
 startDate: "2024"
 endDate: "2024"
 ---
diff --git a/src/content/people/data-entry-specialist.md b/src/content/people/data-entry-specialist.md
@@ -3,13 +3,7 @@ type: Supporting Staff
 name: Verónica Lozano
 title: Data Entry Specialist
 avatar: /public/images/vero.jpg
-org: Universidad de Guadalajara
-address: |-
-  Av. Maestros y Alcalde, Puerta Num. 1
-  Guadalajara, CP 44269
-  Jalisco, México
-phone: 011-52-333-819-3327
-email: ""
+institution: Universidad de Guadalajara
 startDate: "2024"
 endDate: "2024"
 ---
diff --git a/src/content/people/professor-and-researcher-sni-nivel-iii.md b/src/content/people/professor-and-researcher-sni-nivel-iii.md
@@ -3,12 +3,7 @@ type: Advisors
 name: M. Patricia Arias
 title: Professor and Researcher (SNI nivel III)
 avatar: /public/images/patricia-arias.jpg
-org: Universidad de Guadalajara
-address: |-
-  Argentina 374. C.P. 44160,
-  Guadalajara, Jalisco, Mexico
-phone: 113-826-1499
-email: [email protected]
+institution: Universidad de Guadalajara
 startDate: "2024"
 endDate: "2024"
 ---
diff --git a/src/pages/people.astro b/src/pages/people.astro
@@ -6,6 +6,7 @@ const people = await getCollection("people")
 const leadership = people.filter((person) => person.data.type === "Leadership")
 const advisors = people.filter((person) => person.data.type === "Advisors")
 const support = people.filter((person) => person.data.type === "Supporting Staff")
+console.log(people)
 ---
 
 <Layout title="Staff" description="Our Leadership, Advisors, and Staff">

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -52,24 +52,24 @@
         @apply bg-white;
         @apply rounded-full;
         @apply shadow-inner;
-        @apply w-60;
-        @apply flex;
-        @apply items-center;
+        @apply min-w-60;
         @apply py-5;
         @apply px-8;
     }
-
-    input[placeholder] {
+    
+    input::placeholder {
         @apply text-neutral-300;
     }
 
+    input:focus {
+        @apply outline-none;
+        @apply shadow-inner-focus;
+    }
+
     input.disabled, select.disabled {
         @apply bg-gray;
     }
 
-    input:focus {
-        @apply shadow-inner-focus;
-    }
 
     nav {
         @apply flex;