ProxMenux/web/components/rss-link.tsx

60 lines
2.1 KiB
TypeScript
Raw Normal View History

2025-05-27 17:33:28 +02:00
"use client"
import { Rss, Copy, Check } from "lucide-react"
2025-05-27 17:16:44 +02:00
import Link from "next/link"
2025-05-27 17:33:28 +02:00
import { useState } from "react"
2025-05-27 17:16:44 +02:00
export default function RSSLink() {
2025-05-27 17:33:28 +02:00
const [copied, setCopied] = useState(false)
2025-05-27 18:10:04 +02:00
const rssUrl = "https://macrimi.github.io/ProxMenux/rss.xml"
2025-05-27 17:33:28 +02:00
const copyToClipboard = async () => {
try {
await navigator.clipboard.writeText(rssUrl)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
} catch (err) {
console.error("Failed to copy: ", err)
}
}
2025-05-27 17:16:44 +02:00
return (
2025-05-27 17:33:28 +02:00
<div className="mb-8 p-4 bg-orange-50 border border-orange-200 rounded-lg">
2025-05-27 17:55:27 +02:00
<div className="space-y-3">
<div>
2025-05-27 17:33:28 +02:00
<h3 className="text-lg font-semibold text-orange-900 mb-1">Stay Updated!</h3>
2025-05-27 17:55:27 +02:00
<p className="text-orange-700 text-sm">Subscribe to our RSS feed to get notified of new changes.</p>
</div>
2025-05-27 17:33:28 +02:00
2025-05-27 17:55:27 +02:00
{/* RSS URL and buttons - Responsive layout */}
<div className="space-y-2">
<div className="flex items-center gap-2">
<code className="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs flex-1 min-w-0 truncate">
{rssUrl}
</code>
2025-05-27 17:33:28 +02:00
<button
onClick={copyToClipboard}
2025-05-27 17:55:27 +02:00
className="flex items-center gap-1 px-2 py-1 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors text-xs whitespace-nowrap"
2025-05-27 17:33:28 +02:00
title="Copy RSS URL"
>
{copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
2025-05-27 17:55:27 +02:00
<span className="hidden sm:inline">{copied ? "Copied!" : "Copy"}</span>
2025-05-27 17:33:28 +02:00
</button>
</div>
2025-05-27 17:55:27 +02:00
<Link
2025-05-27 18:10:04 +02:00
href={rssUrl}
2025-05-27 17:55:27 +02:00
className="inline-flex items-center justify-center space-x-2 px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors w-full sm:w-auto"
target="_blank"
rel="noopener noreferrer"
title="Open RSS Feed"
>
<Rss className="h-4 w-4" />
<span>Open RSS Feed</span>
</Link>
</div>
2025-05-27 17:16:44 +02:00
</div>
</div>
)
}