mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-07-08 21:56:08 +00:00
MHSanaei
9b91f0f42e
Fold the standalone 3x-ui-docs project (Next.js 16 + Fumadocs, deployed to docs.sanaei.dev) into docs/ so the panel and its documentation share a single source of truth, the way sing-box keeps its docs in-tree. The old repo becomes redundant and can be retired. - Import the full site under docs/ (app, components, content, lib, public, scripts, config). The self-contained pnpm project sits alongside the existing engineering notes with no filename collisions. - Re-point "Edit on GitHub" links from MHSanaei/3x-ui-docs to this repo's docs/content/docs path (docs/lib/shared.ts, docs/app/.../page.tsx). - Add docs-ci.yml and docs-deploy.yml under .github/workflows/, scoped to docs/** and run with working-directory: docs, since GitHub only runs workflows from the repo-root .github/. deploy-static.yml's GitHub Pages publish (CNAME docs.sanaei.dev) carries over unchanged. Follow-up (outside this commit): attach the docs.sanaei.dev custom domain to this repository's Pages (or set the Vercel project's root directory to docs), confirm the site is live from the monorepo, then delete MHSanaei/3x-ui-docs.
100 lines
2.2 KiB
TypeScript
100 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { useId } from 'react';
|
|
|
|
const inputClass =
|
|
'rounded-lg border bg-fd-background px-3 py-2 text-sm outline-none transition-colors focus-visible:border-fd-primary focus-visible:ring-2 focus-visible:ring-fd-ring/30';
|
|
|
|
export function TextField({
|
|
label,
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
hint,
|
|
inputMode,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
hint?: string;
|
|
inputMode?: 'numeric' | 'text';
|
|
}) {
|
|
const id = useId();
|
|
return (
|
|
<div className="flex flex-col gap-1.5">
|
|
<label htmlFor={id} className="text-sm font-medium">
|
|
{label}
|
|
</label>
|
|
{/* Values are technical (hosts, links) and stay LTR even on RTL pages. */}
|
|
<input
|
|
id={id}
|
|
dir="ltr"
|
|
inputMode={inputMode}
|
|
value={value}
|
|
placeholder={placeholder}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
className={inputClass}
|
|
/>
|
|
{hint ? <span className="text-xs text-fd-muted-foreground">{hint}</span> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CheckboxField({
|
|
label,
|
|
checked,
|
|
onChange,
|
|
}: {
|
|
label: string;
|
|
checked: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
}) {
|
|
const id = useId();
|
|
return (
|
|
<label htmlFor={id} className="inline-flex cursor-pointer items-center gap-2 text-sm">
|
|
<input
|
|
id={id}
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={(e) => onChange(e.target.checked)}
|
|
className="size-4 accent-fd-primary"
|
|
/>
|
|
{label}
|
|
</label>
|
|
);
|
|
}
|
|
|
|
export function SelectField({
|
|
label,
|
|
value,
|
|
onChange,
|
|
options,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
options: readonly string[];
|
|
}) {
|
|
const id = useId();
|
|
return (
|
|
<div className="flex flex-col gap-1.5">
|
|
<label htmlFor={id} className="text-sm font-medium">
|
|
{label}
|
|
</label>
|
|
<select
|
|
id={id}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
className={inputClass}
|
|
>
|
|
{options.map((opt) => (
|
|
<option key={opt} value={opt}>
|
|
{opt}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
}
|