feat: initial project setup with frontend mockup
- Docker Compose setup with nginx reverse proxy and frontend service - React + Vite + Tailwind CSS configuration - Complete mockup of all application views: - Authentication (login/register) - Events list and selection - Event chat with matchmaking - 1:1 private chat with WebRTC P2P video transfer mockup - Partner rating system - Collaboration history - Mock data for users, events, messages, matches, and ratings - All UI text and messages in English - Project documentation (CONTEXT.md, TODO.md, README.md, QUICKSTART.md)
This commit is contained in:
Radosław Gierwiało
129
frontend/src/pages/HistoryPage.jsx
Normal file
129
frontend/src/pages/HistoryPage.jsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import Layout from '../components/layout/Layout';
|
||||
import { mockMatches, mockRatings } from '../mocks/matches';
|
||||
import { Calendar, MapPin, Star, MessageCircle } from 'lucide-react';
|
||||
|
||||
const HistoryPage = () => {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">Collaboration history</h1>
|
||||
<p className="text-gray-600 mb-8">Your previous matches and ratings</p>
|
||||
|
||||
{/* Matches Section */}
|
||||
<div className="mb-12">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">Your matches</h2>
|
||||
<div className="space-y-4">
|
||||
{mockMatches.map((match) => (
|
||||
<div
|
||||
key={match.id}
|
||||
className="bg-white rounded-lg shadow-md p-6 border border-gray-200"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start space-x-4">
|
||||
<img
|
||||
src={match.user2_avatar}
|
||||
alt={match.user2_name}
|
||||
className="w-16 h-16 rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-gray-900">{match.user2_name}</h3>
|
||||
<div className="flex items-center space-x-4 mt-2 text-sm text-gray-600">
|
||||
<div className="flex items-center">
|
||||
<MapPin className="w-4 h-4 mr-1" />
|
||||
{match.event_name}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Calendar className="w-4 h-4 mr-1" />
|
||||
{new Date(match.created_at).toLocaleDateString('pl-PL')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-sm font-medium ${
|
||||
match.status === 'completed'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-blue-100 text-blue-800'
|
||||
}`}
|
||||
>
|
||||
{match.status === 'completed' ? 'Completed' : 'Active'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ratings Section */}
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-4">Received ratings</h2>
|
||||
<div className="space-y-4">
|
||||
{mockRatings.filter(r => r.rated_id === 1).map((rating) => (
|
||||
<div
|
||||
key={rating.id}
|
||||
className="bg-white rounded-lg shadow-md p-6 border border-gray-200"
|
||||
>
|
||||
<div className="flex items-start space-x-4 mb-4">
|
||||
<img
|
||||
src={rating.rated_avatar}
|
||||
alt={rating.rated_name}
|
||||
className="w-12 h-12 rounded-full"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="font-bold text-gray-900">{rating.rated_name}</h3>
|
||||
<div className="flex items-center space-x-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`w-4 h-4 ${
|
||||
i < rating.score
|
||||
? 'fill-yellow-400 text-yellow-400'
|
||||
: 'text-gray-300'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-2">{rating.comment}</p>
|
||||
<div className="flex items-center space-x-4 text-xs text-gray-500">
|
||||
<span>{new Date(rating.created_at).toLocaleDateString('en-US')}</span>
|
||||
{rating.would_collaborate_again && (
|
||||
<span className="text-green-600 font-medium">
|
||||
✓ Would collaborate again
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Card */}
|
||||
<div className="mt-8 bg-gradient-to-br from-primary-500 to-primary-700 rounded-lg shadow-md p-6 text-white">
|
||||
<h3 className="text-xl font-bold mb-4">Your statistics</h3>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold">{mockMatches.length}</div>
|
||||
<div className="text-sm text-primary-100">Collaborations</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold">4.8</div>
|
||||
<div className="text-sm text-primary-100">Average rating</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold">100%</div>
|
||||
<div className="text-sm text-primary-100">Would collaborate again</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default HistoryPage;
|
||||
Reference in New Issue
Block a user