Sidebar.tsx

import React, { useState } from 'react';
import { Folder, Info, Plus, Tag, X } from 'lucide-react';
import { Script } from './types';
interface Props { script:Script; isEditMode:boolean; onUpdate:(p:Partial<Script>)=>void; onCloseMobile?:()=>void; }
export const Sidebar:React.FC<Props>=({script,isEditMode,onUpdate,onCloseMobile})=>{const[newTag,setNewTag]=useState('');const addTag=()=>{const tag=newTag.trim();if(!tag)return;const tags=[...new Set([...(script.tags||[]),tag])];onUpdate({tags});setNewTag('')};return <aside className="min-h-full p-5 space-y-5 bg-[var(--bg-card)]"><div className="flex items-center justify-between lg:hidden"><strong>Metadata</strong><button onClick={onCloseMobile} className="p-2 rounded-xl bg-[var(--bg-hover)]"><X className="w-4 h-4"/></button></div><section><h3 className="text-xs font-bold flex items-center gap-2 mb-2"><Info className="w-4 h-4 text-red-500"/>Deskripsi</h3>{isEditMode?<textarea value={script.description} onChange={e=>onUpdate({description:e.target.value})} className="w-full min-h-24 p-2 rounded-xl border border-[var(--border-color)] bg-[var(--bg-app)] text-xs" placeholder="Fungsi script..."/>:<p className="text-xs text-[var(--text-muted)] whitespace-pre-wrap">{script.description||'Tanpa deskripsi.'}</p>}</section><section><h3 className="text-xs font-bold flex items-center gap-2 mb-2"><Folder className="w-4 h-4 text-red-500"/>Folder</h3>{isEditMode?<input value={script.folder||''} onChange={e=>onUpdate({folder:e.target.value})} className="w-full p-2 rounded-xl border border-[var(--border-color)] bg-[var(--bg-app)] text-xs" placeholder="Project/Backend"/>:<p className="text-xs text-[var(--text-muted)]">{script.folder||'/'}</p>}</section><section><h3 className="text-xs font-bold flex items-center gap-2 mb-2"><Tag className="w-4 h-4 text-red-500"/>Tags</h3>{isEditMode&&<div className="flex gap-1"><input value={newTag} onChange={e=>setNewTag(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addTag()} className="min-w-0 flex-1 p-2 rounded-xl border border-[var(--border-color)] bg-[var(--bg-app)] text-xs" placeholder="Tambah tag"/><button onClick={addTag} className="p-2 rounded-xl bg-red-600 text-white"><Plus className="w-3 h-3"/></button></div>}<div className="flex flex-wrap gap-1 mt-2">{(script.tags||[]).map(t=><span key={t} className="px-2 py-1 rounded-lg bg-blue-50 text-blue-600 text-[10px] flex items-center gap-1">#{t}{isEditMode&&<button onClick={()=>onUpdate({tags:(script.tags||[]).filter(x=>x!==t)})}><X className="w-3 h-3"/></button>}</span>)}</div></section><section><h3 className="text-xs font-bold mb-2">Catatan Update</h3>{isEditMode?<input value={script.updateInfo} onChange={e=>onUpdate({updateInfo:e.target.value})} className="w-full p-2 rounded-xl border border-[var(--border-color)] bg-[var(--bg-app)] text-xs"/>:<p className="text-xs text-[var(--text-muted)]">{script.updateInfo||'-'}</p>}</section><div className="text-[10px] text-[var(--text-muted)] pt-4 border-t border-[var(--border-color)]">Dibuat: {new Date(script.createdAt).toLocaleString('id-ID')}<br/>Diubah: {new Date(script.updatedAt).toLocaleString('id-ID')}</div></aside>};