anydrop/web/src/components/TextShareModal.tsx
ordinarthur c18d995c3f feat(web): Paper & Envelope design system
Replace generic slate/indigo dark theme with a custom editorial
direction: warm paper neutrals, oxblood signal, Fraunces serif
display, Inter body, JetBrains Mono for codes. SVG paper-texture
noise overlay and thin rules across the app.

Refactored: Home, Settings, JoinRoom, Pair, Share, plus every
modal and panel (DropZone, DevicePairingPanel, PublicRoomPanel,
ProfileSetup, TextShareModal, ReceiveDialog, TransferProgress,
PeerList, PeerAvatar).

Also drops three pre-existing Uint8Array/BlobPart strictness
errors so the production build is green again.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-20 10:49:15 +02:00

66 lines
2.1 KiB
TypeScript

import { useState } from "react";
interface TextShareModalProps {
onSend: (text: string) => void;
onClose: () => void;
}
export default function TextShareModal({ onSend, onClose }: TextShareModalProps) {
const [text, setText] = useState("");
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (text.trim()) {
onSend(text.trim());
onClose();
}
};
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 p-4"
onClick={onClose}
>
<div
className="paper-panel shadow-lift rounded-sm p-6 w-full max-w-md"
onClick={(e) => e.stopPropagation()}
>
<div className="text-xs uppercase tracking-[0.2em] text-ink-muted">
Compose
</div>
<h2 className="font-display text-2xl text-ink mt-1 mb-5">Send text</h2>
<form onSubmit={handleSubmit}>
<textarea
autoFocus
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Message, link, snippet…"
className="w-full h-32 bg-paper border border-paper-edge rounded-sm p-3
text-sm text-ink placeholder:text-ink-faint resize-none
focus:outline-none focus:border-ink transition-colors
duration-fast ease-crisp"
/>
<div className="flex justify-end gap-3 mt-5">
<button
type="button"
onClick={onClose}
className="px-3 py-2 text-sm text-ink-muted hover:text-ink transition-colors"
>
Cancel
</button>
<button
type="submit"
disabled={!text.trim()}
className="px-5 py-2 bg-ink text-paper text-sm font-medium rounded-sm
hover:bg-signal transition-colors duration-fast ease-crisp
disabled:opacity-30 disabled:cursor-not-allowed"
>
Send
</button>
</div>
</form>
</div>
</div>
);
}