Improve club manage starting screen.

UTDNebula · Sep 17, 2024 · f0f8804 · f0f8804
1 parent 9e63ad0
commit f0f8804
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/src/app/manage/ClubCard.tsx b/src/app/manage/ClubCard.tsx
@@ -1,13 +1,25 @@
 import { type SelectClub } from '@src/server/db/models';
+import Image from 'next/image';
 import Link from 'next/link';
 
 const ClubCard = ({ club }: { club: SelectClub }) => {
   return (
     <Link
-      className="flex w-fit flex-col rounded-lg bg-white p-4 shadow-sm"
+      className="relative flex h-[300px] w-[356px] flex-col overflow-clip rounded-lg bg-white shadow-sm"
       href={`/manage/${club.id}`}
     >
-      <h2 className="text-lg font-bold text-blue-primary">{club.name}</h2>
+      <h2 className="absolute top-0 w-full bg-white p-4 text-lg font-bold text-blue-primary shadow-sm">
+        {club.name}
+      </h2>
+      <div>
+        <Image
+          alt={club.name}
+          src={club.profileImage ?? '/nebula-logo.png'}
+          width={356}
+          height={300}
+          className=""
+        />
+      </div>
     </Link>
   );
 };

diff --git a/src/app/manage/ManagePanel.tsx b/src/app/manage/ManagePanel.tsx
@@ -1,23 +1,46 @@
 'use client';
 
-import { SearchBar } from '@src/components/SearchBar';
 import { type RouterOutputs } from '@src/trpc/shared';
 import ClubCard from './ClubCard';
+import { SearchIcon } from '@src/icons/Icons';
+import { useState } from 'react';
 
 const ManagePanel = ({
   clubs,
 }: {
   clubs: RouterOutputs['club']['getOfficerClubs'];
 }) => {
+  const [search, setSearch] = useState('');
+
   return (
     <>
       <div className="flex flex-row">
-        <SearchBar placeholder="Search your Clubs" />
+        <div className="mr-3 w-full max-w-xs md:max-w-sm lg:max-w-md">
+          <div className="relative">
+            <span className="absolute inset-y-0 flex items-center pl-3">
+              <SearchIcon />
+            </span>
+            <input
+              type="text"
+              placeholder={'Search your clubs'}
+              className="h-10 w-full rounded-full border pl-10 pr-3 focus:outline-none"
+              tabIndex={0}
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value);
+              }}
+            />
+          </div>
+        </div>
       </div>
       <div className="flex h-full w-full flex-wrap gap-4 p-4">
-        {clubs.map((club) => (
-          <ClubCard key={club.id} club={club} />
-        ))}
+        {clubs
+          .filter((club) =>
+            club.name.toLowerCase().includes(search.toLowerCase()),
+          )
+          .map((club) => (
+            <ClubCard key={club.id} club={club} />
+          ))}
       </div>
     </>
   );

diff --git a/src/app/manage/page.tsx b/src/app/manage/page.tsx
@@ -1,3 +1,4 @@
+'use server';
 import { BaseHeader } from '@src/components/BaseHeader';
 import { getServerAuthSession } from '@src/server/auth';
 import { api } from '@src/trpc/server';
@@ -22,7 +23,7 @@ export default async function Page() {
           </h1>
           <Link
             type="button"
-            className="ml-auto flex flex-row items-center rounded-[1.875rem] bg-blue-primary px-8 py-4 text-white"
+            className="ml-auto flex flex-row items-center rounded-[1.875rem] bg-blue-primary px-6 py-3 text-white transition-colors hover:bg-blue-700"
             href={'/directory/create'}
           >
             <span className="h-min">New Club</span>