Bookmarks list switch

src/components/Input.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { forwardRef, HTMLProps } from 'react';
+import { forwardRef, HTMLProps, useState } from 'react';
 
 export const Input = forwardRef<HTMLInputElement, HTMLProps<HTMLInputElement>>(
   function Input({ className, ...props }, ref) {
@@ -61,3 +61,34 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps<any>>(
     );
   }
 );
+
+export const Switch = forwardRef<HTMLInputElement, HTMLProps<HTMLInputElement>>(
+  function Switch({ label, onClick, checked, ...props }, ref) {
+    const [isChecked, setIsChecked] = useState(checked);
+    return (
+      <label className="relative inline-flex  cursor-pointer">
+        <div className="flex-1">
+          <input
+            type="checkbox"
+            checked={isChecked}
+            className="sr-only peer"
+            onClick={(e) => {
+              setIsChecked(!isChecked);
+              onClick && onClick(e);
+            }}
+            ref={ref}
+            {...props}
+          />
+          <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-violet-300 dark:peer-focus:ring-violet-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-violet-600"></div>
+        </div>
+        <span
+          className={`ml-3 text-sm font-medium text-gray-900 dark:text-gray-300 ${
+            !isChecked ? 'opacity-40' : 'opacity-100'
+          }`}
+        >
+          {label}
+        </span>
+      </label>
+    );
+  }
+);

src/components/bookmark/BookmarksControls.tsx

@@ -1,8 +1,9 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useState } from 'react';
 import Pagination from '../list/Pagination';
 import clsx from 'clsx';
 import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { useTransition } from 'react';
+import { Switch } from '../Input';
 
 export const BookmarksControls = ({
   linkCount,
@@ -12,31 +13,28 @@ export const BookmarksControls = ({
   let [isPending, startTransition] = useTransition();
   const { replace } = useRouter();
 
+  const handleCheckboxChange = () => {
+    if (!searchParams) return;
+
+    const params = new URLSearchParams(searchParams);
+    if (params.get('all') === 'true') {
+      params.delete('all');
+    } else {
+      params.set('all', 'true');
+      params.delete('page');
+    }
+    startTransition(() => {
+      replace(path + `?${params.toString()}`);
+    });
+  };
+
   return (
-    <div className="flex items-center justify-center gap-3">
-      <button
-        title="Show unused bookmarks"
-        className={clsx(
-          'm-1 relative top-[2px] inline-flex items-center rounded-full border py-1 px-3 text-sm font-bold cursor-pointer transition ease-in-out duration-150 focus:outline-none',
-          searchParams?.get('all') === 'true' &&
-            'bg-gray-900 text-white border-black',
-          searchParams?.get('all') !== 'false' && 'opacity-40 hover:opacity-100'
-        )}
-        onClick={() => {
-          if (!searchParams) return;
-          const params = new URLSearchParams(searchParams);
-          if (params.get('all') === 'true') {
-            params.delete('all');
-          } else {
-            params.set('all', 'true');
-          }
-          startTransition(() => {
-            replace(path + `?${params.toString()}`);
-          });
-        }}
-      >
-        All bookmarks
-      </button>
+    <div className="flex items-center justify-end gap-3 max-sm:w-full max-sm:justify-between">
+      <Switch
+        label="View all bookmarks"
+        onClick={handleCheckboxChange}
+        checked={searchParams?.has('all')}
+      />
       <Pagination totalItems={linkCount} className="h-6" />
     </div>
   );

src/components/pages/Team.tsx

@@ -29,7 +29,7 @@ const Team = ({ team, linkCount, bookmarks, digests }: Props) => {
         <Card
           className="w-full lg:w-2/3"
           header={
-            <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center justify-between gap-3 max-sm:flex-col max-sm:items-start">
               <div className="flex items-center gap-3 h-8">
                 <h2 className="text-xl">Bookmarks</h2>
                 <CounterTag count={linkCount} />