File size: 5,394 Bytes
50a8ea3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | import React, { useState } from 'react';
import { LegalCase } from '../types';
interface ShareModalProps {
legalCase: LegalCase;
onClose: () => void;
}
export const ShareModal: React.FC<ShareModalProps> = ({ legalCase, onClose }) => {
const [accessLevel, setAccessLevel] = useState<'view' | 'edit'>('view');
const [copied, setCopied] = useState(false);
const shareUrl = `https://caseloop.civic.internal/f/${legalCase.id}?token=sec_7f991b`;
const handleCopy = () => {
navigator.clipboard.writeText(shareUrl);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
<div className="fixed inset-0 bg-black/50 backdrop-blur-xs flex items-center justify-center p-4 z-50 animate-in fade-in duration-200">
<div className="bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-[#E2E8F0] flex flex-col gap-5">
<div className="flex justify-between items-center pb-3 border-b border-[#E2E8F0]">
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#006c4a] text-[22px]">share</span>
<h3 className="font-headline font-bold text-[18px] text-[#0F172A]">
Share Secure Legal Filing
</h3>
</div>
<button
onClick={onClose}
className="text-[#64748B] hover:text-[#0F172A] p-1"
>
<span className="material-symbols-outlined">close</span>
</button>
</div>
<div className="text-[13px] text-[#475569]">
Generate an encrypted access link for legal co-counsel, legal aid clinics, or ombudsman review.
</div>
{/* Case preview pill */}
<div className="bg-[#F8FAFC] border border-[#E2E8F0] rounded-lg p-3 flex items-center gap-3">
<div className="w-8 h-8 rounded bg-[#0F172A] text-white flex items-center justify-center text-[13px] font-bold">
CL
</div>
<div className="min-w-0 flex-1">
<div className="font-headline font-bold text-[14px] text-[#0F172A] truncate">
{legalCase.title}
</div>
<div className="text-[11px] text-[#64748B]">
{legalCase.caseNumber} • {legalCase.category}
</div>
</div>
</div>
{/* Access level */}
<div className="flex flex-col gap-1.5">
<label className="text-[12px] font-bold text-[#475569] uppercase tracking-wider">
Permission Level
</label>
<div className="grid grid-cols-2 gap-2">
<button
onClick={() => setAccessLevel('view')}
className={`p-2.5 rounded-lg border text-left text-[12.5px] transition-colors cursor-pointer ${
accessLevel === 'view'
? 'border-[#0F172A] bg-[#F1F5F9] font-semibold text-[#0F172A]'
: 'border-[#CBD5E1] text-[#64748B] hover:bg-[#F8FAFC]'
}`}
>
<div className="flex items-center gap-1.5">
<span className="material-symbols-outlined text-[16px]">visibility</span>
<span>View & Verify</span>
</div>
<p className="text-[11px] text-[#64748B] mt-1 font-normal">
Can inspect draft & verify statutory citations
</p>
</button>
<button
onClick={() => setAccessLevel('edit')}
className={`p-2.5 rounded-lg border text-left text-[12.5px] transition-colors cursor-pointer ${
accessLevel === 'edit'
? 'border-[#0F172A] bg-[#F1F5F9] font-semibold text-[#0F172A]'
: 'border-[#CBD5E1] text-[#64748B] hover:bg-[#F8FAFC]'
}`}
>
<div className="flex items-center gap-1.5">
<span className="material-symbols-outlined text-[16px]">edit</span>
<span>Co-Drafting</span>
</div>
<p className="text-[11px] text-[#64748B] mt-1 font-normal">
Can add clauses, adjust facts & export PDF
</p>
</button>
</div>
</div>
{/* Link box */}
<div className="flex items-center gap-2">
<input
type="text"
readOnly
value={shareUrl}
className="w-full bg-[#F8FAFC] border border-[#CBD5E1] rounded-lg p-2.5 text-[12px] text-[#334155] font-mono select-all"
/>
<button
onClick={handleCopy}
className="bg-[#0F172A] hover:bg-[#1E293B] text-white text-[13px] font-medium px-4 py-2.5 rounded-lg flex items-center gap-1.5 transition-colors cursor-pointer flex-shrink-0"
>
<span className="material-symbols-outlined text-[16px]">
{copied ? 'check' : 'content_copy'}
</span>
<span>{copied ? 'Copied' : 'Copy'}</span>
</button>
</div>
<div className="flex items-center gap-1 text-[11px] text-[#059669]">
<span className="material-symbols-outlined text-[14px]">lock</span>
<span>Link expires in 72 hours. All PII masked by default.</span>
</div>
</div>
</div>
);
};
|