39 lines
966 B
TypeScript
39 lines
966 B
TypeScript
"use client";
|
|
|
|
import { LockKeyhole } from "lucide-react";
|
|
|
|
import styles from "./private-message-card.module.css";
|
|
|
|
export interface PrivateMessageCardProps {
|
|
hint?: string | null;
|
|
isUnlocking?: boolean;
|
|
onUnlock?: () => void;
|
|
}
|
|
|
|
export function PrivateMessageCard({
|
|
hint,
|
|
isUnlocking = false,
|
|
onUnlock,
|
|
}: PrivateMessageCardProps) {
|
|
return (
|
|
<div className={styles.card} role="group" aria-label="Locked private message">
|
|
<div className={styles.iconWrap} aria-hidden="true">
|
|
<LockKeyhole className={styles.icon} size={22} />
|
|
</div>
|
|
<p className={styles.hint}>
|
|
{hint && hint.length > 0
|
|
? hint
|
|
: "Elio has a private message for you."}
|
|
</p>
|
|
<button
|
|
type="button"
|
|
className={styles.button}
|
|
disabled={isUnlocking || !onUnlock}
|
|
onClick={onUnlock}
|
|
>
|
|
{isUnlocking ? "Unlocking..." : "Unlock private message"}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|