pjandro/OmniRoute
1
0
Fork 0
mirror of https://github.com/diegosouzapw/OmniRoute.git synced 2026-08-12 02:02:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor(settings): extract pricing tab helpers

Browse Source 
Co-authored-by: diegosouzapw <8016841+diegosouzapw@users.noreply.github.com>
This commit is contained in:
Xiangzhe
2026-08-09 08:34:04 -03:00
committed by diegosouzapw
parent ffea901c45
commit e4b9b4dba9
2 changed files with 58 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/app/(dashboard)/dashboard/settings/components/PricingTab.tsx
View File

@@ -1,5 +1,7 @@
"use client";
import { FilterSelect, HeroStat, SyncMini } from "./PricingTabHelpers";
import { useState, useEffect, useCallback, useMemo } from "react";
import { Card, Button } from "@/shared/components";
import ProviderIcon from "@/shared/components/ProviderIcon";
@@ -726,63 +728,6 @@ export default function PricingTab() {
);
}
function HeroStat({ label, value, accent }: { label: string; value: number; accent?: string }) {
return (
<div className="text-center">
<div className="text-[10px] uppercase tracking-wide text-text-muted font-semibold truncate">
{label}
</div>
<div
className={`text-2xl font-bold tabular-nums leading-tight ${accent || "text-text-main"}`}
>
{value}
</div>
</div>
);
}
function SyncMini({ label, value }: { label: string; value: string }) {
return (
<div className="rounded-md border border-border/30 bg-bg-base/40 px-2 py-1.5">
<p className="text-[9px] uppercase tracking-wide text-text-muted font-semibold truncate">
{label}
</p>
<p className="text-[11px] font-medium text-text-main mt-0.5 truncate" title={value}>
{value}
</p>
</div>
);
}
function FilterSelect({
label,
value,
onChange,
options,
}: {
label: string;
value: string;
onChange: (v: string) => void;
options: Array<{ value: string; label: string }>;
}) {
return (
<label className="flex items-center gap-1.5 text-xs text-text-muted">
<span className="font-semibold uppercase tracking-wide">{label}:</span>
<select
value={value}
onChange={(e) => onChange(e.target.value)}
className="bg-bg-base border border-border rounded-md px-2 py-1.5 text-xs text-text-main cursor-pointer focus:outline-none focus:border-primary"
>
{options.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
</label>
);
}
function ProviderSection({
provider,
pricingData,

56
src/app/(dashboard)/dashboard/settings/components/PricingTabHelpers.tsx Normal file
View File

@@ -0,0 +1,56 @@
export function HeroStat({ label, value, accent }: { label: string; value: number; accent?: string }) {
return (
<div className="text-center">
<div className="text-[10px] uppercase tracking-wide text-text-muted font-semibold truncate">
{label}
</div>
<div
className={`text-2xl font-bold tabular-nums leading-tight ${accent || "text-text-main"}`}
>
{value}
</div>
</div>
);
}
export function SyncMini({ label, value }: { label: string; value: string }) {
return (
<div className="rounded-md border border-border/30 bg-bg-base/40 px-2 py-1.5">
<p className="text-[9px] uppercase tracking-wide text-text-muted font-semibold truncate">
{label}
</p>
<p className="text-[11px] font-medium text-text-main mt-0.5 truncate" title={value}>
{value}
</p>
</div>
);
}
export function FilterSelect({
label,
value,
onChange,
options,
}: {
label: string;
value: string;
onChange: (value: string) => void;
options: Array<{ value: string; label: string }>;
}) {
return (
<label className="flex items-center gap-1.5 text-xs text-text-muted">
<span className="font-semibold uppercase tracking-wide">{label}:</span>
<select
value={value}
onChange={(event) => onChange(event.target.value)}
className="bg-bg-base border border-border rounded-md px-2 py-1.5 text-xs text-text-main cursor-pointer focus:outline-none focus:border-primary"
>
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
</label>
);
}