185 lines
9.3 KiB
TypeScript
185 lines
9.3 KiB
TypeScript
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>
|
|
);
|
|
}
|