Shift detail card

1"use client";2 3import { useId, useState } from "react";4import { ArrowUpRight, ChevronUp } from "lucide-react";5 6export type ShiftDetailCardProps = {7  title: string;8  eyebrow?: string;9  description: string;10  details?: string[];11  actionLabel?: string;12  onAction?: () => void;13};14 15/** A layered card whose detail tray opens on hover, focus, or tap. */16export function ShiftDetailCard({17  title,18  eyebrow = "Featured component",19  description,20  details = [],21  actionLabel = "Open component",22  onAction,23}: ShiftDetailCardProps) {24  const detailId = useId();25  const [hovered, setHovered] = useState(false);26  const [manualState, setManualState] = useState<boolean | null>(null);27  const expanded = manualState ?? hovered;28