Initial commit

2024-10-26 20:00:25 -04:00
commit 8177684254
41 changed files with 8358 additions and 0 deletions
@@ -0,0 +1,33 @@
+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;
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface LiveStreamProps {
+  id: string;
+}
+
+const LiveStream: React.FC<LiveStreamProps> = ({ id }) => {
+  return (
+    <Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
+      <CardHeader>
+        <CardTitle className="text-accent neon-glow">Live Cam {id}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="bg-black aspect-video flex items-center justify-center rounded-md border border-accent/30">
+          <p className="text-accent">Livestream {id} placeholder</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default LiveStream;
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface OwlInfoProps {
+  id: string;
+}
+
+const OwlInfo: React.FC<OwlInfoProps> = ({ id }) => {
+  return (
+    <Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
+      <CardHeader>
+        <CardTitle className="text-accent neon-glow">About This Livestream</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-foreground/80">
+          This livestream (ID: {id}) showcases the natural habitat and behavior of wildlife in Florida. 
+          By observing these animals in their natural environment, we can learn more about their needs and how to protect them.
+        </p>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default OwlInfo;