feat: rotating dropdown icon (closes #50)

one-zero-eight · Jan 25, 2024 · 962618e · 962618e
1 parent d10baba
commit 962618e
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 69 deletions.
diff --git a/components/CategoriesDropdown.tsx b/components/CategoriesDropdown.tsx
@@ -8,38 +8,48 @@ function CategoriesDropdown({ category }: { category: string }) {
   const categoryInfo = getCategoryInfoBySlug(category);
   return (
     <Popover className="relative z-[2] w-max rounded-2xl opacity-[0.999] focus:outline-none">
-      <Popover.Button className="w-full rounded-2xl focus:outline-none">
-        <div className="flex flex-row items-center gap-2 rounded-2xl bg-primary-main p-4 py-2.5 text-xl text-text-secondary/75 hover:text-icon-hover/75">
-          <p className="whitespace-nowrap">
-            {(categoryInfo && categoryInfo.title) || ""}
-          </p>
+      {({ open }) => (
+        <>
+          <Popover.Button className="w-full rounded-2xl focus:outline-none">
+            <div className="flex flex-row items-center gap-2 rounded-2xl bg-primary-main p-4 py-2.5 text-xl text-text-secondary/75 hover:text-icon-hover/75">
+              <p className="whitespace-nowrap">
+                {(categoryInfo && categoryInfo.title) || ""}
+              </p>
 
-          <span className="icon-[material-symbols--expand-more] text-4xl" />
-        </div>
-      </Popover.Button>
+              <span
+                className={
+                  open
+                    ? "icon-[material-symbols--expand-less] text-4xl"
+                    : "icon-[material-symbols--expand-more] text-4xl"
+                }
+              />
+            </div>
+          </Popover.Button>
 
-      <Transition
-        enter="transition duration-120 ease-out"
-        enterFrom="transform scale-95 opacity-0"
-        enterTo="transform scale-100 opacity-100"
-        leave="transition duration-125 ease-out"
-        leaveFrom="transform scale-100 opacity-100"
-        leaveTo="transform scale-95 opacity-0"
-      >
-        <Popover.Panel className="absolute rounded-2xl bg-primary-main drop-shadow-2xl focus:outline-none">
-          <div className="flex flex-col items-center justify-center divide-y divide-border">
-            {Object.values(viewConfig.categories).map((v) => (
-              <Link
-                href={`/schedule/${v.alias}`}
-                key={v.alias}
-                className="flex w-full flex-row items-center rounded-2xl bg-primary-main px-5 py-4 text-xl text-text-secondary/75 focus:outline-none"
-              >
-                {v.title}
-              </Link>
-            ))}
-          </div>
-        </Popover.Panel>
-      </Transition>
+          <Transition
+            enter="transition duration-120 ease-out"
+            enterFrom="transform scale-95 opacity-0"
+            enterTo="transform scale-100 opacity-100"
+            leave="transition duration-125 ease-out"
+            leaveFrom="transform scale-100 opacity-100"
+            leaveTo="transform scale-95 opacity-0"
+          >
+            <Popover.Panel className="absolute rounded-2xl bg-primary-main drop-shadow-2xl focus:outline-none">
+              <div className="flex flex-col items-center justify-center divide-y divide-border">
+                {Object.values(viewConfig.categories).map((v) => (
+                  <Link
+                    href={`/schedule/${v.alias}`}
+                    key={v.alias}
+                    className="flex w-full flex-row items-center rounded-2xl bg-primary-main px-5 py-4 text-xl text-text-secondary/75 focus:outline-none"
+                  >
+                    {v.title}
+                  </Link>
+                ))}
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
     </Popover>
   );
 }

diff --git a/components/FilterDropdown.tsx b/components/FilterDropdown.tsx
@@ -23,47 +23,57 @@ function FilterDropdown({
 
   return (
     <Popover className="relative z-[1] w-max rounded-2xl opacity-[0.999] focus:outline-none">
-      <Popover.Button className="w-full rounded-2xl focus:outline-none">
-        <div className="flex flex-row items-center gap-2 rounded-2xl bg-primary-main p-4 py-2.5 text-xl text-text-secondary/75 hover:text-icon-hover/75">
-          <p className="whitespace-nowrap">
-            {selectedTagInfo?.name || "Filter"}
-          </p>
+      {({ open }) => (
+        <>
+          <Popover.Button className="w-full rounded-2xl focus:outline-none">
+            <div className="flex flex-row items-center gap-2 rounded-2xl bg-primary-main p-4 py-2.5 text-xl text-text-secondary/75 hover:text-icon-hover/75">
+              <p className="whitespace-nowrap">
+                {selectedTagInfo?.name || "Filter"}
+              </p>
 
-          <span className="icon-[material-symbols--expand-more] text-4xl" />
-        </div>
-      </Popover.Button>
+              <span
+                className={
+                  open
+                    ? "icon-[material-symbols--expand-less] text-4xl"
+                    : "icon-[material-symbols--expand-more] text-4xl"
+                }
+              />
+            </div>
+          </Popover.Button>
 
-      <Transition
-        enter="transition duration-120 ease-out"
-        enterFrom="transform scale-95 opacity-0"
-        enterTo="transform scale-100 opacity-100"
-        leave="transition duration-125 ease-out"
-        leaveFrom="transform scale-100 opacity-100"
-        leaveTo="transform scale-95 opacity-0"
-      >
-        <Popover.Panel className="absolute z-10 rounded-2xl bg-primary-main drop-shadow-2xl focus:outline-none">
-          <div className="flex flex-col items-center justify-center divide-y divide-border">
-            <Popover.Button
-              className="flex w-full flex-row items-center rounded-2xl bg-primary-main px-5 py-4 text-xl text-text-secondary/75 focus:outline-none"
-              value={""}
-              onClick={(e) => setSelected((e.target as any).value)}
-            >
-              All
-            </Popover.Button>
-            {optionsInfos.map((v) => (
-              <Popover.Button
-                className="flex w-full flex-row items-center whitespace-nowrap rounded-2xl bg-primary-main px-5 py-4 text-xl text-text-secondary/75 focus:outline-none"
-                value={v.alias}
-                key={v.alias}
-                onClick={(e) => setSelected((e.target as any).value)}
-              >
-                {v.name}
-              </Popover.Button>
-            ))}
-          </div>
-        </Popover.Panel>
-      </Transition>
-      <Popover.Panel className="absolute z-10"></Popover.Panel>
+          <Transition
+            enter="transition duration-120 ease-out"
+            enterFrom="transform scale-95 opacity-0"
+            enterTo="transform scale-100 opacity-100"
+            leave="transition duration-125 ease-out"
+            leaveFrom="transform scale-100 opacity-100"
+            leaveTo="transform scale-95 opacity-0"
+          >
+            <Popover.Panel className="absolute z-10 rounded-2xl bg-primary-main drop-shadow-2xl focus:outline-none">
+              <div className="flex flex-col items-center justify-center divide-y divide-border">
+                <Popover.Button
+                  className="flex w-full flex-row items-center rounded-2xl bg-primary-main px-5 py-4 text-xl text-text-secondary/75 focus:outline-none"
+                  value={""}
+                  onClick={(e) => setSelected((e.target as any).value)}
+                >
+                  All
+                </Popover.Button>
+                {optionsInfos.map((v) => (
+                  <Popover.Button
+                    className="flex w-full flex-row items-center whitespace-nowrap rounded-2xl bg-primary-main px-5 py-4 text-xl text-text-secondary/75 focus:outline-none"
+                    value={v.alias}
+                    key={v.alias}
+                    onClick={(e) => setSelected((e.target as any).value)}
+                  >
+                    {v.name}
+                  </Popover.Button>
+                ))}
+              </div>
+            </Popover.Panel>
+          </Transition>
+          <Popover.Panel className="absolute z-10"></Popover.Panel>
+        </>
+      )}
     </Popover>
   );
 }