34 lines
1.5 KiB
TypeScript
34 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
interface DonationPanelProps {
|
|
id: string;
|
|
}
|
|
|
|
const DonationPanel: React.FC<DonationPanelProps> = ({ id }) => {
|
|
return (
|
|
<Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
|
|
<CardHeader>
|
|
<CardTitle className="text-accent neon-glow">Support Wildlife</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<p className="text-foreground/80">Your donation helps protect and preserve the habitats of these amazing creatures.</p>
|
|
<div className="flex items-center justify-center p-4 bg-accent/10 rounded-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08 .402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<Input type="number" placeholder="Amount in USD" className="bg-black/50 border-accent/30 text-foreground" />
|
|
<Button className="w-full bg-accent text-accent-foreground hover:bg-accent/80">Donate Now</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default DonationPanel;
|