雨霖铃
54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { CARD_CLASS, DOMAIN_LABEL, LOADING_TEXT, STATUS_CONFIG } from './constants';
|
|
import { useRightClickRestorer } from './useRightClickRestorer';
|
|
|
|
export default function Index() {
|
|
const { domain, isLoading, status, unlock } = useRightClickRestorer();
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-12 min-h-[280px] w-full">
|
|
<Loader2 className="h-6 w-6 text-muted-foreground/80 animate-spin" />
|
|
<span className="text-xs text-muted-foreground mt-2 font-medium tracking-wide">
|
|
{LOADING_TEXT}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const config = STATUS_CONFIG[status];
|
|
const BadgeIcon = config.badgeIcon;
|
|
const ButtonIcon = config.buttonIcon;
|
|
|
|
return (
|
|
<div className="p-4 w-full flex flex-col space-y-4">
|
|
<div className={CARD_CLASS}>
|
|
<Label className="text-sm font-medium">{DOMAIN_LABEL}</Label>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<code className="text-sm bg-muted px-2 py-1 rounded truncate min-w-0 flex-1">
|
|
{domain || '—'}
|
|
</code>
|
|
<Badge variant={config.badgeVariant} className={config.badgeClassName}>
|
|
<BadgeIcon className="h-3 w-3" />
|
|
{config.badgeLabel}
|
|
</Badge>
|
|
</div>
|
|
|
|
<p className="text-xs text-muted-foreground">{config.description}</p>
|
|
<Button
|
|
className="w-full gap-2"
|
|
disabled={config.buttonDisabled}
|
|
variant={config.buttonVariant}
|
|
onClick={config.buttonDisabled ? undefined : () => void unlock()}
|
|
>
|
|
<ButtonIcon className="h-4 w-4" />
|
|
{config.buttonLabel}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|