Sliding Content Tabs

1"use client";2
3import { useState } from "react";4import { Star, ThumbsUp, Users } from "lucide-react";5
6const tabs = [7  { label: "Audience", content: "1,284 people are in your audience.", Icon: Users },8  { label: "Reactions", content: "68 people reacted to your latest post.", Icon: ThumbsUp },9  { label: "Saved", content: "12 items are saved for later.", Icon: Star },10];11
12export function SlidingContentTabs() {13  const [active, setActive] = useState(0);14  const activeTab = tabs[active];15
16  return (17    <section className="w-full max-w-[288px] rounded-[10px] border border-[#30343a] bg-[#101216] p-[5px]">18      <div className="relative grid grid-cols-3" role="tablist" aria-label="Activity">19        {tabs.map(({ label, Icon }, index) => (20          <button21            key={label}22            id={`sliding-tab-${index}`}23            type="button"24            role="tab"25            aria-selected={active === index}26            className={`relative z-10 inline-flex min-w-0 items-center justify-center gap-1.5 rounded-md border-0 bg-transparent px-1.5 py-[9px] text-[11px] transition-colors duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[#f97316] ${active === index ? "text-white" : "text-[#858c96]"}`}27            onClick={() => setActive(index)}28          >29            <Icon size={15} strokeWidth={1.8} aria-hidden="true" />30            <span>{label}</span>31          </button>32        ))}33        <span34          className="pointer-events-none absolute inset-y-0 left-0 w-1/3 rounded-md bg-[#f97316] shadow-[0_1px_2px_#0005] transition-transform duration-[750ms] ease-[cubic-bezier(.22,1,.36,1)]"35          style={{ transform: `translateX(${active * 100}%)` }}36          aria-hidden="true"37        />38      </div>39      <p key={active} className="m-0 px-2 pb-[7px] pt-[14px] text-[11px] leading-[1.4] text-[#a9afb8]">40        {activeTab.content}41      </p>42    </section>43  );44}