 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.ca/private_html/src/pages/ |
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { NextPage } from 'next';
import { motion } from 'framer-motion';
import { Search, TrendingUp, Clock, Star, Users, Gavel, FileText, Building2 } from 'lucide-react';
import LayoutWithSidebar from '@/components/LayoutWithSidebar';
import AdvancedSearch from '@/components/AdvancedSearch';
interface SearchResult {
id: string;
type: 'user' | 'case' | 'document' | 'business';
displayName: string;
displayDescription: string;
url: string;
relevance: number;
createdAt: string;
isVerified?: boolean;
averageRating?: number;
totalCases?: number;
wonCases?: number;
location?: string;
legalArea?: string;
jurisdiction?: string;
urgencyLevel?: string;
_count?: {
followers?: number;
supporters?: number;
reviews?: number;
offers?: number;
comments?: number;
};
}
const SearchPage: NextPage = () => {
const router = useRouter();
const { q } = router.query;
const [recentSearches, setRecentSearches] = useState<string[]>([]);
const [popularSearches, setPopularSearches] = useState<string[]>([]);
const [trendingTopics, setTrendingTopics] = useState<Array<{
term: string;
count: number;
trend: 'up' | 'down' | 'stable';
}>>([]);
useEffect(() => {
// Load recent searches from localStorage
const saved = localStorage.getItem('recentSearches');
if (saved) {
setRecentSearches(JSON.parse(saved));
}
// Mock popular searches and trending topics
setPopularSearches([
'criminal defense',
'immigration lawyer',
'family law',
'real estate',
'corporate law',
'human rights',
'tax attorney',
'personal injury'
]);
setTrendingTopics([
{ term: 'immigration reform', count: 1247, trend: 'up' },
{ term: 'criminal justice', count: 892, trend: 'up' },
{ term: 'family mediation', count: 654, trend: 'stable' },
{ term: 'corporate compliance', count: 543, trend: 'down' },
{ term: 'human rights cases', count: 432, trend: 'up' }
]);
}, []);
const handleSearch = (query: string) => {
if (query.trim()) {
// Save to recent searches
const updated = [query, ...recentSearches.filter(s => s !== query)].slice(0, 10);
setRecentSearches(updated);
localStorage.setItem('recentSearches', JSON.stringify(updated));
}
};
const handleResultClick = (result: SearchResult) => {
router.push(result.url);
};
const getTrendIcon = (trend: string) => {
switch (trend) {
case 'up': return <TrendingUp className="h-4 w-4 text-green-500" />;
case 'down': return <TrendingUp className="h-4 w-4 text-red-500 rotate-180" />;
default: return <Clock className="h-4 w-4 text-gray-500" />;
}
};
const getTrendColor = (trend: string) => {
switch (trend) {
case 'up': return 'text-green-600';
case 'down': return 'text-red-600';
default: return 'text-gray-600';
}
};
return (
<LayoutWithSidebar>
<div className="min-h-screen bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Header */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="text-center mb-8"
>
<h1 className="text-4xl font-bold text-gray-900 mb-4">
Advanced Search
</h1>
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
Find legal professionals, cases, documents, and businesses across the platform
</p>
</motion.div>
{/* Search Component */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
className="mb-12"
>
<AdvancedSearch
initialQuery={q as string || ''}
onResultClick={handleResultClick}
className="max-w-4xl mx-auto"
/>
</motion.div>
{/* Search Suggestions and Trends */}
{!q && (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{/* Recent Searches */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.2 }}
className="bg-white rounded-lg shadow-sm border border-gray-200 p-6"
>
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<Clock className="h-5 w-5 mr-2 text-gray-500" />
Recent Searches
</h3>
{recentSearches.length > 0 ? (
<div className="space-y-2">
{recentSearches.map((search, index) => (
<button
key={index}
onClick={() => router.push(`/search?q=${encodeURIComponent(search)}`)}
className="w-full text-left px-3 py-2 rounded-md hover:bg-gray-50 text-gray-700 hover:text-gray-900 transition-colors"
>
{search}
</button>
))}
</div>
) : (
<p className="text-gray-500 text-sm">No recent searches</p>
)}
</motion.div>
{/* Popular Searches */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
className="bg-white rounded-lg shadow-sm border border-gray-200 p-6"
>
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<Star className="h-5 w-5 mr-2 text-gray-500" />
Popular Searches
</h3>
<div className="space-y-2">
{popularSearches.map((search, index) => (
<button
key={index}
onClick={() => router.push(`/search?q=${encodeURIComponent(search)}`)}
className="w-full text-left px-3 py-2 rounded-md hover:bg-gray-50 text-gray-700 hover:text-gray-900 transition-colors"
>
{search}
</button>
))}
</div>
</motion.div>
{/* Trending Topics */}
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }}
className="bg-white rounded-lg shadow-sm border border-gray-200 p-6"
>
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
<TrendingUp className="h-5 w-5 mr-2 text-gray-500" />
Trending Topics
</h3>
<div className="space-y-3">
{trendingTopics.map((topic, index) => (
<button
key={index}
onClick={() => router.push(`/search?q=${encodeURIComponent(topic.term)}`)}
className="w-full text-left p-3 rounded-md hover:bg-gray-50 transition-colors"
>
<div className="flex items-center justify-between">
<span className="text-gray-700 hover:text-gray-900 font-medium">
{topic.term}
</span>
<div className="flex items-center space-x-2">
<span className={`text-sm ${getTrendColor(topic.trend)}`}>
{topic.count}
</span>
{getTrendIcon(topic.trend)}
</div>
</div>
</button>
))}
</div>
</motion.div>
</div>
)}
{/* Search Categories */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
className="mt-12 max-w-4xl mx-auto"
>
<h3 className="text-xl font-semibold text-gray-900 mb-6 text-center">
Browse by Category
</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{[
{ icon: Users, label: 'Legal Professionals', query: 'type:users', color: 'bg-blue-100 text-blue-800' },
{ icon: Gavel, label: 'Cases', query: 'type:cases', color: 'bg-green-100 text-green-800' },
{ icon: FileText, label: 'Documents', query: 'type:documents', color: 'bg-purple-100 text-purple-800' },
{ icon: Building2, label: 'Businesses', query: 'type:businesses', color: 'bg-orange-100 text-orange-800' }
].map((category, index) => (
<button
key={index}
onClick={() => router.push(`/search?q=${category.query}`)}
className={`p-6 rounded-lg border border-gray-200 hover:shadow-md transition-all ${category.color} hover:scale-105`}
>
<category.icon className="h-8 w-8 mx-auto mb-3" />
<div className="text-center font-medium">{category.label}</div>
</button>
))}
</div>
</motion.div>
{/* Legal Areas */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6 }}
className="mt-12 max-w-4xl mx-auto"
>
<h3 className="text-xl font-semibold text-gray-900 mb-6 text-center">
Popular Legal Areas
</h3>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
{[
'Criminal Law',
'Family Law',
'Immigration',
'Corporate Law',
'Real Estate',
'Human Rights',
'Tax Law',
'Personal Injury'
].map((area, index) => (
<button
key={index}
onClick={() => router.push(`/search?q=${encodeURIComponent(area)}&category=${area.toLowerCase().replace(' ', '_')}`)}
className="px-4 py-3 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 hover:border-gray-300 transition-colors text-gray-700 hover:text-gray-900"
>
{area}
</button>
))}
</div>
</motion.div>
</div>
</div>
</LayoutWithSidebar>
);
};
export default SearchPage;