41 lines
1.9 KiB
TypeScript
41 lines
1.9 KiB
TypeScript
"use client";
|
|
import type { SettingsBlock } from "@/types/page";
|
|
import { Settings, Edit, Lock } from "lucide-react";
|
|
|
|
export default function SettingsBlockView({ category, editable }: SettingsBlock) {
|
|
return (
|
|
<div className="w-full rounded-xl border border-gray-200 dark:border-gray-700 p-6 bg-white dark:bg-gray-800">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<Settings className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
|
|
设置 - {category}
|
|
</h3>
|
|
{editable ? (
|
|
<Edit className="w-4 h-4 text-green-600" />
|
|
) : (
|
|
<Lock className="w-4 h-4 text-gray-400" />
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<span className="text-sm text-gray-600 dark:text-gray-400">类别</span>
|
|
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">{category}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<span className="text-sm text-gray-600 dark:text-gray-400">编辑权限</span>
|
|
<span className={`text-sm font-medium ${editable ? 'text-green-600' : 'text-gray-500'}`}>
|
|
{editable ? '可编辑' : '只读'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{editable && (
|
|
<button className="mt-4 w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
|
|
编辑设置
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|