99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardEyebrow,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from "@/components/ui/card";
|
||
import { Button } from "@/components/ui/button";
|
||
import type { ResourcePickerOption } from "@/features/orders/resource-picker-options";
|
||
|
||
type ResourcePickerCardProps = {
|
||
description: string;
|
||
disabled?: boolean;
|
||
isLoading?: boolean;
|
||
label: string;
|
||
selectedItem: ResourcePickerOption | null;
|
||
title: string;
|
||
onOpenPicker: () => void;
|
||
};
|
||
|
||
export function ResourcePickerCard({
|
||
description,
|
||
disabled = false,
|
||
isLoading = false,
|
||
label,
|
||
selectedItem,
|
||
title,
|
||
onOpenPicker,
|
||
}: ResourcePickerCardProps) {
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardEyebrow>Resource manager</CardEyebrow>
|
||
<CardTitle>{title}</CardTitle>
|
||
<CardDescription>{description}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="space-y-2 text-sm text-[var(--ink-strong)]">
|
||
<span className="font-medium">{label}</span>
|
||
<Button
|
||
aria-label={selectedItem ? `更换${label}` : `选择${label}`}
|
||
className="min-h-12 w-full justify-between rounded-[18px] border-[var(--border-strong)] bg-[var(--surface-muted)] px-4 text-left text-[var(--ink-strong)] shadow-none hover:bg-[var(--surface)]"
|
||
disabled={disabled || isLoading}
|
||
size="lg"
|
||
variant="secondary"
|
||
onClick={onOpenPicker}
|
||
>
|
||
{isLoading
|
||
? "正在加载资源..."
|
||
: selectedItem
|
||
? `更换${label}`
|
||
: `选择${label}`}
|
||
</Button>
|
||
</div>
|
||
|
||
{selectedItem ? (
|
||
<div className="rounded-[20px] border border-[var(--border-soft)] bg-[var(--surface-muted)] p-4">
|
||
<div className="flex flex-wrap items-start gap-3">
|
||
<div className="h-20 w-16 overflow-hidden rounded-[14px] bg-[rgba(74,64,53,0.08)]">
|
||
{selectedItem.previewUri ? (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img
|
||
alt={`${selectedItem.name} 预览图`}
|
||
className="h-full w-full object-cover"
|
||
src={selectedItem.previewUri}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="text-sm font-semibold text-[var(--ink-strong)]">
|
||
{selectedItem.name}
|
||
</p>
|
||
<p className="text-sm leading-6 text-[var(--ink-muted)]">
|
||
{selectedItem.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="mt-3 flex flex-wrap gap-2">
|
||
{selectedItem.tags.map((tag) => (
|
||
<span
|
||
key={tag}
|
||
className="rounded-full bg-[rgba(110,98,84,0.08)] px-2.5 py-1 font-[var(--font-mono)] text-[11px] uppercase tracking-[0.18em] text-[var(--ink-muted)]"
|
||
>
|
||
{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<p className="text-sm leading-6 text-[var(--ink-muted)]">
|
||
通过资源管理器弹窗直接点选图片，选择后会在摘要卡中同步显示资源名称与提交 ID。
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|