import { useState } from 'react';
import type { LDClient } from "launchdarkly-js-client-sdk";
import { sendFeedback, type LDFeedbackSentiment } from './sendFeedback';
const ThumbsUpIcon = () => (
);
const ThumbsDownIcon = () => (
);
const HappyFaceIcon = () => (
);
const NeutralFaceIcon = () => (
);
const FrownyFaceIcon = () => (
);
type SentimentOption = { value: LDFeedbackSentiment; label: string; Icon: React.FC };
const THUMBS_OPTIONS: SentimentOption[] = [
{ value: "positive", label: "Thumbs up", Icon: ThumbsUpIcon },
{ value: "negative", label: "Thumbs down", Icon: ThumbsDownIcon },
];
const SMILEY_OPTIONS: SentimentOption[] = [
{ value: "positive", label: "Happy face", Icon: HappyFaceIcon },
{ value: "neutral", label: "Neutral face", Icon: NeutralFaceIcon },
{ value: "negative", label: "Frowny face", Icon: FrownyFaceIcon },
];
export function InlineFeedback({
flagKey,
prompt,
icons,
ldClient,
}: {
flagKey: string;
prompt: string;
icons: "thumbs" | "smileys";
ldClient: LDClient;
}) {
const [voted, setVoted] = useState(false);
const sentimentOptions = icons === "thumbs" ? THUMBS_OPTIONS : SMILEY_OPTIONS;
const handleClick = (sentiment: LDFeedbackSentiment) => {
sendFeedback(ldClient, flagKey, "", sentiment, prompt);
setVoted(true);
};
if (voted) {
return Thanks for your feedback!;
}
return (
{prompt}
{sentimentOptions.map(({ value, label, Icon }) => (
))}
);
}
// Usage examples:
//
//