Files
bilibili-subtitle/src/components/ApiKeyReminder.tsx
2024-10-06 14:07:57 +08:00

27 lines
937 B
TypeScript

import React from 'react';
import { useAppSelector } from '../hooks/redux';
import { openOptionsPage } from '../utils/chromeUtils';
const ApiKeyReminder: React.FC = () => {
const apiKey = useAppSelector(state => state.env.envData.apiKey);
const geminiApiKey = useAppSelector(state => state.env.envData.geminiApiKey);
const aiType = useAppSelector(state => state.env.envData.aiType);
if ((aiType === 'gemini' && geminiApiKey) || (aiType !== 'gemini' && apiKey)) {
return null;
}
return (
<div className="flex items-center justify-between p-2 bg-yellow-100 text-yellow-800 text-sm rounded-md">
<span>API密钥以使用总结及翻译功能</span>
<button
className="px-2 py-1 bg-yellow-200 hover:bg-yellow-300 rounded text-xs font-medium transition-colors"
onClick={openOptionsPage}
>
</button>
</div>
);
};
export default ApiKeyReminder;