feat: enhance MorePagesPage and PageUsageDisplay with PRO upgrade options and improved UI elements

This commit is contained in:
DESKTOP-RTLN3BA\$punk 2026-03-09 17:05:15 -07:00
parent 62c9880f11
commit ddb070bca8
2 changed files with 88 additions and 65 deletions

View file

@ -1,8 +1,9 @@
"use client";
import { Plus } from "lucide-react";
import { Zap } from "lucide-react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
interface PageUsageDisplayProps {
@ -27,10 +28,15 @@ export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProp
<Progress value={usagePercentage} className="h-1.5" />
<Link
href={`/dashboard/${searchSpaceId}/more-pages`}
className="flex items-center gap-1.5 text-[10px] text-muted-foreground hover:text-primary transition-colors"
className="group flex items-center justify-between rounded-md px-1.5 py-1 -mx-1.5 transition-colors hover:bg-accent"
>
<Plus className="h-3 w-3 shrink-0" />
<span>Get More Pages</span>
<span className="flex items-center gap-1.5 text-xs text-muted-foreground group-hover:text-accent-foreground">
<Zap className="h-3 w-3 shrink-0" />
Upgrade to PRO
</span>
<Badge className="h-4 rounded px-1 text-[10px] font-semibold leading-none bg-emerald-600 text-white border-transparent hover:bg-emerald-600">
FREE
</Badge>
</Link>
</div>
</div>