generated from fahricansecer/boilerplate-fe
main
All checks were successful
HarunCAN Studio FE Deploy 🎨 / build-and-deploy (push) Successful in 21s
All checks were successful
HarunCAN Studio FE Deploy 🎨 / build-and-deploy (push) Successful in 21s
This commit is contained in:
Harun CAN
@@ -32,8 +32,15 @@ export default function Admin({ forceOpen = false }: { forceOpen?: boolean }) {
|
||||
|
||||
// Client state
|
||||
const [newClientName, setNewClientName] = useState('');
|
||||
const [newClientWebsite, setNewClientWebsite] = useState('');
|
||||
const [clientUploading, setClientUploading] = useState(false);
|
||||
const [editingClientId, setEditingClientId] = useState<string | null>(null);
|
||||
const [editingClientName, setEditingClientName] = useState('');
|
||||
const [editingClientWebsite, setEditingClientWebsite] = useState('');
|
||||
const [clientSaving, setClientSaving] = useState(false);
|
||||
const [clientLogoUploading, setClientLogoUploading] = useState<string | null>(null);
|
||||
const clientFileRef = useRef<HTMLInputElement>(null);
|
||||
const clientLogoChangeRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Audit Logs state
|
||||
const [auditLogs, setAuditLogs] = useState<api.AuditLogAPI[]>([]);
|
||||
@@ -168,9 +175,10 @@ export default function Admin({ forceOpen = false }: { forceOpen?: boolean }) {
|
||||
throw new Error('Sunucu görsel URL\'sini döndüremedi. Lütfen tekrar deneyin.');
|
||||
}
|
||||
|
||||
await api.createClient({ name: newClientName.trim(), logo: logoUrl });
|
||||
await api.createClient({ name: newClientName.trim(), logo: logoUrl, website: newClientWebsite.trim() || undefined });
|
||||
await refreshClients();
|
||||
setNewClientName('');
|
||||
setNewClientWebsite('');
|
||||
showMessage('Marka eklendi', 'success');
|
||||
} catch (err: any) {
|
||||
showMessage(err.message || 'Marka eklenemedi', 'error');
|
||||
@@ -516,8 +524,8 @@ export default function Admin({ forceOpen = false }: { forceOpen?: boolean }) {
|
||||
|
||||
<div className="p-4 bg-slate-900/50 border border-white/10 rounded-lg mb-6">
|
||||
<h4 className="text-sm font-mono text-slate-400 mb-3">YENİ MARKA EKLE</h4>
|
||||
<div className="flex items-end gap-4">
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="grid md:grid-cols-2 gap-4 mb-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-mono text-slate-500">MARKA ADI</label>
|
||||
<input
|
||||
type="text"
|
||||
@@ -527,7 +535,18 @@ export default function Admin({ forceOpen = false }: { forceOpen?: boolean }) {
|
||||
placeholder="Netflix, Disney, Warner Bros..."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-mono text-slate-500">WEB SİTESİ <span className="text-slate-600">(Opsiyonel — SEO backlink)</span></label>
|
||||
<input
|
||||
type="url"
|
||||
value={newClientWebsite}
|
||||
onChange={(e) => setNewClientWebsite(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-white/10 px-4 py-2.5 text-white focus:border-[#FF5733] outline-none transition-colors text-sm rounded-sm"
|
||||
placeholder="https://www.netflix.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<input
|
||||
ref={clientFileRef}
|
||||
type="file"
|
||||
@@ -547,28 +566,173 @@ export default function Admin({ forceOpen = false }: { forceOpen?: boolean }) {
|
||||
<Upload className="w-4 h-4" />
|
||||
{clientUploading ? 'Yükleniyor...' : 'Logo Yükle & Ekle'}
|
||||
</button>
|
||||
</div>
|
||||
{newClientWebsite && (
|
||||
<span className="text-[10px] font-mono text-green-400/70 flex items-center gap-1">🔗 SEO backlink aktif</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{data.clients.map((client) => (
|
||||
<div key={client.id} className="relative group p-4 bg-slate-900/50 border border-white/10 rounded-lg flex flex-col items-center">
|
||||
{/* Hidden file input for logo change */}
|
||||
<input
|
||||
ref={clientLogoChangeRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={async (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file && editingClientId) {
|
||||
setClientLogoUploading(editingClientId);
|
||||
try {
|
||||
const response = await api.uploadFile(file);
|
||||
const media = (response as any).data || response;
|
||||
let logoUrl = '';
|
||||
if (media && typeof media === 'object') {
|
||||
if (media.url) logoUrl = media.url;
|
||||
else if (media.filename) logoUrl = `/uploads/${media.filename}`;
|
||||
}
|
||||
if (!logoUrl) throw new Error('Görsel URL alınamadı');
|
||||
await api.updateClient(editingClientId, { logo: logoUrl });
|
||||
await refreshClients();
|
||||
showMessage('Logo güncellendi', 'success');
|
||||
} catch (err: any) {
|
||||
showMessage(err.message || 'Logo güncellenemedi', 'error');
|
||||
} finally {
|
||||
setClientLogoUploading(null);
|
||||
}
|
||||
}
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{data.clients.map((client) => {
|
||||
const isEditing = editingClientId === client.id;
|
||||
return (
|
||||
<div key={client.id} className={`relative group p-4 border rounded-lg flex flex-col transition-colors ${
|
||||
isEditing
|
||||
? 'bg-slate-800/80 border-[#FF5733]/30'
|
||||
: 'bg-slate-900/50 border-white/10'
|
||||
}`}>
|
||||
{/* Logo area */}
|
||||
<div className="flex items-center justify-center mb-3 relative">
|
||||
<img
|
||||
src={api.getMediaUrl(client.logo)}
|
||||
alt={client.name}
|
||||
className="h-[60px] w-auto object-contain mb-3"
|
||||
className={`h-[60px] w-auto object-contain transition-opacity ${
|
||||
clientLogoUploading === client.id ? 'opacity-30' : ''
|
||||
}`}
|
||||
style={{ maxWidth: '200px' }}
|
||||
/>
|
||||
<span className="text-xs font-mono text-slate-400 text-center">{client.name}</span>
|
||||
{clientLogoUploading === client.id && (
|
||||
<span className="absolute text-xs text-white animate-pulse">Yükleniyor...</span>
|
||||
)}
|
||||
{isEditing && clientLogoUploading !== client.id && (
|
||||
<button
|
||||
onClick={() => handleRemoveClient(client.id)}
|
||||
className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1 text-red-400 hover:text-red-300"
|
||||
onClick={() => clientLogoChangeRef.current?.click()}
|
||||
className="absolute inset-0 bg-black/50 rounded flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer"
|
||||
title="Logo değiştir"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
<Upload className="w-5 h-5 text-white" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content area */}
|
||||
{isEditing ? (
|
||||
<div className="w-full space-y-3 mt-1">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-mono text-slate-500">MARKA ADI</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editingClientName}
|
||||
onChange={(e) => setEditingClientName(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-white/10 px-3 py-1.5 text-sm text-white focus:border-[#FF5733] outline-none rounded-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-mono text-slate-500">WEB SİTESİ <span className="text-slate-600">(SEO)</span></label>
|
||||
<input
|
||||
type="url"
|
||||
value={editingClientWebsite}
|
||||
onChange={(e) => setEditingClientWebsite(e.target.value)}
|
||||
className="w-full bg-slate-950 border border-white/10 px-3 py-1.5 text-sm text-white focus:border-[#FF5733] outline-none rounded-sm"
|
||||
placeholder="https://www.example.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-2 pt-1">
|
||||
<button
|
||||
onClick={async () => {
|
||||
setClientSaving(true);
|
||||
try {
|
||||
await api.updateClient(client.id, {
|
||||
name: editingClientName.trim() || client.name,
|
||||
website: editingClientWebsite.trim() || null as any,
|
||||
});
|
||||
await refreshClients();
|
||||
setEditingClientId(null);
|
||||
showMessage('Marka güncellendi', 'success');
|
||||
} catch (err: any) {
|
||||
showMessage(err.message || 'Güncellenemedi', 'error');
|
||||
} finally {
|
||||
setClientSaving(false);
|
||||
}
|
||||
}}
|
||||
disabled={clientSaving}
|
||||
className="flex-1 flex items-center justify-center gap-1 px-3 py-1.5 text-xs font-bold bg-[#FF5733] text-white rounded-sm hover:bg-white hover:text-slate-950 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<Save className="w-3 h-3" />
|
||||
{clientSaving ? 'Kaydediliyor...' : 'Kaydet'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingClientId(null)}
|
||||
className="px-3 py-1.5 text-xs text-slate-400 hover:text-white border border-white/10 rounded-sm transition-colors"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<span className="text-xs font-mono text-slate-400 text-center mb-1">{client.name}</span>
|
||||
<span
|
||||
className="text-[10px] font-mono px-2 py-0.5 rounded border transition-colors text-center"
|
||||
style={{
|
||||
borderColor: client.website ? 'rgba(74, 222, 128, 0.3)' : 'rgba(255,255,255,0.05)',
|
||||
color: client.website ? 'rgb(74, 222, 128)' : 'rgb(71, 85, 105)',
|
||||
backgroundColor: client.website ? 'rgba(74, 222, 128, 0.05)' : 'transparent',
|
||||
}}
|
||||
>
|
||||
{client.website ? `🔗 ${client.website.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '')}` : 'Web sitesi yok'}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Action buttons (visible on hover when not editing) */}
|
||||
{!isEditing && (
|
||||
<div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingClientId(client.id);
|
||||
setEditingClientName(client.name);
|
||||
setEditingClientWebsite(client.website || '');
|
||||
}}
|
||||
className="p-1.5 text-blue-400 hover:text-blue-300 hover:bg-blue-500/10 rounded transition-colors"
|
||||
title="Düzenle"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleRemoveClient(client.id)}
|
||||
className="p-1.5 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded transition-colors"
|
||||
title="Sil"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
@@ -30,16 +30,18 @@ export default function Clients() {
|
||||
{duplicated.map((client, index) => (
|
||||
<a
|
||||
key={`${client.id}-${index}`}
|
||||
href={client.website || '#'}
|
||||
href={client.website || undefined}
|
||||
target={client.website ? '_blank' : undefined}
|
||||
rel="noopener noreferrer"
|
||||
className="flex-shrink-0 group transition-all duration-500"
|
||||
title={client.name}
|
||||
rel={client.website ? 'noopener' : undefined}
|
||||
className={`flex-shrink-0 group transition-all duration-500 ${client.website ? 'cursor-pointer' : 'cursor-default'}`}
|
||||
title={client.website ? `${client.name} — Visit Website` : client.name}
|
||||
aria-label={client.website ? `Visit ${client.name} official website` : `${client.name} logo`}
|
||||
onClick={(e) => { if (!client.website) e.preventDefault(); }}
|
||||
>
|
||||
<img
|
||||
src={getMediaUrl(client.logo)}
|
||||
alt={client.name}
|
||||
className="h-[50px] md:h-[60px] w-auto object-contain opacity-95 group-hover:opacity-100 transition-all duration-500"
|
||||
alt={`${client.name} logo — official partner of Harun CAN Studio`}
|
||||
className={`h-[50px] md:h-[60px] w-auto object-contain opacity-95 group-hover:opacity-100 transition-all duration-500 ${client.website ? 'group-hover:scale-105' : ''}`}
|
||||
style={{ maxWidth: '250px' }}
|
||||
/>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user