Arkie-Library-Frontend/src/components/SectionHeader.tsx

import { ChevronRight } from "lucide-react";
import { Link } from "react-router-dom";

export function SectionHeader({
  title,
  viewAllTo,
  viewAllLabel,
}: {
  title: string;
  viewAllTo: string;
  viewAllLabel: string;
}) {
  return (
    <div className="flex h-[49px] items-center justify-between gap-4 md:h-6">
      <div className="flex min-w-0 items-center gap-3 md:gap-4">
        <span
          className="h-5 w-[3px] shrink-0 bg-ark-gold md:h-6 md:w-1"
          aria-hidden
        />
        <h2 className="truncate text-lg font-semibold leading-[24.5px] tracking-tight text-white md:text-2xl md:font-bold md:leading-6">
          {title}
        </h2>
      </div>
      <Link
        to={viewAllTo}
        className="inline-flex shrink-0 items-center gap-1 text-[13px] font-normal leading-none text-ark-gold hover:text-ark-gold2 md:text-[15px] md:font-medium"
      >
        {viewAllLabel}
        <ChevronRight className="h-4 w-4" strokeWidth={2.7} />
      </Link>
    </div>
  );
}