published toggle

src/components/blog/PublishStatusToggle.tsx

@@ -0,0 +1,45 @@
+import { useSearchParams } from "@solidjs/router";
+
+type PublishStatus = "all" | "published" | "unpublished";
+
+export default function PublishStatusToggle() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const currentStatus = (): PublishStatus => {
+    return (searchParams.status as PublishStatus) || "all";
+  };
+
+  const handleStatusChange = (status: PublishStatus) => {
+    setSearchParams({ status });
+  };
+
+  const buttonClass = (status: PublishStatus) =>
+    `px-4 py-2 transition-all duration-300 ${
+      currentStatus() === status
+        ? "bg-text text-base font-semibold"
+        : "bg-transparent hover:brightness-125"
+    }`;
+
+  return (
+    <div class="border-text mx-auto mt-2 flex overflow-hidden rounded border">
+      <button
+        onClick={() => handleStatusChange("all")}
+        class={buttonClass("all")}
+      >
+        All
+      </button>
+      <button
+        onClick={() => handleStatusChange("published")}
+        class={`${buttonClass("published")} border-text border-r border-l`}
+      >
+        Published
+      </button>
+      <button
+        onClick={() => handleStatusChange("unpublished")}
+        class={buttonClass("unpublished")}
+      >
+        Unpublished
+      </button>
+    </div>
+  );
+}