Gooey Filter

"use client";
 
import * as React from "react";
 
import { Button } from "@/components/ui/button";
import {
  GooeyTabPanel,
  type GooeyTabItem,
} from "@/components/gooey-filter";
 
const TABS: GooeyTabItem[] = [
  {
    id: "2024",
    label: "2024",
    items: [
      "learning-to-meditate.md",
      "spring-garden-plans.md",
      "travel-wishlist.md",
      "new-coding-projects.md",
    ],
  },
  {
    id: "2023",
    label: "2023",
    items: [
      "year-in-review.md",
      "photography-log.md",
      "recipe-collection.md",
      "side-project-notes.md",
    ],
  },
  {
    id: "2022",
    label: "2022",
    items: [
      "moving-checklist.md",
      "conference-talk.md",
      "book-highlights.md",
      "weekend-hikes.md",
    ],
  },
  {
    id: "2021",
    label: "2021",
    items: [
      "first-blog-post.md",
      "learning-rust.md",
      "home-office-setup.md",
      "morning-routine.md",
    ],
  },
];
 
export default function GooeyFilterDemo() {
  const [enabled, setEnabled] = React.useState(true);
 
  return (
    <div className="flex w-full flex-col items-center gap-6 bg-transparent px-8 py-10">
      <div className="flex w-full max-w-xl justify-start">
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={() => setEnabled((value) => !value)}
        >
          {enabled ? "Disable filter" : "Enable filter"}
        </Button>
      </div>
 
      <GooeyTabPanel tabs={TABS} enabled={enabled} defaultTab="2024" />
    </div>
  );
}