File size: 7,581 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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 | import React, { useState } from 'react';
import { Rulebook } from '../types';
interface RulebooksModalProps {
rulebooks: Rulebook[];
onSelectRulebook: (rulebookId: string) => void;
onClose: () => void;
}
export const RulebooksModal: React.FC<RulebooksModalProps> = ({
rulebooks,
onSelectRulebook,
onClose,
}) => {
const [activeTab, setActiveTab] = useState<'all' | 'active' | 'coming_soon'>('all');
const [search, setSearch] = useState('');
const filtered = rulebooks.filter((rb) => {
const matchesTab =
activeTab === 'all' ? true : rb.status === activeTab;
const matchesSearch =
rb.title.toLowerCase().includes(search.toLowerCase()) ||
rb.description.toLowerCase().includes(search.toLowerCase()) ||
rb.keyStatute.toLowerCase().includes(search.toLowerCase());
return matchesTab && matchesSearch;
});
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-3xl w-full max-h-[85vh] flex flex-col shadow-2xl border border-[#E2E8F0] overflow-hidden">
{/* Header */}
<div className="p-6 border-b border-[#E2E8F0] flex justify-between items-center bg-[#F8FAFC]">
<div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#006c4a] text-[24px]">gavel</span>
<h2 className="font-headline font-bold text-[20px] text-[#0F172A]">
CaseLoop Statutory Templates Catalog
</h2>
</div>
<p className="text-[13px] text-[#64748B] mt-0.5">
Standard legal templates, auto-redaction protections, and filing pathways
</p>
</div>
<button
onClick={onClose}
className="w-8 h-8 rounded-full flex items-center justify-center text-[#64748B] hover:text-[#0F172A] hover:bg-[#E2E8F0] transition-colors cursor-pointer"
>
<span className="material-symbols-outlined text-[20px]">close</span>
</button>
</div>
{/* Filters */}
<div className="px-6 py-3 border-b border-[#E2E8F0] flex flex-col sm:flex-row gap-3 justify-between items-center bg-white">
<div className="flex gap-2 text-[12px]">
<button
onClick={() => setActiveTab('all')}
className={`px-3 py-1.5 rounded-lg font-medium transition-colors cursor-pointer ${
activeTab === 'all'
? 'bg-[#0F172A] text-white'
: 'bg-[#F1F5F9] text-[#475569] hover:bg-[#E2E8F0]'
}`}
>
All Templates ({rulebooks.length})
</button>
<button
onClick={() => setActiveTab('active')}
className={`px-3 py-1.5 rounded-lg font-medium transition-colors cursor-pointer ${
activeTab === 'active'
? 'bg-[#006c4a] text-white'
: 'bg-[#F1F5F9] text-[#475569] hover:bg-[#E2E8F0]'
}`}
>
Active ({rulebooks.filter((r) => r.status === 'active').length})
</button>
<button
onClick={() => setActiveTab('coming_soon')}
className={`px-3 py-1.5 rounded-lg font-medium transition-colors cursor-pointer ${
activeTab === 'coming_soon'
? 'bg-[#475569] text-white'
: 'bg-[#F1F5F9] text-[#475569] hover:bg-[#E2E8F0]'
}`}
>
In Development ({rulebooks.filter((r) => r.status === 'coming_soon').length})
</button>
</div>
<input
type="text"
placeholder="Search statutes, keywords..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="text-[13px] border border-[#CBD5E1] rounded-lg px-3 py-1.5 w-full sm:w-60 focus:border-[#0F172A] outline-none"
/>
</div>
{/* Templates List */}
<div className="p-6 overflow-y-auto flex flex-col gap-4 flex-grow">
{filtered.map((rb) => {
const isActive = rb.status === 'active';
return (
<div
key={rb.id}
className={`p-5 rounded-xl border transition-all ${
isActive
? 'border-[#CBD5E1] bg-white hover:border-[#0F172A] hover:shadow-sm'
: 'border-[#E2E8F0] bg-[#F8FAFC] opacity-80'
}`}
>
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 mb-2">
<div className="flex items-center gap-3">
<div
className={`w-10 h-10 rounded-lg flex items-center justify-center ${
isActive
? 'bg-[#0F172A]/5 text-[#0F172A]'
: 'bg-[#E2E8F0] text-[#94A3B8]'
}`}
>
<span className="material-symbols-outlined text-[22px]">{rb.icon}</span>
</div>
<div>
<h3 className="font-headline font-bold text-[16px] text-[#0F172A]">
{rb.title}
</h3>
<span className="text-[11px] text-[#64748B]">{rb.category}</span>
</div>
</div>
<span
className={`text-[11px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider ${
isActive
? 'bg-[#DCFCE7] text-[#166534]'
: 'bg-[#E2E8F0] text-[#475569]'
}`}
>
{rb.statusLabel}
</span>
</div>
<p className="text-[13.5px] text-[#475569] leading-relaxed mb-3">
{rb.description}
</p>
<div className="flex flex-wrap items-center justify-between gap-3 pt-3 border-t border-[#F1F5F9] text-[12px]">
<div className="text-[#64748B]">
<span className="font-semibold text-[#1E293B]">Key Statute:</span> {rb.keyStatute}
</div>
{isActive ? (
<button
onClick={() => {
onSelectRulebook(rb.id);
onClose();
}}
className="bg-[#0F172A] hover:bg-[#1E293B] text-white px-3.5 py-1.5 rounded-lg font-medium transition-colors flex items-center gap-1 cursor-pointer"
>
<span>Draft with this Template</span>
<span className="material-symbols-outlined text-[15px]">arrow_forward</span>
</button>
) : (
<span className="text-[#94A3B8] font-medium flex items-center gap-1">
<span className="material-symbols-outlined text-[14px]">lock</span>
Template in validation
</span>
)}
</div>
</div>
);
})}
</div>
</div>
</div>
);
};
|