Suggestion Banner

1'use client';
2 
3import { useState } from 'react';
4import { Check, Sparkles, X } from 'lucide-react';
5import { cn } from '@/lib/utils';
6 
7const KEYFRAMES = `
8@keyframes su-pop { 0% { opacity: 0; transform: scale(0.85) } 100% { opacity: 1; transform: none } }
9@keyframes su-msg-in { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
10`;
11 
12export type SuggestionState = 'open' | 'applied' | 'dismissed';
13 
14export type SuggestionBannerVariant = 'Inline' | 'Floating';
15 
16export interface SuggestionBannerProps {
17  suggestion?: string;
18  detail?: string;
19  applyLabel?: string;
20  state?: SuggestionState;
21  onApply?: () => void;
22  onDismiss?: () => void;
23  variant?: SuggestionBannerVariant;
24  className?: string;
25}
26 
27export function SuggestionBanner({
28  suggestion = 'Flag Meridian Lines in the weekly carrier report',
29  detail = 'Based on the SLA breach found on the Rotterdam–Felixstowe lane.',
30  applyLabel = 'Apply',
31  state: stateProp,
32  onApply,
33  onDismiss,
34  variant = 'Inline',
35  className,
36}: SuggestionBannerProps) {
37  const [stateState, setStateState] = useState<SuggestionState>('open');
38  const state = stateProp !== undefined ? stateProp : stateState;
39 
40  function apply() {
41    setStateState('applied');
42    onApply?.();
43  }
44  function dismiss() {
45    setStateState('dismissed');
46    onDismiss?.();
47  }
48 
49  if (state === 'dismissed') return null;
50 
51  if (state === 'applied') {
52    return (
53      <div
54        role="status"
55        className={cn(
56          'flex w-fit items-center gap-2 rounded-full bg-emerald-500/10 px-3 py-1.5 text-[12.5px] font-medium text-emerald-700 motion-safe:animate-[su-msg-in_240ms_cubic-bezier(0.23,1,0.32,1)_both] dark:text-emerald-400',
57          className,
58        )}
59      >
60        <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />
61        <Check className="size-3.5 motion-safe:animate-[su-pop_200ms_cubic-bezier(0.23,1,0.32,1)_both]" strokeWidth={2.5} />
62        Applied — {suggestion.charAt(0).toLowerCase() + suggestion.slice(1)}
63      </div>
64    );
65  }
66 
67  return (
68    <div
69      className={cn(
70        'flex w-full max-w-[480px] items-start gap-2.5 rounded-xl border border-black/[0.08] bg-white py-2.5 pl-3 pr-2 dark:border-white/[0.09] dark:bg-[#0B0B0D]',
71        variant === 'Floating' && 'shadow-lg',
72        className,
73      )}
74    >
75      <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />
76      <Sparkles className="mt-0.5 size-3.5 shrink-0 text-neutral-400 dark:text-neutral-500" />
77 
78// … truncated