Merge pull request #1797 from acm-ucr/minnieland/MakeVerticalCards

attempt to format contacts, make vertical cards
acm-ucr · Sep 9, 2024 · 1163d2c · 1163d2c
2 parents 95ccded + f2bb762
commit 1163d2c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 29 deletions.
diff --git a/src/components/admin/services/contacts/Contact.jsx b/src/components/admin/services/contacts/Contact.jsx
@@ -1,10 +1,11 @@
 "use client";
-import { User } from "lucide-react";
+import { User, Gavel, Handshake, Lock, Heart, HandHeart } from "lucide-react";
 import Button from "../../Button";
 import Select from "@/components/Select";
 import { useState } from "react";
 import { api } from "@/utils/api";
 import toaster from "@/utils/toaster";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 const STATUSES = ["confirmed", "pending", "not attending"];
 
@@ -14,9 +15,18 @@ const MAPPINGS = {
   "not attending": -1,
 };
 
+const roleIcons = {
+  participants: <User className="mx-2" />,
+  judges: <Gavel className="mx-2" />,
+  volunteers: <Heart className="mx-2" />,
+  mentors: <HandHeart className="mx-2" />,
+  admins: <Lock className="mx-2" />,
+  committees: <Handshake className="mx-2" />,
+};
+
 const Contact = ({ role, disabled, setDisabled }) => {
   const [status, setStatus] = useState({
-    status: "confirmed",
+    status: "",
   });
 
   const onClick = async () => {
@@ -30,6 +40,7 @@ const Contact = ({ role, disabled, setDisabled }) => {
 
     if (items.length === 0) {
       toaster("The email list is empty!", "error");
+      setDisabled(false);
       return;
     }
 
@@ -40,21 +51,30 @@ const Contact = ({ role, disabled, setDisabled }) => {
   };
 
   return (
-    <div className="lg:text-md grid w-full grid-cols-3 gap-0.5 rounded bg-white p-2 text-sm lg:w-1/2">
-      <div className="flex items-center">
-        <User className="mx-2" /> {role}
-      </div>
-
-      <Select
-        items={STATUSES}
-        placeholder="Status"
-        field="status"
-        user={status}
-        setUser={setStatus}
-      />
-
-      <Button text="copy" color="green" onClick={onClick} disabled={disabled} />
-    </div>
+    <Card key={role} className="flex min-w-[300px] flex-col">
+      <CardHeader>
+        <CardTitle className="flex items-center">
+          {roleIcons[role]} {role}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-2">
+        <Select
+          items={STATUSES}
+          placeholder="Select a status..."
+          field="status"
+          user={status}
+          setUser={setStatus}
+          onChange={() => setDisabled(status.status === "")}
+          className="placeholder-gray-400"
+        />
+        <Button
+          text="copy"
+          color="green"
+          onClick={onClick}
+          disabled={status.status === "" || disabled}
+        />
+      </CardContent>
+    </Card>
   );
 };
 

diff --git a/src/components/admin/services/contacts/Contacts.tsx b/src/components/admin/services/contacts/Contacts.tsx
@@ -18,14 +18,17 @@ const Contacts = () => {
   return (
     <div className="flex h-full flex-col gap-3 py-4 font-poppins">
       <Title title="Contacts" />
-      {contacts.map((role, index) => (
-        <Contact
-          key={index}
-          role={role}
-          disabled={disabled}
-          setDisabled={setDisabled}
-        />
-      ))}
+
+      <div className="grid w-full grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
+        {contacts.map((role, index) => (
+          <Contact
+            key={index}
+            role={role}
+            disabled={disabled}
+            setDisabled={setDisabled}
+          />
+        ))}
+      </div>
     </div>
   );
 };

diff --git a/src/data/Navigation.tsx b/src/data/Navigation.tsx
@@ -14,8 +14,8 @@ import {
   Search,
   Settings,
   QrCode,
-  CircleHelp,
-  Presentation,
+  HandHeart,
+  Gavel,
   Timer,
   Newspaper,
 } from "lucide-react";
@@ -60,7 +60,7 @@ export const TABS: Tabs = {
         {
           name: "judges",
           link: "/admin/judges",
-          icon: <Presentation className={iconStyle} />,
+          icon: <Gavel className={iconStyle} />,
         },
         {
           name: "volunteers",
@@ -70,7 +70,7 @@ export const TABS: Tabs = {
         {
           name: "mentors",
           link: "/admin/mentors",
-          icon: <CircleHelp className={iconStyle} />,
+          icon: <HandHeart className={iconStyle} />,
         },
         {
           name: "admin",