inhale/indexer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance Indexer page with sorting functionality and size/age parsing; update News and Settings pages for improved layout and responsiveness; implement subscription tiers and donation options on Upgrade page.

Browse Source
This commit is contained in:
inhale-dir
2025-05-24 21:54:21 +02:00
parent 1eb9ca54f9
commit 3cd85be0dd
4 changed files with 528 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/news/page.tsx
+5 -5
View File
@@ -62,9 +62,9 @@ export default function NewsPage() {
// }; // };
return ( return (
<div className="container mx-auto p-4 py-8 md:py-12 space-y-8"> <div className="container mx-auto p-4 py-8 md:py-12 lg:py-16 xl:max-w-7xl space-y-8 lg:space-y-10">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6 lg:mb-8">
<h1 className="text-3xl font-bold tracking-tight">Site News & Announcements</h1> <h1 className="text-3xl lg:text-4xl font-bold tracking-tight">Site News & Announcements</h1>
<div className="space-x-2"> <div className="space-x-2">
<Link href="/upgrade" passHref> <Link href="/upgrade" passHref>
<Button variant="ghost">Upgrade</Button> <Button variant="ghost">Upgrade</Button>
@@ -78,11 +78,11 @@ export default function NewsPage() {
</div> </div>
</div> </div>
<div className="space-y-6"> <div className="space-y-6 lg:space-y-8">
{mockNewsData.map((article) => ( {mockNewsData.map((article) => (
<Card key={article.id} className="shadow-md hover:shadow-lg transition-shadow duration-200"> <Card key={article.id} className="shadow-md hover:shadow-lg transition-shadow duration-200">
<CardHeader> <CardHeader>
<CardTitle>{article.title}</CardTitle> <CardTitle className="text-xl lg:text-2xl">{article.title}</CardTitle>
<CardDescription> <CardDescription>
Posted by {article.author} on {article.date} Posted by {article.author} on {article.date}
</CardDescription> </CardDescription>
app/page.tsx
+120 -47
View File
@@ -29,7 +29,8 @@ import {
} from "@/components/ui/carousel"; } from "@/components/ui/carousel";
import Autoplay from "embla-carousel-autoplay"; import Autoplay from "embla-carousel-autoplay";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import React, { useState, useRef } from "react"; import React, { useState, useRef, useMemo } from "react";
import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
// Mock data structure // Mock data structure
interface NzbItem { interface NzbItem {
@@ -63,9 +64,45 @@ const PlaceholderCarouselImage = ({ text }: { text: string }) => (
</div> </div>
); );
// Helper function to parse size string (e.g., "1.2 GB") to bytes
const parseSizeToBytes = (sizeStr: string): number => {
const parts = sizeStr.toLowerCase().split(" ");
if (parts.length !== 2) return 0;
const value = parseFloat(parts[0]);
const unit = parts[1];
if (isNaN(value)) return 0;
if (unit.startsWith("kb")) return value * 1024;
if (unit.startsWith("mb")) return value * 1024 * 1024;
if (unit.startsWith("gb")) return value * 1024 * 1024 * 1024;
if (unit.startsWith("tb")) return value * 1024 * 1024 * 1024 * 1024;
return value; // Assuming bytes if no unit or unknown unit
};
// Helper function to parse age string (e.g., "3 days", "5 hours") to a consistent unit (e.g., minutes)
const parseAgeToMinutes = (ageStr: string): number => {
const parts = ageStr.toLowerCase().split(" ");
if (parts.length !== 2) return 0;
const value = parseInt(parts[0]);
const unit = parts[1];
if (isNaN(value)) return 0;
if (unit.startsWith("minute")) return value;
if (unit.startsWith("hour")) return value * 60;
if (unit.startsWith("day")) return value * 60 * 24;
if (unit.startsWith("week")) return value * 60 * 24 * 7;
if (unit.startsWith("month")) return value * 60 * 24 * 30; // Approximate
if (unit.startsWith("year")) return value * 60 * 24 * 365; // Approximate
return 0;
};
export default function IndexerPage() { export default function IndexerPage() {
const categories = ["All", "Movies", "Series", "Anime", "Music"]; const categories = ["All", "Movies", "Series", "Anime", "Music"];
const [selectedItem, setSelectedItem] = useState<NzbItem | null>(null); const [selectedItem, setSelectedItem] = useState<NzbItem | null>(null);
const [activeTab, setActiveTab] = useState<string>("All");
const [sortColumn, setSortColumn] = useState<keyof NzbItem | null>(null);
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
// Autoplay plugin ref // Autoplay plugin ref
const autoplayPlugin = useRef( const autoplayPlugin = useRef(
@@ -151,10 +188,45 @@ export default function IndexerPage() {
}, },
]; ];
// Filter data based on category (simple filter for now) const handleSort = (column: keyof NzbItem) => {
const getFilteredData = (category: string) => { if (sortColumn === column) {
if (category === "All") return mockNzbData; setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
return mockNzbData.filter((item) => item.category === category); } else {
setSortColumn(column);
setSortDirection('asc');
}
};
const sortedData = useMemo(() => {
let dataToFilter = activeTab === "All" ? mockNzbData : mockNzbData.filter(item => item.category === activeTab);
if (!sortColumn) return dataToFilter;
const currentSortColumn = sortColumn as keyof NzbItem;
return [...dataToFilter].sort((a, b) => {
const aVal = a[currentSortColumn];
const bVal = b[currentSortColumn];
let comparison = 0;
if (currentSortColumn === 'size') {
comparison = parseSizeToBytes(aVal as string) - parseSizeToBytes(bVal as string);
} else if (currentSortColumn === 'age') {
comparison = parseAgeToMinutes(aVal as string) - parseAgeToMinutes(bVal as string);
} else if (typeof aVal === 'number' && typeof bVal === 'number') {
comparison = aVal - bVal;
} else if (typeof aVal === 'string' && typeof bVal === 'string') {
comparison = aVal.localeCompare(bVal);
}
return sortDirection === 'asc' ? comparison : -comparison;
});
}, [mockNzbData, activeTab, sortColumn, sortDirection]);
const getSortIcon = (column: keyof NzbItem) => {
if (sortColumn !== column) return <ArrowUpDown className="ml-2 h-4 w-4" />;
if (sortDirection === 'asc') return <ArrowUp className="ml-2 h-4 w-4 text-primary" />;
return <ArrowDown className="ml-2 h-4 w-4 text-primary" />;
}; };
return ( return (
@@ -212,7 +284,7 @@ export default function IndexerPage() {
</Carousel> </Carousel>
</div> </div>
<Tabs defaultValue="All" className="w-full"> <Tabs defaultValue="All" className="w-full" onValueChange={setActiveTab}>
<TabsList className="mb-4"> <TabsList className="mb-4">
{categories.map((category) => ( {categories.map((category) => (
<TabsTrigger key={category} value={category}> <TabsTrigger key={category} value={category}>
@@ -221,48 +293,49 @@ export default function IndexerPage() {
))} ))}
</TabsList> </TabsList>
{categories.map((category) => ( <Table>
<TabsContent key={category} value={category}> <TableCaption>
<div className="flex w-full max-w-sm items-center space-x-2 mb-4"> {activeTab === "All"
<Input type="text" placeholder={`Search in ${category}...`} /> ? "A list of all NZBs."
<Button type="submit">Search</Button> : `Results for ${activeTab}.`}
</div> {sortColumn && ` Sorted by ${sortColumn} (${sortDirection === 'asc' ? 'ascending' : 'descending'}).`}
<Table> </TableCaption>
<TableCaption> <TableHeader>
{category === "All" <TableRow>
? "A list of NZBs." <TableHead className="w-[35%] cursor-pointer hover:bg-muted/50 transition-colors" onClick={() => handleSort('name')}>
: `Results for ${category}.`} <div className="flex items-center">Name {getSortIcon('name')}</div>
</TableCaption> </TableHead>
<TableHeader> <TableHead className="cursor-pointer hover:bg-muted/50 transition-colors" onClick={() => handleSort('size')}>
<TableRow> <div className="flex items-center">Size {getSortIcon('size')}</div>
<TableHead className="w-[35%]">Name</TableHead> </TableHead>
<TableHead>Size</TableHead> <TableHead className="cursor-pointer hover:bg-muted/50 transition-colors" onClick={() => handleSort('age')}>
<TableHead>Age</TableHead> <div className="flex items-center">Age {getSortIcon('age')}</div>
<TableHead>Downloads</TableHead> </TableHead>
<TableHead className="text-right">Actions</TableHead> <TableHead className="cursor-pointer hover:bg-muted/50 transition-colors" onClick={() => handleSort('downloads')}>
<div className="flex items-center">Downloads {getSortIcon('downloads')}</div>
</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{sortedData.map((item) => (
<TableRow key={item.id}>
<TableCell className="font-medium">{item.name}</TableCell>
<TableCell>{item.size}</TableCell>
<TableCell>{item.age}</TableCell>
<TableCell>{item.downloads.toLocaleString()}</TableCell>
<TableCell className="text-right space-x-2">
<Button variant="ghost" size="sm" onClick={() => setSelectedItem(item)}>
Info
</Button>
<Button variant="outline" size="sm">
Download
</Button>
</TableCell>
</TableRow> </TableRow>
</TableHeader> ))}
<TableBody> </TableBody>
{getFilteredData(category).map((item) => ( </Table>
<TableRow key={item.id}>
<TableCell className="font-medium">{item.name}</TableCell>
<TableCell>{item.size}</TableCell>
<TableCell>{item.age}</TableCell>
<TableCell>{item.downloads.toLocaleString()}</TableCell>
<TableCell className="text-right space-x-2">
<Button variant="ghost" size="sm" onClick={() => setSelectedItem(item)}>
Info
</Button>
<Button variant="outline" size="sm">
Download
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TabsContent>
))}
</Tabs> </Tabs>
{/* Dialog for NZB Info - controlled by selectedItem state */} {/* Dialog for NZB Info - controlled by selectedItem state */}
app/settings/page.tsx
+111 -105
View File
@@ -26,9 +26,9 @@ export default function SettingsPage() {
const manualDownloadsPercentage = (userStats.manualDownloadsToday / userStats.manualDownloadLimitDaily) * 100; const manualDownloadsPercentage = (userStats.manualDownloadsToday / userStats.manualDownloadLimitDaily) * 100;
return ( return (
<div className="container mx-auto p-4 py-8 md:py-12 space-y-8"> <div className="container mx-auto p-4 py-8 md:py-12 lg:py-16 xl:max-w-7xl space-y-8 lg:space-y-10">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6 lg:mb-8">
<h1 className="text-3xl font-bold">User Settings</h1> <h1 className="text-3xl lg:text-4xl font-bold">User Settings</h1>
<div className="space-x-2"> <div className="space-x-2">
<Link href="/news" passHref> <Link href="/news" passHref>
<Button variant="ghost">News</Button> <Button variant="ghost">News</Button>
@@ -42,111 +42,117 @@ export default function SettingsPage() {
</div> </div>
</div> </div>
{/* User Statistics Card */} <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10">
<Card> <div className="lg:col-span-2 space-y-8 lg:space-y-10">
<CardHeader> {/* User Statistics Card */}
<CardTitle>Your Statistics</CardTitle> <Card className="shadow-sm">
<CardDescription>Overview of your account activity and limits.</CardDescription> <CardHeader>
</CardHeader> <CardTitle className="text-xl lg:text-2xl">Your Statistics</CardTitle>
<CardContent className="space-y-6"> <CardDescription>Overview of your account activity and limits.</CardDescription>
<div className="flex justify-between items-center"> </CardHeader>
<span className="text-sm font-medium">Current Rank:</span> <CardContent className="space-y-6">
<span className="text-sm text-primary font-semibold">{userStats.rank}</span> <div className="flex justify-between items-center">
</div> <span className="text-sm font-medium">Current Rank:</span>
<div className="space-y-1"> <span className="text-sm text-primary font-semibold">{userStats.rank}</span>
<div className="flex justify-between items-center mb-1"> </div>
<span className="text-sm font-medium">Daily API Usage:</span> <div className="space-y-1">
<span className="text-sm text-muted-foreground"> <div className="flex justify-between items-center mb-1">
{userStats.apiHitsToday.toLocaleString()} / {userStats.apiLimitDaily.toLocaleString()} hits <span className="text-sm font-medium">Daily API Usage:</span>
</span> <span className="text-sm text-muted-foreground">
</div> {userStats.apiHitsToday.toLocaleString()} / {userStats.apiLimitDaily.toLocaleString()} hits
<Progress value={apiUsagePercentage} className="w-full" /> </span>
</div> </div>
<div className="space-y-1"> <Progress value={apiUsagePercentage} className="w-full" />
<div className="flex justify-between items-center mb-1"> </div>
<span className="text-sm font-medium">Daily Manual Downloads:</span> <div className="space-y-1">
<span className="text-sm text-muted-foreground"> <div className="flex justify-between items-center mb-1">
{userStats.manualDownloadsToday.toLocaleString()} / {userStats.manualDownloadLimitDaily.toLocaleString()} files <span className="text-sm font-medium">Daily Manual Downloads:</span>
</span> <span className="text-sm text-muted-foreground">
</div> {userStats.manualDownloadsToday.toLocaleString()} / {userStats.manualDownloadLimitDaily.toLocaleString()} files
<Progress value={manualDownloadsPercentage} className="w-full" /> </span>
</div> </div>
<div className="flex justify-between items-center"> <Progress value={manualDownloadsPercentage} className="w-full" />
<span className="text-sm font-medium">Total Releases Grabbed (All Time):</span> </div>
<span className="text-sm font-semibold">{userStats.filesDownloaded.toLocaleString()}</span> <div className="flex justify-between items-center">
</div> <span className="text-sm font-medium">Total Releases Grabbed (All Time):</span>
</CardContent> <span className="text-sm font-semibold">{userStats.filesDownloaded.toLocaleString()}</span>
<CardFooter> </div>
<Link href="/upgrade" passHref className="w-full"> </CardContent>
<Button className="w-full">Upgrade Your Tier</Button> <CardFooter>
</Link> <Link href="/upgrade" passHref className="w-full">
</CardFooter> <Button className="w-full">Upgrade Your Tier</Button>
</Card> </Link>
</CardFooter>
</Card>
<Card> <Card className="shadow-sm">
<CardHeader> <CardHeader>
<CardTitle>Account Information</CardTitle> <CardTitle className="text-xl lg:text-2xl">Account Information</CardTitle>
<CardDescription>Manage your account details.</CardDescription> <CardDescription>Manage your account details.</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="space-y-1"> <div className="space-y-1">
<label htmlFor="username" className="text-sm font-medium"> <label htmlFor="username" className="text-sm font-medium">
Username Username
</label> </label>
<Input id="username" defaultValue="CurrentUser" disabled /> <Input id="username" defaultValue="CurrentUser" disabled />
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<label htmlFor="email" className="text-sm font-medium"> <label htmlFor="email" className="text-sm font-medium">
Email Email
</label> </label>
<Input id="email" type="email" defaultValue="user@example.com" disabled /> <Input id="email" type="email" defaultValue="user@example.com" disabled />
</div> </div>
</CardContent> </CardContent>
<CardFooter> <CardFooter>
<Button disabled>Update Account (Not Implemented)</Button> <Button disabled>Update Account (Not Implemented)</Button>
</CardFooter> </CardFooter>
</Card> </Card>
<Card> <Card className="shadow-sm">
<CardHeader> <CardHeader>
<CardTitle>API Key</CardTitle> <CardTitle className="text-xl lg:text-2xl">API Key</CardTitle>
<CardDescription> <CardDescription>
Manage your API key for external applications. Manage your API key for external applications.
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="space-y-1"> <div className="space-y-1">
<label htmlFor="apiKey" className="text-sm font-medium"> <label htmlFor="apiKey" className="text-sm font-medium">
Your API Key Your API Key
</label> </label>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Input <Input
id="apiKey" id="apiKey"
defaultValue="dummy-api-key-12345abcdef" defaultValue="dummy-api-key-12345abcdef"
readOnly readOnly
/> />
<Button variant="outline" disabled>Copy (Not Implemented)</Button> <Button variant="outline" disabled>Copy (Not Implemented)</Button>
</div> </div>
</div> </div>
</CardContent> </CardContent>
<CardFooter> <CardFooter>
<Button variant="secondary" disabled>Regenerate API Key (Not Implemented)</Button> <Button variant="secondary" disabled>Regenerate API Key (Not Implemented)</Button>
</CardFooter> </CardFooter>
</Card> </Card>
</div>
<Card className="border-destructive"> <div className="lg:col-span-1 space-y-8 lg:space-y-10">
<CardHeader> <Card className="border-destructive shadow-sm">
<CardTitle className="text-destructive">Danger Zone</CardTitle> <CardHeader>
<CardDescription> <CardTitle className="text-xl lg:text-2xl text-destructive">Danger Zone</CardTitle>
Permanent actions that cannot be undone. <CardDescription>
</CardDescription> Permanent actions that cannot be undone.
</CardHeader> </CardDescription>
<CardContent> </CardHeader>
<Button variant="destructive" disabled> <CardContent>
Delete Account (Not Implemented) <Button variant="destructive" disabled>
</Button> Delete Account (Not Implemented)
</CardContent> </Button>
</Card> </CardContent>
</Card>
</div>
</div>
</div> </div>
); );
} }
app/upgrade/page.tsx
+292 -66
View File
@@ -1,3 +1,5 @@
'use client'; // Make it a client component
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Card, Card,
@@ -5,9 +7,12 @@ import {
CardDescription, CardDescription,
CardHeader, CardHeader,
CardTitle, CardTitle,
CardFooter,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import Link from "next/link"; import Link from "next/link";
import { CheckCircle2, RadioTower } from "lucide-react"; // Added RadioTower for selection indication
import React, { useState } from "react"; // Import useState
// Placeholder SVG for QR Code // Placeholder SVG for QR Code
const PlaceholderQrCode = () => ( const PlaceholderQrCode = () => (
@@ -25,84 +30,305 @@ const PlaceholderQrCode = () => (
</svg> </svg>
); );
interface SubscriptionTier {
id: string;
name: string;
priceDisplay: string; // e.g., "Free", "$5"
priceUSD: number; // Numeric price for calculations
priceDescription?: string;
features: string[];
ctaText: string;
isCurrentPlan?: boolean;
highlight?: boolean;
buttonVariant?: "default" | "outline" | "secondary" | "ghost" | "link";
}
const subscriptionTiersData: SubscriptionTier[] = [
{
id: "free",
name: "Basic Access",
priceDisplay: "Free",
priceUSD: 0,
features: [
"5 API hits/day",
"10 Manual downloads/day",
"Access to common categories",
"30-day access",
"Community support",
],
ctaText: "Current Plan",
isCurrentPlan: true,
buttonVariant: "outline",
},
{
id: "pro",
name: "Pro User",
priceDisplay: "$15",
priceUSD: 5,
priceDescription: "/ year",
features: [
"500 API hits/day",
"100 Manual downloads/day",
"Access to all categories",
"Priority support",
"Early access to new features",
],
ctaText: "Select Pro Plan",
highlight: true,
buttonVariant: "default",
},
{
id: "elite",
name: "Elite Contributor",
priceDisplay: "$25",
priceUSD: 10,
priceDescription: "/ year",
features: [
"Unlimited API hits/day",
"Unlimited Manual downloads/day",
"Access to all categories & archives",
"Dedicated VIP support",
"Direct influence on feature roadmap",
"Special badge in community",
],
ctaText: "Select Elite Plan",
buttonVariant: "default",
},
];
// Placeholder conversion rates - replace with actual or dynamic rates if needed
const XMR_PER_USD = 0.005;
const LTC_PER_USD = 0.01;
export default function UpgradePage() { export default function UpgradePage() {
const [selectedTierId, setSelectedTierId] = useState<string | null>("pro");
const xmrAddress = "4YOURXMRADDRESSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; const xmrAddress = "4YOURXMRADDRESSXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
const ltcAddress = "LYOURLTCADDRESSXXXXXXXXXXXXXXXXXXXXXXX"; const ltcAddress = "LYOURLTCADDRESSXXXXXXXXXXXXXXXXXXXXXXX";
const selectedTier = subscriptionTiersData.find(tier => tier.id === selectedTierId);
const getCryptoAmount = (usdAmount: number, rate: number, applyDiscount: boolean = false) => {
if (usdAmount <= 0) return "N/A";
let finalUsdAmount = usdAmount;
if (applyDiscount) {
finalUsdAmount *= 0.9; // Apply 10% discount
}
return (finalUsdAmount * rate).toFixed(5); // Show 5 decimal places for crypto
};
const isEliteXMRDiscountActive = selectedTier && selectedTier.id === 'elite';
const currentXMRAmount = selectedTier ? getCryptoAmount(selectedTier.priceUSD, XMR_PER_USD, isEliteXMRDiscountActive) : "Select a plan";
const originalXMRAmount = selectedTier ? getCryptoAmount(selectedTier.priceUSD, XMR_PER_USD) : "N/A";
const currentLTCAmount = selectedTier ? getCryptoAmount(selectedTier.priceUSD, LTC_PER_USD) : "Select a plan";
const handleTierSelect = (tierId: string) => {
const tier = subscriptionTiersData.find(t => t.id === tierId);
if (tier && !tier.isCurrentPlan) {
setSelectedTierId(tierId);
} else if (tier && tier.isCurrentPlan) {
setSelectedTierId(null);
}
};
return ( return (
<div className="container mx-auto p-4 py-8 md:py-12 space-y-8"> <div className="container mx-auto p-4 py-8 md:py-12 lg:py-16 xl:max-w-7xl space-y-12 lg:space-y-16">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6 lg:mb-8">
<h1 className="text-3xl font-bold tracking-tight">Support & Upgrade</h1> <h1 className="text-3xl lg:text-4xl font-bold tracking-tight">Support & Upgrade</h1>
<div className="space-x-2"> <div className="space-x-2">
<Link href="/news" passHref> <Link href="/news" passHref><Button variant="ghost">News</Button></Link>
<Button variant="ghost">News</Button> <Link href="/settings" passHref><Button variant="ghost">Settings</Button></Link>
</Link> <Link href="/" passHref><Button variant="outline">Back to Indexer</Button></Link>
<Link href="/settings" passHref>
<Button variant="ghost">Settings</Button>
</Link>
<Link href="/" passHref>
<Button variant="outline">Back to Indexer</Button>
</Link>
</div> </div>
</div> </div>
<CardDescription className="text-center text-xl text-muted-foreground max-w-2xl mx-auto">
If you find this NZB Indexer useful, please consider supporting its development and maintenance.
Your contributions help keep the servers running and allow us to introduce new features!
</CardDescription>
<div className="grid md:grid-cols-2 gap-10"> <section className="space-y-8 lg:space-y-10 p-6 lg:p-8 rounded-xl bg-card/20 shadow-sm">
{/* Monero (XMR) Card */} <div className="text-center">
<Card className="shadow-[0_8px_30px_rgb(160,32,240,0.3)] hover:shadow-[0_12px_40px_rgb(160,32,240,0.4)] transition-all duration-300 ease-out"> <h2 className="text-2xl lg:text-3xl font-semibold tracking-tight">Choose Your Plan</h2>
<CardHeader className="pb-4"> <p className="text-muted-foreground mt-2 lg:mt-3">
<div className="flex items-center justify-between"> Select a plan to proceed with the donation.
<CardTitle className="text-2xl font-semibold">Monero (XMR)</CardTitle>
{/* Optional: XMR Icon can go here */}
</div>
<CardDescription className="pt-1">
Donate Monero for private, untraceable support.
</CardDescription>
</CardHeader>
<CardContent className="space-y-6 text-center pt-4">
<div className="flex justify-center my-6">
<PlaceholderQrCode />
</div>
<p className="text-sm font-medium text-foreground/90">XMR Address:</p>
<div className="flex items-center space-x-2">
<Input type="text" value={xmrAddress} readOnly className="text-xs bg-background/30 border-foreground/20" />
<Button variant="outline" size="sm" disabled>Copy</Button>
</div>
<p className="text-xs text-muted-foreground pt-2">
Ensure you are sending XMR to this address. Transactions are irreversible.
</p> </p>
</CardContent> </div>
</Card> <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
{subscriptionTiersData.map((tier) => (
<Card
key={tier.id}
className={`flex flex-col cursor-pointer transition-all duration-200
${selectedTierId === tier.id ? 'border-primary ring-2 ring-primary shadow-[0_8px_30px_rgb(var(--primary-hsl)/0.4)]' :
(tier.highlight && !tier.isCurrentPlan && selectedTierId !== 'elite') ? 'border-primary/70 shadow-[0_8px_30px_rgb(var(--primary-hsl)/0.2)]' : 'shadow-md'}
${tier.isCurrentPlan ? 'border-dashed' : ''}
`}
onClick={() => handleTierSelect(tier.id)}
>
<CardHeader className="pb-4 relative">
{selectedTierId === tier.id && (
<RadioTower className="absolute top-3 right-3 h-5 w-5 text-primary" />
)}
<CardTitle className={`text-xl font-semibold ${ (tier.highlight && !tier.isCurrentPlan && selectedTierId !== 'elite') || selectedTierId === tier.id ? 'text-primary' : ''}`}>{tier.name}</CardTitle>
<div className="flex items-baseline">
<span className="text-3xl font-extrabold tracking-tight">{tier.priceDisplay}</span>
{tier.priceDescription && <span className="ml-1 text-sm text-muted-foreground">{tier.priceDescription}</span>}
</div>
</CardHeader>
<CardContent className="flex-grow space-y-3 pt-2">
<ul className="space-y-2">
{tier.features.map((feature, index) => (
<li key={index} className="flex items-center text-sm">
<CheckCircle2 className={`mr-2 h-4 w-4 flex-shrink-0 ${selectedTierId === tier.id || (tier.highlight && !tier.isCurrentPlan && selectedTierId !== 'elite') ? 'text-primary' : 'text-green-500'}`} />
{feature}
</li>
))}
</ul>
</CardContent>
<CardFooter className="mt-auto pt-6">
<Button
className="w-full"
variant={tier.isCurrentPlan ? "outline" : selectedTierId === tier.id ? "default" : (tier.highlight && selectedTierId !== 'elite') ? "default" : "outline"}
disabled={tier.isCurrentPlan}
onClick={(e) => {
if (!tier.isCurrentPlan) {
e.stopPropagation();
handleTierSelect(tier.id);
}
}}
>
{tier.isCurrentPlan ? "Current Plan" : selectedTierId === tier.id ? "Selected" : tier.ctaText}
</Button>
</CardFooter>
</Card>
))}
</div>
<div className="text-center">
<p className="text-muted-foreground mt-2">
{selectedTier
? `To support the ${selectedTier.name} tier (${selectedTier.priceDisplay}${selectedTier.priceDescription || ''}), please donate the equivalent amount shown below.`
: ""}
</p>
</div>
<div className="grid md:grid-cols-2 gap-10">
<Card className={`transition-all duration-300 ease-in-out rounded-lg border hover:border-primary/70
${selectedTier && selectedTier.priceUSD > 0 ? 'border-primary/50 ring-2 ring-primary shadow-[0_10px_35px_rgb(var(--primary-hsl)/0.4)] hover:shadow-[0_12px_40px_rgb(var(--primary-hsl)/0.5)]' : 'border-border/30 opacity-70 hover:opacity-90'}`}>
<CardHeader className="pb-4">
<CardTitle className="text-2xl font-semibold">Monero (XMR)</CardTitle>
<CardDescription className="pt-1">
{selectedTier && selectedTier.priceUSD > 0
? (
<>
{isEliteXMRDiscountActive && (
<span className="block text-xs font-semibold text-green-500 mb-1">
10% DISCOUNT
</span>
)}
Suggested for {selectedTier.name}: ~{currentXMRAmount} XMR
</>
)
: "Donate Monero for private, untraceable support."}
</CardDescription>
</CardHeader>
<CardContent className="space-y-6 text-center pt-4">
<div className="flex justify-center my-6"><PlaceholderQrCode /></div>
<p className="text-sm font-medium text-foreground/90">XMR Address:</p>
<div className="flex items-center space-x-2">
<Input type="text" value={xmrAddress} readOnly className="text-xs bg-background/30 border-foreground/20" />
<Button variant="outline" size="sm" disabled>Copy</Button>
</div>
<p className="text-xs text-muted-foreground pt-2">
Ensure you are sending XMR to this address. Transactions are irreversible.
</p>
</CardContent>
</Card>
<Card className={`transition-all duration-300 ease-in-out rounded-lg border hover:border-primary/70
${selectedTier && selectedTier.priceUSD > 0 ? 'border-primary/50 ring-2 ring-primary shadow-[0_10px_35px_rgb(var(--primary-hsl)/0.4)] hover:shadow-[0_12px_40px_rgb(var(--primary-hsl)/0.5)]' : 'border-border/30 opacity-70 hover:opacity-90'}`}>
<CardHeader className="pb-4">
<CardTitle className="text-2xl font-semibold">Litecoin (LTC)</CardTitle>
<CardDescription className="pt-1">
{selectedTier && selectedTier.priceUSD > 0
? `Suggested for ${selectedTier.name}: ~${currentLTCAmount} LTC`
: "Donate Litecoin for fast and low-fee transactions."}
</CardDescription>
</CardHeader>
<CardContent className="space-y-6 text-center pt-4">
<div className="flex justify-center my-6"><PlaceholderQrCode /></div>
<p className="text-sm font-medium text-foreground/90">LTC Address:</p>
<div className="flex items-center space-x-2">
<Input type="text" value={ltcAddress} readOnly className="text-xs bg-background/30 border-foreground/20" />
<Button variant="outline" size="sm" disabled>Copy</Button>
</div>
<p className="text-xs text-muted-foreground pt-2">
Ensure you are sending LTC to this address. Transactions are irreversible.
</p>
</CardContent>
</Card>
</div>
</section>
{/* Litecoin (LTC) Card */} <section className="space-y-8 lg:space-y-10 p-6 lg:p-8 rounded-xl bg-card/20 shadow-sm">
<Card className="shadow-[0_8px_30px_rgb(56,189,248,0.3)] hover:shadow-[0_12px_40px_rgb(56,189,248,0.4)] transition-all duration-300 ease-out"> <div className="text-center pb-4 border-b border-border/50 mb-6 lg:mb-8" >
<CardHeader className="pb-4"> <h2 className="text-2xl lg:text-3xl font-semibold tracking-tight">Or, Make a One-Time Donation</h2>
<div className="flex items-center justify-between"> <p className="text-muted-foreground mt-2 lg:mt-3">
<CardTitle className="text-2xl font-semibold">Litecoin (LTC)</CardTitle> {selectedTier && selectedTier.priceUSD > 0
{/* Optional: LTC Icon can go here */} ? `You've selected the ${selectedTier.name} plan. Suggested donation amounts are shown below.`
</div> : "Support our project with a custom crypto donation." }
<CardDescription className="pt-1">
Donate Litecoin for fast and low-fee transactions.
</CardDescription>
</CardHeader>
<CardContent className="space-y-6 text-center pt-4">
<div className="flex justify-center my-6">
<PlaceholderQrCode />
</div>
<p className="text-sm font-medium text-foreground/90">LTC Address:</p>
<div className="flex items-center space-x-2">
<Input type="text" value={ltcAddress} readOnly className="text-xs bg-background/30 border-foreground/20" />
<Button variant="outline" size="sm" disabled>Copy</Button>
</div>
<p className="text-xs text-muted-foreground pt-2">
Ensure you are sending LTC to this address. Transactions are irreversible.
</p> </p>
</CardContent> </div>
</Card> <div className="grid md:grid-cols-2 lg:grid-cols-2 gap-8 lg:gap-12 xl:gap-16">
</div> <Card className={`transition-all duration-300 ease-in-out rounded-lg border hover:border-primary/70
${selectedTier && selectedTier.priceUSD > 0 ? 'border-primary/50 ring-2 ring-primary shadow-[0_10px_35px_rgb(var(--primary-hsl)/0.4)] hover:shadow-[0_12px_40px_rgb(var(--primary-hsl)/0.5)]' : 'border-border/30 opacity-70 hover:opacity-90'}`}>
<CardHeader className="pb-4">
<CardTitle className="text-2xl font-semibold">Monero (XMR)</CardTitle>
<CardDescription className="pt-1">
{selectedTier && selectedTier.priceUSD > 0
? (
<>
{isEliteXMRDiscountActive && (
<span className="block text-xs font-semibold text-green-500 mb-1">
10% DISCOUNT
</span>
)}
Suggested for {selectedTier.name}: ~{currentXMRAmount} XMR
</>
)
: "Donate Monero for private, untraceable support."}
</CardDescription>
</CardHeader>
<CardContent className="space-y-6 text-center pt-4">
<div className="flex justify-center my-6"><PlaceholderQrCode /></div>
<p className="text-sm font-medium text-foreground/90">XMR Address:</p>
<div className="flex items-center space-x-2">
<Input type="text" value={xmrAddress} readOnly className="text-xs bg-background/30 border-foreground/20" />
<Button variant="outline" size="sm" disabled>Copy</Button>
</div>
<p className="text-xs text-muted-foreground pt-2">
Ensure you are sending XMR to this address. Transactions are irreversible.
</p>
</CardContent>
</Card>
<Card className={`transition-all duration-300 ease-in-out rounded-lg border hover:border-primary/70
${selectedTier && selectedTier.priceUSD > 0 ? 'border-primary/50 ring-2 ring-primary shadow-[0_10px_35px_rgb(var(--primary-hsl)/0.4)] hover:shadow-[0_12px_40px_rgb(var(--primary-hsl)/0.5)]' : 'border-border/30 opacity-70 hover:opacity-90'}`}>
<CardHeader className="pb-4">
<CardTitle className="text-2xl font-semibold">Litecoin (LTC)</CardTitle>
<CardDescription className="pt-1">
{selectedTier && selectedTier.priceUSD > 0
? `Suggested for ${selectedTier.name}: ~${currentLTCAmount} LTC`
: "Donate Litecoin for fast and low-fee transactions."}
</CardDescription>
</CardHeader>
<CardContent className="space-y-6 text-center pt-4">
<div className="flex justify-center my-6"><PlaceholderQrCode /></div>
<p className="text-sm font-medium text-foreground/90">LTC Address:</p>
<div className="flex items-center space-x-2">
<Input type="text" value={ltcAddress} readOnly className="text-xs bg-background/30 border-foreground/20" />
<Button variant="outline" size="sm" disabled>Copy</Button>
</div>
<p className="text-xs text-muted-foreground pt-2">
Ensure you are sending LTC to this address. Transactions are irreversible.
</p>
</CardContent>
</Card>
</div>
</section>
</div> </div>
); );
} }