73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { ImagePlus, Mic2, Coffee } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
import styles from "./chat-composer-action-menu.module.css";
|
|
|
|
export interface ChatComposerActionMenuProps {
|
|
id: string;
|
|
disabled?: boolean;
|
|
tipHref: string;
|
|
onImage: () => void;
|
|
onVoice: () => void;
|
|
onNavigate: () => void;
|
|
}
|
|
|
|
export function ChatComposerActionMenu({
|
|
id,
|
|
disabled = false,
|
|
tipHref,
|
|
onImage,
|
|
onVoice,
|
|
onNavigate,
|
|
}: ChatComposerActionMenuProps) {
|
|
return (
|
|
<div id={id} className={styles.menu} aria-label="Chat actions">
|
|
<button
|
|
type="button"
|
|
className={styles.action}
|
|
disabled={disabled}
|
|
data-analytics-key="chat.promotion_image"
|
|
onClick={onImage}
|
|
>
|
|
<span className={`${styles.icon} ${styles.imageIcon}`}>
|
|
<ImagePlus size={21} strokeWidth={2} aria-hidden="true" />
|
|
</span>
|
|
<span>Image</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={styles.action}
|
|
disabled={disabled}
|
|
data-analytics-key="chat.promotion_voice"
|
|
onClick={onVoice}
|
|
>
|
|
<span className={`${styles.icon} ${styles.voiceIcon}`}>
|
|
<Mic2 size={21} strokeWidth={2} aria-hidden="true" />
|
|
</span>
|
|
<span>Voice</span>
|
|
</button>
|
|
<Link
|
|
href={tipHref}
|
|
className={styles.action}
|
|
aria-disabled={disabled}
|
|
tabIndex={disabled ? -1 : undefined}
|
|
data-analytics-key="chat.open_tip"
|
|
onClick={(event) => {
|
|
if (disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
onNavigate();
|
|
}}
|
|
>
|
|
<span className={`${styles.icon} ${styles.tipIcon}`}>
|
|
<Coffee size={21} strokeWidth={2} aria-hidden="true" />
|
|
</span>
|
|
<span>Tip</span>
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|