mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-14 17:06:39 +00:00
Pull up downstream changes
This commit is contained in:
Owen
499
src/components/DomainPicker.tsx
Normal file
499
src/components/DomainPicker.tsx
Normal file
@@ -0,0 +1,499 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
Building2,
|
||||
Zap,
|
||||
ArrowUpDown
|
||||
} from "lucide-react";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { createApiClient, formatAxiosError } from "@/lib/api";
|
||||
import { useEnvContext } from "@/hooks/useEnvContext";
|
||||
import { toast } from "@/hooks/useToast";
|
||||
import { ListDomainsResponse } from "@server/routers/domain/listDomains";
|
||||
import { AxiosResponse } from "axios";
|
||||
import { cn } from "@/lib/cn";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
type OrganizationDomain = {
|
||||
domainId: string;
|
||||
baseDomain: string;
|
||||
verified: boolean;
|
||||
type: "ns" | "cname";
|
||||
};
|
||||
|
||||
type AvailableOption = {
|
||||
domainNamespaceId: string;
|
||||
fullDomain: string;
|
||||
domainId: string;
|
||||
};
|
||||
|
||||
type DomainOption = {
|
||||
id: string;
|
||||
domain: string;
|
||||
type: "organization" | "provided";
|
||||
verified?: boolean;
|
||||
domainType?: "ns" | "cname";
|
||||
domainId?: string;
|
||||
domainNamespaceId?: string;
|
||||
subdomain?: string;
|
||||
};
|
||||
|
||||
interface DomainPickerProps {
|
||||
orgId: string;
|
||||
onDomainChange?: (domainInfo: {
|
||||
domainId: string;
|
||||
domainNamespaceId?: string;
|
||||
type: "organization" | "provided";
|
||||
subdomain?: string;
|
||||
fullDomain: string;
|
||||
baseDomain: string;
|
||||
}) => void;
|
||||
}
|
||||
|
||||
export default function DomainPicker({
|
||||
orgId,
|
||||
onDomainChange
|
||||
}: DomainPickerProps) {
|
||||
const { env } = useEnvContext();
|
||||
const api = createApiClient({ env });
|
||||
const t = useTranslations();
|
||||
|
||||
const [userInput, setUserInput] = useState<string>("");
|
||||
const [selectedOption, setSelectedOption] = useState<DomainOption | null>(
|
||||
null
|
||||
);
|
||||
const [availableOptions, setAvailableOptions] = useState<AvailableOption[]>(
|
||||
[]
|
||||
);
|
||||
const [isChecking, setIsChecking] = useState(false);
|
||||
const [organizationDomains, setOrganizationDomains] = useState<
|
||||
OrganizationDomain[]
|
||||
>([]);
|
||||
const [loadingDomains, setLoadingDomains] = useState(false);
|
||||
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
|
||||
const [activeTab, setActiveTab] = useState<
|
||||
"all" | "organization" | "provided"
|
||||
>("all");
|
||||
const [providedDomainsShown, setProvidedDomainsShown] = useState(3);
|
||||
|
||||
useEffect(() => {
|
||||
const loadOrganizationDomains = async () => {
|
||||
setLoadingDomains(true);
|
||||
try {
|
||||
const response = await api.get<
|
||||
AxiosResponse<ListDomainsResponse>
|
||||
>(`/org/${orgId}/domains`);
|
||||
if (response.status === 200) {
|
||||
const domains = response.data.data.domains
|
||||
.filter(
|
||||
(domain) =>
|
||||
domain.type === "ns" || domain.type === "cname"
|
||||
)
|
||||
.map((domain) => ({
|
||||
...domain,
|
||||
type: domain.type as "ns" | "cname"
|
||||
}));
|
||||
setOrganizationDomains(domains);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load organization domains:", error);
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Error",
|
||||
description: "Failed to load organization domains"
|
||||
});
|
||||
} finally {
|
||||
setLoadingDomains(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadOrganizationDomains();
|
||||
}, [orgId, api]);
|
||||
|
||||
// Generate domain options based on user input
|
||||
const generateDomainOptions = (): DomainOption[] => {
|
||||
const options: DomainOption[] = [];
|
||||
|
||||
if (!userInput.trim()) return options;
|
||||
|
||||
// Check if input is more than one level deep (contains multiple dots)
|
||||
const isMultiLevel = (userInput.match(/\./g) || []).length > 1;
|
||||
|
||||
// Add organization domain options
|
||||
organizationDomains.forEach((orgDomain) => {
|
||||
if (orgDomain.type === "cname") {
|
||||
// For CNAME domains, check if the user input matches exactly
|
||||
if (
|
||||
orgDomain.baseDomain.toLowerCase() ===
|
||||
userInput.toLowerCase()
|
||||
) {
|
||||
options.push({
|
||||
id: `org-${orgDomain.domainId}`,
|
||||
domain: orgDomain.baseDomain,
|
||||
type: "organization",
|
||||
verified: orgDomain.verified,
|
||||
domainType: "cname",
|
||||
domainId: orgDomain.domainId
|
||||
});
|
||||
}
|
||||
} else if (orgDomain.type === "ns") {
|
||||
// For NS domains, check if the user input could be a subdomain
|
||||
const userInputLower = userInput.toLowerCase();
|
||||
const baseDomainLower = orgDomain.baseDomain.toLowerCase();
|
||||
|
||||
// Check if user input ends with the base domain
|
||||
if (userInputLower.endsWith(`.${baseDomainLower}`)) {
|
||||
const subdomain = userInputLower.slice(
|
||||
0,
|
||||
-(baseDomainLower.length + 1)
|
||||
);
|
||||
options.push({
|
||||
id: `org-${orgDomain.domainId}`,
|
||||
domain: userInput,
|
||||
type: "organization",
|
||||
verified: orgDomain.verified,
|
||||
domainType: "ns",
|
||||
domainId: orgDomain.domainId,
|
||||
subdomain: subdomain
|
||||
});
|
||||
} else if (userInputLower === baseDomainLower) {
|
||||
// Exact match for base domain
|
||||
options.push({
|
||||
id: `org-${orgDomain.domainId}`,
|
||||
domain: orgDomain.baseDomain,
|
||||
type: "organization",
|
||||
verified: orgDomain.verified,
|
||||
domainType: "ns",
|
||||
domainId: orgDomain.domainId
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add provided domain options (always try to match provided domains)
|
||||
availableOptions.forEach((option) => {
|
||||
options.push({
|
||||
id: `provided-${option.domainNamespaceId}`,
|
||||
domain: option.fullDomain,
|
||||
type: "provided",
|
||||
domainNamespaceId: option.domainNamespaceId,
|
||||
domainId: option.domainId,
|
||||
});
|
||||
});
|
||||
|
||||
// Sort options
|
||||
return options.sort((a, b) => {
|
||||
const comparison = a.domain.localeCompare(b.domain);
|
||||
return sortOrder === "asc" ? comparison : -comparison;
|
||||
});
|
||||
};
|
||||
|
||||
const domainOptions = generateDomainOptions();
|
||||
|
||||
// Filter options based on active tab
|
||||
const filteredOptions = domainOptions.filter((option) => {
|
||||
if (activeTab === "all") return true;
|
||||
return option.type === activeTab;
|
||||
});
|
||||
|
||||
// Separate organization and provided options for pagination
|
||||
const organizationOptions = filteredOptions.filter(
|
||||
(opt) => opt.type === "organization"
|
||||
);
|
||||
const allProvidedOptions = filteredOptions.filter(
|
||||
(opt) => opt.type === "provided"
|
||||
);
|
||||
const providedOptions = allProvidedOptions.slice(0, providedDomainsShown);
|
||||
const hasMoreProvided = allProvidedOptions.length > providedDomainsShown;
|
||||
|
||||
// Handle option selection
|
||||
const handleOptionSelect = (option: DomainOption) => {
|
||||
setSelectedOption(option);
|
||||
|
||||
if (option.type === "organization") {
|
||||
if (option.domainType === "cname") {
|
||||
onDomainChange?.({
|
||||
domainId: option.domainId!,
|
||||
type: "organization",
|
||||
subdomain: undefined,
|
||||
fullDomain: option.domain,
|
||||
baseDomain: option.domain
|
||||
});
|
||||
} else if (option.domainType === "ns") {
|
||||
const subdomain = option.subdomain || "";
|
||||
onDomainChange?.({
|
||||
domainId: option.domainId!,
|
||||
type: "organization",
|
||||
subdomain: subdomain || undefined,
|
||||
fullDomain: option.domain,
|
||||
baseDomain: option.domain
|
||||
});
|
||||
}
|
||||
} else if (option.type === "provided") {
|
||||
// Extract subdomain from full domain
|
||||
const parts = option.domain.split(".");
|
||||
const subdomain = parts[0];
|
||||
const baseDomain = parts.slice(1).join(".");
|
||||
onDomainChange?.({
|
||||
domainId: option.domainId!,
|
||||
domainNamespaceId: option.domainNamespaceId,
|
||||
type: "provided",
|
||||
subdomain: subdomain,
|
||||
fullDomain: option.domain,
|
||||
baseDomain: baseDomain
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Domain Input */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="domain-input">
|
||||
{t("domainPickerEnterDomain")}
|
||||
</Label>
|
||||
<Input
|
||||
id="domain-input"
|
||||
value={userInput}
|
||||
onChange={(e) => {
|
||||
// Only allow letters, numbers, hyphens, and periods
|
||||
const validInput = e.target.value.replace(
|
||||
/[^a-zA-Z0-9.-]/g,
|
||||
""
|
||||
);
|
||||
setUserInput(validInput);
|
||||
}}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("domainPickerDescription")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tabs and Sort Toggle */}
|
||||
<div className="flex justify-between items-center">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(value) =>
|
||||
setActiveTab(
|
||||
value as "all" | "organization" | "provided"
|
||||
)
|
||||
}
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="all">
|
||||
{t("domainPickerTabAll")}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="organization">
|
||||
{t("domainPickerTabOrganization")}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="provided">
|
||||
{t("domainPickerTabProvided")}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setSortOrder(sortOrder === "asc" ? "desc" : "asc")
|
||||
}
|
||||
>
|
||||
<ArrowUpDown className="h-4 w-4 mr-2" />
|
||||
{sortOrder === "asc"
|
||||
? t("domainPickerSortAsc")
|
||||
: t("domainPickerSortDesc")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Loading State */}
|
||||
{isChecking && (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="flex items-center space-x-2 text-sm text-muted-foreground">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
|
||||
<span>{t("domainPickerCheckingAvailability")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No Options */}
|
||||
{!isChecking &&
|
||||
filteredOptions.length === 0 &&
|
||||
userInput.trim() && (
|
||||
<Alert>
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
{t("domainPickerNoMatchingDomains", { userInput })}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Domain Options */}
|
||||
{!isChecking && filteredOptions.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
{/* Organization Domains */}
|
||||
{organizationOptions.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Building2 className="h-4 w-4" />
|
||||
<h4 className="text-sm font-medium">
|
||||
{t("domainPickerOrganizationDomains")}
|
||||
</h4>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
{organizationOptions.map((option) => (
|
||||
<div
|
||||
key={option.id}
|
||||
className={cn(
|
||||
"transition-all p-3 rounded-lg border",
|
||||
selectedOption?.id === option.id
|
||||
? "border-primary bg-primary/5"
|
||||
: "border-input",
|
||||
option.verified
|
||||
? "cursor-pointer hover:bg-accent"
|
||||
: "cursor-not-allowed opacity-60"
|
||||
)}
|
||||
onClick={() =>
|
||||
option.verified && handleOptionSelect(option)
|
||||
}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<p className="font-mono text-sm">
|
||||
{option.domain}
|
||||
</p>
|
||||
{/* <Badge */}
|
||||
{/* variant={ */}
|
||||
{/* option.domainType === */}
|
||||
{/* "ns" */}
|
||||
{/* ? "default" */}
|
||||
{/* : "secondary" */}
|
||||
{/* } */}
|
||||
{/* > */}
|
||||
{/* {option.domainType} */}
|
||||
{/* </Badge> */}
|
||||
{option.verified ? (
|
||||
<CheckCircle2 className="h-3 w-3 text-green-500" />
|
||||
) : (
|
||||
<AlertCircle className="h-3 w-3 text-yellow-500" />
|
||||
)}
|
||||
</div>
|
||||
{option.subdomain && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{t(
|
||||
"domainPickerSubdomain",
|
||||
{
|
||||
subdomain:
|
||||
option.subdomain
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
{!option.verified && (
|
||||
<p className="text-xs text-yellow-600 mt-1">
|
||||
Domain is unverified
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{selectedOption?.id ===
|
||||
option.id && (
|
||||
<CheckCircle2 className="h-4 w-4 text-primary" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Provided Domains */}
|
||||
{providedOptions.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Zap className="h-4 w-4" />
|
||||
<div className="text-sm font-medium">
|
||||
{t("domainPickerProvidedDomains")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
{providedOptions.map((option) => (
|
||||
<div
|
||||
key={option.id}
|
||||
className={cn(
|
||||
"transition-all p-3 rounded-lg border",
|
||||
selectedOption?.id === option.id
|
||||
? "border-primary bg-primary/5"
|
||||
: "border-input",
|
||||
"cursor-pointer hover:bg-accent"
|
||||
)}
|
||||
onClick={() =>
|
||||
handleOptionSelect(option)
|
||||
}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="font-mono text-sm">
|
||||
{option.domain}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t(
|
||||
"domainPickerNamespace",
|
||||
{
|
||||
namespace:
|
||||
option.domainNamespaceId as string
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
{selectedOption?.id ===
|
||||
option.id && (
|
||||
<CheckCircle2 className="h-4 w-4 text-primary" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{hasMoreProvided && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setProvidedDomainsShown(
|
||||
(prev) => prev + 3
|
||||
)
|
||||
}
|
||||
className="w-full"
|
||||
>
|
||||
{t("domainPickerShowMore")}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function debounce<T extends (...args: any[]) => any>(
|
||||
func: T,
|
||||
wait: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let timeout: NodeJS.Timeout | null = null;
|
||||
|
||||
return (...args: Parameters<T>) => {
|
||||
if (timeout) clearTimeout(timeout);
|
||||
|
||||
timeout = setTimeout(() => {
|
||||
func(...args);
|
||||
}, wait);
|
||||
};
|
||||
}
|
||||
@@ -30,8 +30,9 @@ export async function Layout({
|
||||
}: LayoutProps) {
|
||||
const allCookies = await cookies();
|
||||
const sidebarStateCookie = allCookies.get("pangolin-sidebar-state")?.value;
|
||||
|
||||
const initialSidebarCollapsed = sidebarStateCookie === "collapsed" ||
|
||||
|
||||
const initialSidebarCollapsed =
|
||||
sidebarStateCookie === "collapsed" ||
|
||||
(sidebarStateCookie !== "expanded" && defaultSidebarCollapsed);
|
||||
|
||||
return (
|
||||
@@ -49,7 +50,7 @@ export async function Layout({
|
||||
{/* Main content area */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex-1 flex flex-col h-full min-w-0",
|
||||
"flex-1 flex flex-col h-full min-w-0 relative",
|
||||
!showSidebar && "w-full"
|
||||
)}
|
||||
>
|
||||
@@ -69,7 +70,10 @@ export async function Layout({
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1 overflow-y-auto p-3 md:p-6 w-full">
|
||||
<div className="container mx-auto max-w-12xl mb-12">
|
||||
<div className={cn(
|
||||
"container mx-auto max-w-12xl mb-12",
|
||||
showHeader && "md:pt-20" // Add top padding only on desktop to account for fixed header
|
||||
)}>
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -7,6 +7,8 @@ import Link from "next/link";
|
||||
import ProfileIcon from "@app/components/ProfileIcon";
|
||||
import ThemeSwitcher from "@app/components/ThemeSwitcher";
|
||||
import { useTheme } from "next-themes";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { Badge } from "./ui/badge";
|
||||
|
||||
interface LayoutHeaderProps {
|
||||
showTopBar: boolean;
|
||||
@@ -15,6 +17,7 @@ interface LayoutHeaderProps {
|
||||
export function LayoutHeader({ showTopBar }: LayoutHeaderProps) {
|
||||
const { theme } = useTheme();
|
||||
const [path, setPath] = useState<string>("");
|
||||
const { env } = useEnvContext();
|
||||
|
||||
useEffect(() => {
|
||||
function getPath() {
|
||||
@@ -56,7 +59,6 @@ export function LayoutHeader({ showTopBar }: LayoutHeaderProps) {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Profile controls on the right */}
|
||||
{showTopBar && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<ThemeSwitcher />
|
||||
|
||||
@@ -152,7 +152,7 @@ export function LayoutSidebar({
|
||||
onClick={() =>
|
||||
setIsSidebarCollapsed(!isSidebarCollapsed)
|
||||
}
|
||||
className="cursor-pointer absolute -right-2.5 top-1/2 transform -translate-y-1/2 w-2 h-8 rounded-full flex items-center justify-center transition-all duration-200 ease-in-out hover:scale-110 group"
|
||||
className="cursor-pointer absolute -right-2.5 top-1/2 transform -translate-y-1/2 w-2 h-8 rounded-full flex items-center justify-center transition-all duration-200 ease-in-out hover:scale-110 group z-[60]"
|
||||
aria-label={
|
||||
isSidebarCollapsed
|
||||
? "Expand sidebar"
|
||||
|
||||
@@ -80,8 +80,8 @@ export function OrgSelector({ orgId, orgs, isCollapsed = false }: OrgSelectorPro
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[320px] p-0" align="start">
|
||||
<Command className="rounded-lg">
|
||||
<CommandInput
|
||||
placeholder={t('searchProgress')}
|
||||
<CommandInput
|
||||
placeholder={t('searchProgress')}
|
||||
className="border-0 focus:ring-0"
|
||||
/>
|
||||
<CommandEmpty className="py-6 text-center">
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { ArrowRight, Plus } from "lucide-react";
|
||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
interface Organization {
|
||||
@@ -29,6 +30,8 @@ export default function OrganizationLanding({
|
||||
}: OrganizationLandingProps) {
|
||||
const [selectedOrg, setSelectedOrg] = useState<string | null>(null);
|
||||
|
||||
const { env } = useEnvContext();
|
||||
|
||||
const handleOrgClick = (orgId: string) => {
|
||||
setSelectedOrg(orgId);
|
||||
};
|
||||
|
||||
@@ -19,7 +19,7 @@ export function SettingsSectionForm({
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return <div className="max-w-xl">{children}</div>;
|
||||
return <div className="max-w-xl space-y-4">{children}</div>;
|
||||
}
|
||||
|
||||
export function SettingsSectionTitle({
|
||||
|
||||
@@ -48,6 +48,7 @@ export function SidebarNav({
|
||||
const niceId = params.niceId as string;
|
||||
const resourceId = params.resourceId as string;
|
||||
const userId = params.userId as string;
|
||||
const apiKeyId = params.apiKeyId as string;
|
||||
const clientId = params.clientId as string;
|
||||
const { licenseStatus, isUnlocked } = useLicenseStatusContext();
|
||||
const { user } = useUserContext();
|
||||
@@ -59,6 +60,7 @@ export function SidebarNav({
|
||||
.replace("{niceId}", niceId)
|
||||
.replace("{resourceId}", resourceId)
|
||||
.replace("{userId}", userId)
|
||||
.replace("{apiKeyId}", apiKeyId)
|
||||
.replace("{clientId}", clientId);
|
||||
}
|
||||
|
||||
|
||||
@@ -67,7 +67,8 @@ export default function SupporterStatus({ isCollapsed = false }: SupporterStatus
|
||||
const [keyOpen, setKeyOpen] = useState(false);
|
||||
const [purchaseOptionsOpen, setPurchaseOptionsOpen] = useState(false);
|
||||
|
||||
const api = createApiClient(useEnvContext());
|
||||
const { env } = useEnvContext();
|
||||
const api = createApiClient({ env });
|
||||
const t = useTranslations();
|
||||
|
||||
const formSchema = z.object({
|
||||
|
||||
@@ -497,7 +497,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
|
||||
<div className="w-full">
|
||||
<div
|
||||
className={cn(
|
||||
`flex flex-row flex-wrap items-center gap-1.5 p-1.5 w-full rounded-md border border-input bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50`,
|
||||
`flex flex-row flex-wrap items-center gap-1.5 p-1.5 w-full rounded-md border border-input text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50`,
|
||||
styleClasses?.inlineTagsContainer
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -16,9 +16,9 @@ const badgeVariants = cva(
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground",
|
||||
outline: "text-foreground",
|
||||
green: "border-transparent bg-green-500",
|
||||
yellow: "border-transparent bg-yellow-500",
|
||||
red: "border-transparent bg-red-300",
|
||||
green: "border-green-600 bg-green-500/20 text-green-700 dark:text-green-300",
|
||||
yellow: "border-yellow-600 bg-yellow-500/20 text-yellow-700 dark:text-yellow-300",
|
||||
red: "border-red-400 bg-red-300/20 text-red-600 dark:text-red-300",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -71,7 +71,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
disabled={loading || props.disabled} // Disable button when loading
|
||||
{...props}
|
||||
>
|
||||
{/* {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} */}
|
||||
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{props.children}
|
||||
</Comp>
|
||||
);
|
||||
|
||||
@@ -107,8 +107,8 @@ export function DataTable<TData, TValue>({
|
||||
</div>
|
||||
<div className="flex items-center gap-2 sm:justify-end">
|
||||
{onRefresh && (
|
||||
<Button
|
||||
variant="outline"
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onRefresh}
|
||||
disabled={isRefreshing}
|
||||
loading={isRefreshing}
|
||||
@@ -182,4 +182,4 @@ export function DataTable<TData, TValue>({
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,24 +3,60 @@
|
||||
import * as React from "react";
|
||||
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
||||
import { cn } from "@app/lib/cn";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
const progressVariants = cva(
|
||||
"border relative h-2 w-full overflow-hidden rounded-full",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-muted",
|
||||
success: "bg-muted",
|
||||
warning: "bg-muted",
|
||||
danger: "bg-muted"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const indicatorVariants = cva(
|
||||
"h-full w-full flex-1 transition-all",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary",
|
||||
success: "bg-green-500",
|
||||
warning: "bg-yellow-500",
|
||||
danger: "bg-red-500"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root> &
|
||||
VariantProps<typeof progressVariants>;
|
||||
|
||||
function Progress({
|
||||
className,
|
||||
value,
|
||||
variant,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
||||
}: ProgressProps) {
|
||||
return (
|
||||
<ProgressPrimitive.Root
|
||||
data-slot="progress"
|
||||
className={cn(
|
||||
"border relative h-2 w-full overflow-hidden rounded-full",
|
||||
className
|
||||
)}
|
||||
className={cn(progressVariants({ variant }), className)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
data-slot="progress-indicator"
|
||||
className="bg-primary h-full w-full flex-1 transition-all"
|
||||
className={cn(indicatorVariants({ variant }))}
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
|
||||
Reference in New Issue
Block a user