mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-24 16:26:32 +02:00
ff4e0f9b62
Some checks are pending
Build and Push Docker Images / tag_release (push) Waiting to run
Build and Push Docker Images / build (./surfsense_backend, ./surfsense_backend/Dockerfile, backend, surfsense-backend, ubuntu-24.04-arm, linux/arm64, arm64) (push) Blocked by required conditions
Build and Push Docker Images / build (./surfsense_backend, ./surfsense_backend/Dockerfile, backend, surfsense-backend, ubuntu-latest, linux/amd64, amd64) (push) Blocked by required conditions
Build and Push Docker Images / build (./surfsense_web, ./surfsense_web/Dockerfile, web, surfsense-web, ubuntu-24.04-arm, linux/arm64, arm64) (push) Blocked by required conditions
Build and Push Docker Images / build (./surfsense_web, ./surfsense_web/Dockerfile, web, surfsense-web, ubuntu-latest, linux/amd64, amd64) (push) Blocked by required conditions
Build and Push Docker Images / create_manifest (backend, surfsense-backend) (push) Blocked by required conditions
Build and Push Docker Images / create_manifest (web, surfsense-web) (push) Blocked by required conditions
84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { OctagonAlert, Orbit, X } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface QuotaWarningBannerProps {
|
|
used: number;
|
|
limit: number;
|
|
warningThreshold: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function QuotaWarningBanner({
|
|
used,
|
|
limit,
|
|
warningThreshold,
|
|
className,
|
|
}: QuotaWarningBannerProps) {
|
|
const [dismissed, setDismissed] = useState(false);
|
|
const isWarning = used >= warningThreshold && used < limit;
|
|
const isExceeded = used >= limit;
|
|
|
|
if (dismissed || (!isWarning && !isExceeded)) return null;
|
|
|
|
if (isExceeded) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"rounded-lg border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/50 p-4",
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<OctagonAlert className="h-5 w-5 text-red-500 shrink-0 mt-0.5" />
|
|
<div className="flex-1 space-y-2">
|
|
<p className="text-sm font-medium text-red-800 dark:text-red-200">
|
|
Free token limit reached
|
|
</p>
|
|
<p className="text-xs text-red-600 dark:text-red-300">
|
|
You've used all {limit.toLocaleString()} free tokens. Create a free account to
|
|
get 5 million tokens and access to all models.
|
|
</p>
|
|
<Link
|
|
href="/register"
|
|
className="inline-flex items-center gap-1.5 rounded-md bg-linear-to-r from-purple-600 to-blue-600 px-4 py-2 text-sm font-medium text-white transition-opacity hover:opacity-90"
|
|
>
|
|
<Orbit className="h-4 w-4" />
|
|
Create Free Account
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"rounded-lg border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/50 p-3",
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<OctagonAlert className="h-4 w-4 text-amber-500 shrink-0" />
|
|
<p className="flex-1 text-xs text-amber-700 dark:text-amber-300">
|
|
You've used {used.toLocaleString()} of {limit.toLocaleString()} free tokens.{" "}
|
|
<Link href="/register" className="font-medium underline hover:no-underline">
|
|
Create an account
|
|
</Link>{" "}
|
|
for 5M free tokens.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => setDismissed(true)}
|
|
className="text-amber-400 hover:text-amber-600 dark:hover:text-amber-200"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|