Update to new design. (#1103)

components/layout/search/collections.tsx

@@ -10,14 +10,14 @@ async function CollectionList() {
 }
 
 const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded';
-const activeAndTitles = 'bg-gray-800 dark:bg-gray-300';
-const items = 'bg-gray-400 dark:bg-gray-700';
+const activeAndTitles = 'bg-neutral-800 dark:bg-neutral-300';
+const items = 'bg-neutral-400 dark:bg-neutral-700';
 
 export default function Collections() {
   return (
     <Suspense
       fallback={
-        <div className="col-span-2 hidden h-[400px] w-full flex-none py-4 pl-10 lg:block">
+        <div className="col-span-2 hidden h-[400px] w-full flex-none py-4 lg:block">
           <div className={clsx(skeleton, activeAndTitles)} />
           <div className={clsx(skeleton, activeAndTitles)} />
           <div className={clsx(skeleton, items)} />

components/layout/search/filter/dropdown.tsx

@@ -3,7 +3,7 @@
 import { usePathname, useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 
-import Caret from 'components/icons/caret-right';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import type { ListItem } from '.';
 import { FilterItem } from './item';
 
@@ -45,7 +45,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
         className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30"
       >
         <div>{active}</div>
-        <Caret className="h-4 rotate-90" />
+        <ChevronDownIcon className="h-4" />
       </div>
       {openSelect && (
         <div

components/layout/search/filter/index.tsx

@@ -7,21 +7,19 @@ export type PathFilterItem = { title: string; path: string };
 
 function FilterItemList({ list }: { list: ListItem[] }) {
   return (
-    <div className="hidden md:block">
+    <>
       {list.map((item: ListItem, i) => (
         <FilterItem key={i} item={item} />
       ))}
-    </div>
+    </>
   );
 }
 
 export default function FilterList({ list, title }: { list: ListItem[]; title?: string }) {
   return (
     <>
-      <nav className="col-span-2 w-full flex-none px-6 py-2 md:py-4 md:pl-10">
-        {title ? (
-          <h3 className="hidden font-semibold text-black dark:text-white md:block">{title}</h3>
-        ) : null}
+      <nav>
+        {title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
         <ul className="hidden md:block">
           <FilterItemList list={list} />
         </ul>

components/layout/search/filter/item.tsx

@@ -13,6 +13,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
   const searchParams = useSearchParams();
   const [active, setActive] = useState(pathname === item.path);
   const newParams = new URLSearchParams(searchParams.toString());
+  const DynamicTag = active ? 'p' : Link;
 
   newParams.delete('q');
 
@@ -21,16 +22,18 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
   }, [pathname, item.path]);
 
   return (
-    <li className="mt-2 flex text-sm text-gray-400" key={item.title}>
-      <Link
+    <li className="mt-2 flex text-black dark:text-white" key={item.title}>
+      <DynamicTag
         href={createUrl(item.path, newParams)}
-        className={clsx('w-full hover:text-gray-800 dark:hover:text-gray-100', {
-          'text-gray-600 dark:text-gray-400': !active,
-          'font-semibold text-black dark:text-white': active
-        })}
+        className={clsx(
+          'w-full text-sm underline-offset-4 hover:underline dark:hover:text-neutral-100',
+          {
+            'underline underline-offset-4': active
+          }
+        )}
       >
         {item.title}
-      </Link>
+      </DynamicTag>
     </li>
   );
 }
@@ -40,34 +43,30 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
   const searchParams = useSearchParams();
   const [active, setActive] = useState(searchParams.get('sort') === item.slug);
   const q = searchParams.get('q');
+  const href = createUrl(
+    pathname,
+    new URLSearchParams({
+      ...(q && { q }),
+      ...(item.slug && item.slug.length && { sort: item.slug })
+    })
+  );
+  const DynamicTag = active ? 'p' : Link;
 
   useEffect(() => {
     setActive(searchParams.get('sort') === item.slug);
   }, [searchParams, item.slug]);
 
-  const href =
-    item.slug && item.slug.length
-      ? createUrl(
-          pathname,
-          new URLSearchParams({
-            ...(q && { q }),
-            sort: item.slug
-          })
-        )
-      : pathname;
-
   return (
-    <li className="mt-2 flex text-sm text-gray-400" key={item.title}>
-      <Link
-        prefetch={false}
+    <li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}>
+      <DynamicTag
+        prefetch={!active ? false : undefined}
         href={href}
-        className={clsx('w-full hover:text-gray-800 dark:hover:text-gray-100', {
-          'text-gray-600 dark:text-gray-400': !active,
-          'font-semibold text-black dark:text-white': active
+        className={clsx('w-full', {
+          'underline underline-offset-4': active
         })}
       >
         {item.title}
-      </Link>
+      </DynamicTag>
     </li>
   );
 }