52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { Badge } from '@/components/ui/badge';
|
||
|
|
import { CheckCircle2, ThumbsUp } from 'lucide-react';
|
||
|
|
|
||
|
|
interface Project {
|
||
|
|
id: string;
|
||
|
|
title: string;
|
||
|
|
category?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface AudienceVoteCardProps {
|
||
|
|
project: Project;
|
||
|
|
onVote: () => void;
|
||
|
|
hasVoted: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function AudienceVoteCard({ project, onVote, hasVoted }: AudienceVoteCardProps) {
|
||
|
|
return (
|
||
|
|
<Card className="mx-auto max-w-2xl">
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle className="text-2xl sm:text-3xl">{project.title}</CardTitle>
|
||
|
|
{project.category && (
|
||
|
|
<CardDescription className="mt-2">
|
||
|
|
<Badge className="text-sm">{project.category}</Badge>
|
||
|
|
</CardDescription>
|
||
|
|
)}
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-6">
|
||
|
|
{hasVoted ? (
|
||
|
|
<div className="flex flex-col items-center justify-center py-8">
|
||
|
|
<CheckCircle2 className="mb-4 h-16 w-16 text-green-600" />
|
||
|
|
<p className="text-xl font-medium">Thank You for Voting!</p>
|
||
|
|
<p className="mt-2 text-sm text-muted-foreground">Your vote has been recorded</p>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<Button
|
||
|
|
onClick={onVote}
|
||
|
|
size="lg"
|
||
|
|
className="w-full bg-[#de0f1e] py-8 text-lg font-semibold hover:bg-[#de0f1e]/90 sm:text-xl"
|
||
|
|
>
|
||
|
|
<ThumbsUp className="mr-3 h-6 w-6" />
|
||
|
|
Vote for This Project
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
}
|