Initial commit from gitea_uploader script
This commit is contained in:
bizzle
+184
-36
@@ -1,36 +1,184 @@
|
||||
import React from 'react';
|
||||
import LiveStream from '@/app/components/LiveStream';
|
||||
import DonationPanel from '@/app/components/DonationPanel';
|
||||
import OwlInfo from '@/app/components/OwlInfo';
|
||||
|
||||
export default function LivestreamPage({ params }: { params: { id: string } }) {
|
||||
// In a real app, you'd fetch the livestream data based on the ID
|
||||
const streamData = {
|
||||
id: params.id,
|
||||
name: `Livestream ${params.id}`,
|
||||
location: "Florida",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<header className="bg-black/50 backdrop-blur-sm">
|
||||
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
<h1 className="text-4xl font-bold neon-glow text-accent">{streamData.name}</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
<div className="px-4 py-6 sm:px-0">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2">
|
||||
<LiveStream id={streamData.id} />
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<DonationPanel id={streamData.id} />
|
||||
<OwlInfo id={streamData.id} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import LiveStream from '@/app/components/LiveStream';
|
||||
import DonationPanel from '@/app/components/DonationPanel';
|
||||
import OwlInfo from '@/app/components/OwlInfo';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
|
||||
// This would come from an API or database in a real app
|
||||
const livestreamsData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Cape Coral Burrowing Owl",
|
||||
location: "Cape Coral, FL",
|
||||
status: "Live",
|
||||
viewers: 128,
|
||||
description: "Watch these unique ground-dwelling owls at their burrows in Cape Coral. These protected birds are the official city bird of Cape Coral!"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sanibel Island Osprey",
|
||||
location: "Sanibel Island, FL",
|
||||
status: "Live",
|
||||
viewers: 86,
|
||||
description: "Observe ospreys building nests and hunting for fish around Sanibel Island."
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Everglades Alligator",
|
||||
location: "Everglades National Park, FL",
|
||||
status: "Offline",
|
||||
viewers: 0,
|
||||
description: "Temporarily offline. Usually shows alligators in their natural habitat in the Everglades."
|
||||
},
|
||||
];
|
||||
|
||||
export default function LivestreamPage({ params }: { params: { id: string } }) {
|
||||
// Find the stream data based on the ID
|
||||
const streamData = livestreamsData.find(stream => stream.id === params.id) || {
|
||||
id: params.id,
|
||||
name: `Wildlife Livestream ${params.id}`,
|
||||
location: "Florida",
|
||||
status: "Live",
|
||||
viewers: Math.floor(Math.random() * 100) + 50,
|
||||
description: "Experience the natural beauty of Florida's wildlife."
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<header className="bg-ccfw-beige/90 backdrop-blur-sm sticky top-0 z-10 border-b border-ccfw-teal/20">
|
||||
<div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
|
||||
<div>
|
||||
<Button variant="ghost" className="text-ccfw-teal mb-2" asChild>
|
||||
<Link href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-1 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Back to all streams
|
||||
</Link>
|
||||
</Button>
|
||||
<h1 className="text-3xl font-bold text-ccfw-teal">{streamData.name}</h1>
|
||||
<p className="text-ccfw-maroon text-sm mt-1">{streamData.location}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`h-3 w-3 rounded-full ${streamData.status === 'Live' ? 'bg-ccfw-coral animate-pulse' : 'bg-gray-500'}`}></div>
|
||||
<span className="text-sm font-medium text-ccfw-maroon font-semibold">{streamData.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
<div className="px-4 py-6 sm:px-0">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2">
|
||||
<LiveStream id={streamData.id} />
|
||||
|
||||
<div className="mt-6">
|
||||
<Card className="border-ccfw-teal/30 bg-gradient-to-b from-ccfw-beige/20 to-ccfw-beige/5 backdrop-blur-sm">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="bg-ccfw-teal/10 p-3 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-ccfw-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-ccfw-teal mb-2">About this livestream</h3>
|
||||
<p className="text-sm text-ccfw-maroon font-medium">
|
||||
This livestream is provided by Cape Coral Friends of Wildlife, a volunteer organization dedicated to the protection and preservation of local wildlife. These cameras help researchers monitor wildlife behavior while allowing the public to connect with nature.
|
||||
</p>
|
||||
<p className="text-sm mt-2">
|
||||
<a
|
||||
href={`https://ccfriendsofwildlife.org/burrowing-owls/`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-ccfw-teal hover:text-ccfw-coral transition-colors underline"
|
||||
>
|
||||
Learn more about our conservation efforts
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<DonationPanel id={streamData.id} />
|
||||
<OwlInfo id={streamData.id} />
|
||||
|
||||
<Card className="border-ccfw-teal/30 bg-gradient-to-b from-ccfw-beige/20 to-ccfw-beige/5 backdrop-blur-sm overflow-hidden">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="text-lg font-medium text-ccfw-teal mb-4">Get Involved</h3>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-center gap-3">
|
||||
<div className="bg-ccfw-gold/20 p-2 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-ccfw-gold" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<a
|
||||
href="https://ccfriendsofwildlife.org/volunteer/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-ccfw-maroon font-medium hover:text-ccfw-teal transition-colors"
|
||||
>
|
||||
Volunteer with CCFW
|
||||
</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<div className="bg-ccfw-teal/20 p-2 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-ccfw-teal" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<a
|
||||
href="https://ccfriendsofwildlife.org/events-and-programs/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-ccfw-maroon font-medium hover:text-ccfw-teal transition-colors"
|
||||
>
|
||||
Attend an Event
|
||||
</a>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<div className="bg-ccfw-coral/20 p-2 rounded-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-ccfw-coral" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<a
|
||||
href="mailto:info@ccfriendsofwildlife.org"
|
||||
className="text-sm text-ccfw-maroon font-medium hover:text-ccfw-teal transition-colors"
|
||||
>
|
||||
Contact CCFW
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className="bg-ccfw-beige/90 text-ccfw-maroon py-8 mt-12">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<p className="text-sm">
|
||||
© {new Date().getFullYear()} Cape Coral Friends of Wildlife. All rights reserved.
|
||||
</p>
|
||||
<p className="text-sm mt-2">
|
||||
<a
|
||||
href="https://ccfriendsofwildlife.org/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-ccfw-teal transition-colors"
|
||||
>
|
||||
Visit our main website
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user