init: scripts diversos (crawlers, conversores, scrapers)
This commit is contained in:
94
email-cleaner/components/Accounts.tsx
Executable file
94
email-cleaner/components/Accounts.tsx
Executable file
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* Accounts.tsx
|
||||
*
|
||||
* @author Descomplicar® Crescimento Digital
|
||||
* @link https://descomplicar.pt
|
||||
* @copyright 2025 Descomplicar®
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import type { Account } from '../types';
|
||||
import AddAccountModal from './AddAccountModal';
|
||||
import { GmailIcon } from './icons/GmailIcon';
|
||||
import { OutlookIcon } from './icons/OutlookIcon';
|
||||
import { YahooIcon } from './icons/YahooIcon';
|
||||
import { ImapIcon } from './icons/ImapIcon';
|
||||
|
||||
interface AccountsProps {
|
||||
accounts: Account[];
|
||||
addAccount: (account: Omit<Account, 'id' | 'avatar'>) => void;
|
||||
}
|
||||
|
||||
const ProviderIcon = ({ provider }: { provider: Account['provider'] }) => {
|
||||
switch (provider) {
|
||||
case 'gmail':
|
||||
return <GmailIcon className="w-6 h-6" />;
|
||||
case 'outlook':
|
||||
return <OutlookIcon className="w-6 h-6" />;
|
||||
case 'yahoo':
|
||||
return <YahooIcon className="w-6 h-6" />;
|
||||
case 'imap':
|
||||
return <ImapIcon className="w-6 h-6" />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const Accounts: React.FC<AccountsProps> = ({ accounts, addAccount }) => {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const handleAddAccount = (account: Omit<Account, 'id' | 'avatar'>) => {
|
||||
addAccount(account);
|
||||
setIsModalOpen(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-800 dark:text-white">Contas Conectadas</h2>
|
||||
<p className="text-slate-500 dark:text-slate-400">Gerencie as contas de e-mail que você deseja limpar.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
className="bg-sky-500 text-white font-semibold py-2 px-5 rounded-lg hover:bg-sky-600 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
Adicionar Nova Conta
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{accounts.map(account => (
|
||||
<div key={account.id} className="bg-white dark:bg-slate-800 rounded-xl shadow-md p-5 border border-slate-200 dark:border-slate-700 flex items-center gap-4">
|
||||
<img src={account.avatar} alt={`Avatar de ${account.email}`} className="w-12 h-12 rounded-full" />
|
||||
<div className="flex-1">
|
||||
<p className="font-semibold text-slate-700 dark:text-slate-200 truncate">{account.email}</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 capitalize flex items-center gap-2">
|
||||
<ProviderIcon provider={account.provider} />
|
||||
{account.provider}
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={() => removeAccount(account.id)} className="p-2 rounded-full text-slate-400 hover:bg-slate-100 hover:text-red-500 dark:hover:bg-slate-700 transition-colors" aria-label="Remover conta">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.134-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.067-2.09 1.02-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AddAccountModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
onAddAccount={handleAddAccount}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Accounts;
|
||||
Reference in New Issue
Block a user